Flutter 实现酷炫的3D效果示例代码

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

这篇文章主要介绍了Flutter 实现酷炫的3D效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

此文讲解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 实现酷炫的3D效果示例代码的文章就介绍到这了,更多相关Flutter 实现酷炫的3D效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

android编程开发之全屏和退出全屏的实现方法
这篇文章主要介绍了android编程开发之全屏和退出全屏的实现方法,以实例形式较为详细的分析了Android全屏及退出全屏的页面布局与功能实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
Android中使用TextView实现高仿京东淘宝各种倒计时效果
今天给大家带来的是仅仅使用一个TextView实现一个高仿京东、淘宝、唯品会等各种电商APP的活动倒计时。今天小编把实现代码分享到脚本之家平台，对android textclock 倒计时效果感兴趣的朋友参考下吧
2016-10-10
Android自带的四种线程池使用总结
本篇文章主要介绍了Android自带的四种线程池使用总结，详细的介绍了4种线程池的用法，具有一定的参考价值，有兴趣的小伙伴可以了解一下
2017-07-07
Android开发中使用mms模块收发单卡和双卡短信的教程
这篇文章主要介绍了Android开发中使用mms模块收发单卡和双卡短信的教程,文中举了MOTO XT800手机(估计已经落伍很久了--)的例子来说明如何解决双卡双待时的短信异常问题,需要的朋友可以参考下
2016-02-02
Android系统更改状态栏字体颜色
这篇文章主要介绍了Android系统更改状态栏字体颜色的方法,需要的朋友可以参考下
2016-01-01
Android编程使用WebView实现文件下载功能的两种方法
这篇文章主要介绍了Android编程使用WebView实现文件下载功能的两种方法,涉及Android基于WebView的相关文件传输与线程操作技巧,需要的朋友可以参考下
2018-02-02
Android RecyclerView自定义上拉和下拉刷新效果
这篇文章主要为大家详细介绍了Android RecyclerView自定义上拉和下拉刷新效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
Android自定义View实现绘制虚线的方法详解
这篇文章主要给大家介绍了Android自定义View实现绘制虚线的方法，在绘制过程中走了一些弯路才实现了虚线的效果，所以想着总结分享出来，方便有需要的朋友和自己在需要的时候参考学习，下面来一起看看吧。
2017-04-04
Android屏幕旋转之横屏竖屏切换的实现
这篇文章主要介绍了Android屏幕旋转之横屏竖屏切换的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Android实现图像切换器
这篇文章主要为大家详细介绍了Android实现图像切换器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10