22 | 如何构造炫酷的动画效果?
陈航
该思维导图由 AI 生成,仅供参考
你好,我是陈航。
在上一篇文章中,我带你一起学习了 Flutter 中实现页面路由的两种方式:基本路由与命名路由,即手动创建页面进行切换,和通过前置路由注册后提供标识符进行跳转。除此之外,Flutter 还在这两种路由方式的基础上,支持页面打开和页面关闭传递参数,可以更精确地控制路由切换。
通过前面第12、13、14和15篇文章的学习,我们已经掌握了开发一款样式精美的小型 App 的基本技能。但当下,用户对于终端页面的要求已经不再满足于只能实现产品功能,除了样式美观之外,还希望交互良好、有趣、自然。
动画就是提升用户体验的一个重要方式,一个恰当的组件动画或者页面切换动画,不仅能够缓解用户因为等待而带来的情绪问题,还会增加好感。Flutter 既然完全接管了渲染层,除了静态的页面布局之外,对组件动画的支持自然也不在话下。
因此在今天的这篇文章中,我会向你介绍 Flutter 中动画的实现方法,看看如何让我们的页面动起来。
Animation、AnimationController 与 Listener
动画就是动起来的画面,是静态的画面根据事先定义好的规律,在一定时间内不断微调,产生变化效果。而动画实现由静止到动态,主要是靠人眼的视觉残留效应。所以,对动画系统而言,为了实现动画,它需要做三件事儿:
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
文章介绍了在Flutter中实现炫酷动画效果的方法,包括基本动画原理、CurvedAnimation的非线性曲线动画、动画重复执行、以及AnimatedWidget和AnimatedBuilder的使用方法。此外,还详细介绍了在Flutter中实现跨页面共享元素变换的方法,即通过Hero控件实现流畅的页面切换效果。总结来说,本文内容详实,适合读者快速了解Flutter中动画效果的实现方法,以及如何实现跨页面共享元素变换。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Flutter 核心技术与实战》,新⼈⾸单¥59
《Flutter 核心技术与实战》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(15)
- 最新
- 精选
- 许童童1.第一个child会被用于参数传入builder函数,可以将动画与组件渲染代码解耦。 2.可以正常执行,问题就是初始状态就要跟随动画。
作者回复: 赞
2019-08-17513 - 和小胖关于作业题,找到了源代码注释,哈哈哈。 /// If the pre-built subtree is passed as the [child] parameter, the /// [AnimatedBuilder] will pass it back to the [builder] function so that it /// can be incorporated into the build. /// /// Using this pre-built child is entirely optional, but can improve /// performance significantly in some cases and is therefore a good practice. /// can be incorporated into the build. /// /// Using this pre-built child is entirely optional, but can improve /// performance significantly in some cases and is therefore a good practice.
作者回复: 赞
2019-09-256 - 高超AnimatedBulder 其实就是封装了下 AnimatedWdiget,在 AnimatedBulder 内部调用了 builder 函数,构建 widget 样式 这样的好处就是给真实要渲染的widget上加了一层 Container,所有的动画都是在那个 Container 上完成。 回答问题: 1. 为了渲染和动画分离 2. 可以的就是渲染和动画又揉一起了
作者回复: 赞
2019-09-042 - 宋世通看了下关于child的注释,感觉1,2是一个问题 1 child是可选的,作为builder的参数给开发者使用,在某些情况下可以提高性能,因此最好要传入child 2 通过child和builder的方式,动画时不必每次重新构建 child,这样限定了重建rebuild的范围,在builder中的widget才会重建,这可能是提高性能的一部分原因 3 如果builder返回的子树不依赖动画,更好的方式是build构建一次,也就是将子树作为child传入
作者回复: 赞
2019-09-0422 - 亡命之徒老师有没有遇到这个问题,Widget myFormWidget(BuildContext context){在这里吗创建一个form组件} ,class BodyWidget extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ // textFieldWidget(context), myFormWidget(context), ], ); } 然后通过这种方式调用,键盘刚获取焦点立马就是去焦点了,无法输入,这是什么原因
作者回复: 1.文本输入需要用StatefulWidget 2.文本输入控制使用TextEditingController
2019-08-192 - ptlCoder删除了就跟AnimatedWidget没有什么区别了 达不到渲染和动画隔离
作者回复: 赞
2019-08-281 - 黄明星用AnimatedWidget的方式,如果要传入多个Animation对象,listenable应该如何取呢?
作者回复: 如果Animation是相同的,再包一层就可以了呀;如果Animation不同,那就分别做好了,跟普通widget没啥区别
2019-10-14 - 和小胖在写代码时候需要注意得地方,controller.repeat(reverse: true) 让动画重复执行的一定要写在动画开始 controller.forward() 之后,否则应该会不生效,这是我遇到的情况。
作者回复: repeat和forward只需要一个就可以了,不用两个都写
2019-09-25 - zero_关于:需要注意的是,我们在创建 AnimationController 的时候,设置了一个 vsync 属性。这个属性是用来防止出现不可见动画的。vsync 对象会把动画绑定到一个 Widget,当 Widget 不显示时,动画将会暂停,当 Widget 再次显示时,动画会重新恢复执行,这样就可以避免动画的组件不在当前屏幕时白白消耗资源。 要是想让它在后台执行有什么办法吗?2023-04-10归属地:广东
- 神佑小鹿第一个是参数吧,第二个是 animationbuilder 把参数传给了 builder 函数,然后 builder 又传给了 container2023-04-03归属地:广东
收起评论