快捷導(dǎo)航

Flutter 實現(xiàn)酷炫的3D效果示例代碼

更新時間：2020年07月23日 08:56:46 作者：老孟Flutter

這篇文章主要介紹了Flutter 實現(xiàn)酷炫的3D效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

此文講解3個酷炫的3D動畫效果。

下面是要實現(xiàn)的效果：

Flutter 中3D效果是通過 Transform 組件實現(xiàn)的，沒有變換效果的實現(xiàn)：

class TransformDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('3D 變換Demo'),
 ),
 body: Container(
 alignment: Alignment.center,
 color: Colors.white,
 child: Text('3D 變換Demo'),
 ),
 );
 }
}

通過 GestureDetector 組件添加滑動事件監(jiān)聽：

@override
Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('3D 變換Demo'),
 ),
 body: GestureDetector(
 onPanUpdate: (details) {
 print('$details');
 },
 child: Container(
 alignment: Alignment.center,
 color: Colors.white,
 child: Text('3D 變換Demo'),
 ),
 ),
 );
}

添加 Transform 對組件進(jìn)入旋轉(zhuǎn)：

@override
Widget build(BuildContext context) {
 return Transform(
 transform: Matrix4.identity()
 ..setEntry(3, 2, 0.001)
 ..rotateX(pi/6)
 ..rotateY(pi/6),
 alignment: Alignment.center,
 child: Scaffold(
 appBar: AppBar(
  title: Text('3D 變換Demo'),
 ),
 body: GestureDetector(
  onPanUpdate: (details) {
  },
  child: Container(
  alignment: Alignment.center,
  color: Colors.white,
  child: Text('3D 變換Demo'),
  ),
 ),
 ));
}

將滑動的偏移和旋轉(zhuǎn)進(jìn)行關(guān)聯(lián)：

class TransformDemo extends StatefulWidget {
 @override
 _TransformDemoState createState() => _TransformDemoState();
}

class _TransformDemoState extends State<TransformDemo> {
 double _rotateX = .0;
 double _rotateY = .0;

 @override
 Widget build(BuildContext context) {
 return Transform(
 transform: Matrix4.identity()
  ..rotateX(_rotateX)
  ..rotateY(_rotateY),
 alignment: Alignment.center,
 child: Scaffold(
  appBar: AppBar(
  title: Text('3D 變換Demo'),
  ),
  body: GestureDetector(
  onPanUpdate: (details) {
  setState(() {
  _rotateX += details.delta.dy * .01;
  _rotateY += details.delta.dx * -.01;
  });
  },
  child: Container(
  alignment: Alignment.center,
  color: Colors.white,
  child: Text('3D 變換Demo'),
  ),
  ),
 ));
 }
}

基本已經(jīng)實現(xiàn)了3D效果，但效果比較生硬，尤其垂直方向旋轉(zhuǎn)的時候遠(yuǎn)點和近點在屏幕上的寬度是一樣，

添加近大遠(yuǎn)小的效果：

Transform(
 transform: Matrix4.identity()
 ..setEntry(3, 2, 0.001)
 ..rotateX(_rotateX)
 ..rotateY(_rotateY),
 ...

翻書效果

上面的效果類似于翻書的效果。

實現(xiàn)的原理：

將圖片左右切割為兩部分，兩張圖片共分割為4個新的組件，如下圖，分別為1、2、3、4

代碼實現(xiàn)：

_child1 = ClipRect(
 child: Align(
 alignment: Alignment.centerLeft,
 widthFactor: 0.5,
 child: child1,
 ),
);
_child2 = ClipRect(
 child: Align(
 alignment: Alignment.centerRight,
 widthFactor: 0.5,
 child: child1,
 ),
);

_child3 = ClipRect(
 child: Align(
 alignment: Alignment.centerLeft,
 widthFactor: 0.5,
 child: child2,
 ),
);

_child4 = ClipRect(
 child: Align(
 alignment: Alignment.centerRight,
 widthFactor: 0.5,
 child: child2,
 ),
);

將第一張圖片放在第二種圖片的上面，先旋轉(zhuǎn) 組件2 從 0度到 90度，然后再旋轉(zhuǎn) 組件3 從 -90度到0度，代碼實現(xiàn)：

Row(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Stack(
 children: [
 _child1,
 Transform(
  alignment: Alignment.centerRight,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.001)
  ..rotateY(_animation1.value),
  child: _child3,
 ),
 ],
 ),
 Container(
 width: 3,
 color: Colors.white,
 ),
 Stack(
 children: [
 _child4,
 Transform(
  alignment: Alignment.centerLeft,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.001)
  ..rotateY(_animation.value),
  child: _child2,
 )
 ],
 )
 ],
)

動畫控制器設(shè)置：

@override
void initState() {
 init();
 _controller =
 AnimationController(vsync: this, duration: Duration(seconds: 5))
 ..addListener(() {
  setState(() {});
 });
 _animation = Tween(begin: .0, end: pi / 2)
 .animate(CurvedAnimation(parent: _controller, curve: Interval(.0, .5)));
 _animation1 = Tween(begin: -pi / 2, end: 0.0).animate(
 CurvedAnimation(parent: _controller, curve: Interval(.5, 1.0)));
 _controller.forward();
 super.initState();
}

其中 child1, child2為兩種圖片，代碼如下：

_FlipUpDemoState(
 Container(
 width: 300,
 height: 400,
 child: Image.asset(
 'assets/images/b.jpg',
 fit: BoxFit.cover,
 ),
 ),
 Container(
 width: 300,
 height: 400,
 child: Image.asset(
 'assets/images/c.jpeg',
 fit: BoxFit.cover,
 ),
 ))

最后生成的效果就是開始的翻書效果。

上面是左右翻頁效果，同理換成上下翻頁效果：

@override
Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(),
 body: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: <Widget>[
 Stack(
  children: [
  _upperChild1,
  Transform(
  alignment: Alignment.bottomCenter,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.003)
  ..rotateX(_animation1.value),
  child: _upperChild2,
  ),
  ],
 ),
 SizedBox(
  height: 2,
 ),
 Stack(
  children: [
  _lowerChild2,
  Transform(
  alignment: Alignment.topCenter,
  transform: Matrix4.identity()
  ..setEntry(3, 2, 0.003)
  ..rotateX(_animation.value),
  child: _lowerChild1,
  )
  ],
 )
 ],
 ),
 );
}