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效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 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( alignm

  • Android Flutter实现五种酷炫文字动画效果详解

    目录 前言 波浪涌动效果 波浪线跳动文字组 彩虹动效 滚动广告牌效果 打字效果 其他效果 自定义效果 总结 前言 偶然逛国外博客,看到了一个介绍文字动画的库,进入 pub 一看,立马就爱上这个动画库了,几乎你能想到的文字动画效果它都有!现在正式给大家安利一下这个库:animated_text_kit.本篇我们介绍几个酷炫的效果,其他的效果大家可以自行查看官网文档使用. 波浪涌动效果 波浪涌动 上面的动画效果只需要下面几行代码,其中loadUntil用于控制波浪最终停留的高度,取值是0-1.0,如

  • 利用JavaScript制作一个酷炫的3D图片演示

    目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.

  • 利用Python绘制酷炫的3D地图

    目录 1.重庆市3D地图 2.中国3D地图一 3.中国3D地图二 4.中国3D地图三 5.地球展示 之前我们介绍了很多Python地图可视化的内容,本次主要介绍如何Python绘制3D地图,还是比较神奇的,下面让我们一起一饱眼福吧! 1.重庆市3D地图 from pyecharts import options as opts from pyecharts.charts import Map3D from pyecharts.globals import ChartType # 经纬度 exam

  • 如何利用Flutter实现酷狗流畅Tabbar效果

    目录 前言 效果图 分析效果 开发思路 FlutterTabbar解析源码 实现步骤 业务使用 写在最后 实现源码 前言 在2021年末,酷狗发布了最新版11.0.0版本,这是一次重大的UI重构,更新完打开着实让我耳目一新.在原有风格上,整个App变得更加清爽,流畅.其中Tabbar的风格让我非常感兴趣,如果用Flutter来实现,或许是一个很有趣的事情. 效果图 分析效果 研究酷狗Tabbar的动画可以发现,默认状态下在当前Tab的中心处展示圆点,滑动时的效果拆分成两个以下部分: 从单个Tab

  • Flutter 系统是如何实现ExpansionPanelList的示例代码

    在了解ExpansionPanelList实现前,先来了解下MergeableMaterial,它展示多个MergeableMaterialItem组件,当子组件发生变化时,以动画的方式打开或者关闭子组件,MergeableMaterial的父控件需要在主轴方向是一个没有限制的控件,比如SingleChildScrollView.Row.Column等. 基本用法如下: SingleChildScrollView( child: MergeableMaterial( children: [ Ma

  • Flutter仿钉钉考勤日历的示例代码

    本文主要介绍了Flutter仿钉钉考勤日历的示例代码,分享给大家,具体如下: 效果 原型 开发 1. 使用 // 考勤日历 DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(2020), lastDate: DateTime(2030), onDateChanged: onDateChanged, // 0:无状态,1:正常考勤 2:异常考情,迟到,早退, // 若不满一个月,日历会自动用0补满一个月 check

  • Flutter实现自定义搜索框AppBar的示例代码

    目录 介绍 效果图 实现步骤 完整源码 总结 介绍 开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录. 功能点: 搜索框.返回键.清除搜索内容功能.键盘处理. 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidge

  • Flutter实现笑嘻嘻的动态表情的示例代码

    目录 前言 AnimatedContainer 介绍 组件结构 细节实现 总结 前言 身在孤岛有很多无奈,比如说程序员属于比较偏门的职业.尤其是早些年,在行业里跳过几次槽后,可能你就已经认识整个圈子的人了.然后,再跳槽很可能就再次“偶遇”前同事了,用大潘的口头语来说就是:“好尴尬呀”.因此, 问起职业,往往只能是回答是搞计算机的.结果可能更尴尬,问的人可能笑嘻嘻地瞅着你,像看怪物一样看着你,接着突然冒出一句灵魂拷问:“我家电脑坏了,你能修不?”不过也不奇怪,那个时候在岛上重装一个 Windows

  • 基于Flutter实现转场动效的示例代码

    目录 前言 CupertinoFullscreenDialogTransition CupertinoPageTransition DecoratedBoxTransition FadeTransition PositionedTransition RotationTransition ScaleTransition SizeTransition SlideTransition 前言 动画经常会用于场景切换,比如滑动,缩放,尺寸变化,为应对这样的场景转换需要,Flutter 提供了 Transi

随机推荐