老孟導讀：此文講解3個酷炫的3D動畫效果。
下面是要實現的效果：
Flutter 中3D效果是通過 Transform 元件實現的，沒有變換效果的實現：
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 元件新增滑動事件監聽：
@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 對元件進入旋轉：
@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'),
),
),
));
}複製程式碼
將滑動的偏移和旋轉進行關聯：
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'),
),
),
));
}
}複製程式碼
基本已經實現了3D效果，但效果比較生硬，尤其垂直方向旋轉的時候遠點和近點在螢幕上的寬度是一樣，
新增近大遠小的效果：
Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateX(_rotateX)
..rotateY(_rotateY),
...複製程式碼
翻書效果
上面的效果類似於翻書的效果。
實現的原理：
將圖片左右切割為兩部分，兩張圖片共分割為4個新的元件，如下圖，分別為1、2、3、4
程式碼實現：
_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,
),
);複製程式碼將第一張圖片放在第二種圖片的上面，先旋轉 元件2 從 0度到 90度，然後再旋轉 元件3 從 -90度到0度，程式碼實現：
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,
)
],
)
],
)複製程式碼動畫控制器設定：
@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,
)
],
)
],
),
);
}複製程式碼
交流
老孟Flutter部落格地址（330個控制元件用法）：laomengit.com
歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：
 |
 |