此文講解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,);
}

新增 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,));
}

將滑動的偏移和旋轉進行關聯：

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),child: Scaffold(
  appBar: AppBar(
  title: Text('3D 變換Demo'),body: GestureDetector(
  onPanUpdate: (details) {
  setState(() {
  _rotateX += details.delta.dy * .01;
  _rotateY += details.delta.dx * -.01;
  });
  },));
 }
}

基本已經實現了3D效果，但效果比較生硬，尤其垂直方向旋轉的時候遠點和近點在螢幕上的寬度是一樣，

新增近大遠小的效果：

Transform(
 transform: Matrix4.identity()
 ..setEntry(3,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,);

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

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

將第一張圖片放在第二種圖片的上面，先旋轉 元件2 從 0度到 90度，然後再旋轉 元件3 從 -90度到0度，程式碼實現：

Row(
 mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
 Stack(
 children: [
 _child1,Transform(
  alignment: Alignment.centerRight,transform: Matrix4.identity()
  ..setEntry(3,0.001)
  ..rotateY(_animation1.value),child: _child3,],Container(
 width: 3,Stack(
 children: [
 _child4,Transform(
  alignment: Alignment.centerLeft,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,child: Image.asset(
 'assets/images/c.jpeg',))

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

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

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

到此這篇關於Flutter 實現酷炫的3D效果示例程式碼的文章就介紹到這了,更多相關Flutter 實現酷炫的3D效果內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！