点击上方 "程序员小乐"关注, 星标或置顶一起成长

后台回复“大礼包”有惊喜礼包！

关注订阅号「程序员小乐」，收看更多精彩内容

每日英文

It doesn't matter what others think of you ,What matters most is How you see yourself.

不要太在意别人如何看待你；最为重要的是你如何看待你自己。

每日掏心话

世间没有不被评说的事，也没有不被猜测的人；依心而行，做真实漂亮的自己。生命是倒计时的；日子是顺着过的；人生是说不清的；命运是猜不透的；辉煌总会来的；霉头总会有的；命是必须信的。

来自：老孟Flutter | 责编：乐乐

链接：live.bilibili.com/21917305

后端架构师(ID:study_tech)第 1084 次推文

往日回顾：再见！Postman

   正文   

Flutter 中3D效果是通过Transform组件实现的，没有变换效果的实现：

 class TransformDemo extends StatelessWidget {@overrideWidget 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;@overrideWidget 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效果，但效果比较生硬，尤其垂直方向旋转的时候远点和近点在屏幕上的宽度是一样，

在公众号程序员小乐回复“Java”，获取Java面试题和答案惊喜礼包。

添加近大远小的效果：

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

PS：欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，欢迎转发分享给更多人。

欢迎加入后端架构师交流群，在后台回复“学习”即可。

猜你还想看

阿里、腾讯、百度、华为、京东最新面试题汇集

员工踩点上下班被HR约谈，网友：按时上下班，天经地义

CTO说：Service层的接口是不是多此一举

Java实现单链表、栈、队列三种数据结构

BAT面试经验总结

在下面公众号后台（非本号），回复关键字「手册」获取

嘿，你在看吗？