Flutter 核心技术与实战
陈航
前美团点评高级技术专家
42432 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 48 讲
Flutter 核心技术与实战
15
15
1.0x
00:00/00:00
登录|注册

22 | 如何构造炫酷的动画效果?

标记为dirty以自动刷新UI
监听Animation对象的变化
将Animation的状态与子Widget的样式绑定
根据当前值重新渲染组件
监听动画的进度变化
启动、暂停、反转动画
设置动画时长
管理Animation
根据预定规则输出动画当前状态
命名路由
基本路由
删除第3行的child,将Flutter Logo放到第7行的问题
AnimatedBuilder中child被指定两遍的原因
Hero组件实现元素跨页面过渡
AnimatedWidget和AnimatedBuilder简化动画实现
动画的状态与渲染分离
在两个页面的共享元素之间实现流畅的页面切换效果
共享元素变换
AnimatedBuilder
AnimatedWidget
Listener
AnimationController
Animation
Flutter对组件动画的支持
动画提升用户体验的重要性
页面打开和页面关闭传递参数
Flutter中实现页面路由的两种方式
思考题
总结
Hero动画
AnimatedWidget与AnimatedBuilder
Animation、AnimationController与Listener
如何构造炫酷的动画效果?

该思维导图由 AI 生成,仅供参考

你好,我是陈航。
在上一篇文章中,我带你一起学习了 Flutter 中实现页面路由的两种方式:基本路由与命名路由,即手动创建页面进行切换,和通过前置路由注册后提供标识符进行跳转。除此之外,Flutter 还在这两种路由方式的基础上,支持页面打开和页面关闭传递参数,可以更精确地控制路由切换。
通过前面第12131415篇文章的学习,我们已经掌握了开发一款样式精美的小型 App 的基本技能。但当下,用户对于终端页面的要求已经不再满足于只能实现产品功能,除了样式美观之外,还希望交互良好、有趣、自然。
动画就是提升用户体验的一个重要方式,一个恰当的组件动画或者页面切换动画,不仅能够缓解用户因为等待而带来的情绪问题,还会增加好感。Flutter 既然完全接管了渲染层,除了静态的页面布局之外,对组件动画的支持自然也不在话下。
因此在今天的这篇文章中,我会向你介绍 Flutter 中动画的实现方法,看看如何让我们的页面动起来。

Animation、AnimationController 与 Listener

动画就是动起来的画面,是静态的画面根据事先定义好的规律,在一定时间内不断微调,产生变化效果。而动画实现由静止到动态,主要是靠人眼的视觉残留效应。所以,对动画系统而言,为了实现动画,它需要做三件事儿:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

文章介绍了在Flutter中实现炫酷动画效果的方法,包括基本动画原理、CurvedAnimation的非线性曲线动画、动画重复执行、以及AnimatedWidget和AnimatedBuilder的使用方法。此外,还详细介绍了在Flutter中实现跨页面共享元素变换的方法,即通过Hero控件实现流畅的页面切换效果。总结来说,本文内容详实,适合读者快速了解Flutter中动画效果的实现方法,以及如何实现跨页面共享元素变换。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Flutter 核心技术与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(15)

  • 最新
  • 精选
  • 许童童
    1.第一个child会被用于参数传入builder函数,可以将动画与组件渲染代码解耦。 2.可以正常执行,问题就是初始状态就要跟随动画。

    作者回复: 赞

    2019-08-17
    5
    13
  • 和小胖
    关于作业题,找到了源代码注释,哈哈哈。 /// 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-25
    6
  • 高超
    AnimatedBulder 其实就是封装了下 AnimatedWdiget,在 AnimatedBulder 内部调用了 builder 函数,构建 widget 样式 这样的好处就是给真实要渲染的widget上加了一层 Container,所有的动画都是在那个 Container 上完成。 回答问题: 1. 为了渲染和动画分离 2. 可以的就是渲染和动画又揉一起了

    作者回复: 赞

    2019-09-04
    2
  • 宋世通
    看了下关于child的注释,感觉1,2是一个问题 1 child是可选的,作为builder的参数给开发者使用,在某些情况下可以提高性能,因此最好要传入child 2 通过child和builder的方式,动画时不必每次重新构建 child,这样限定了重建rebuild的范围,在builder中的widget才会重建,这可能是提高性能的一部分原因 3 如果builder返回的子树不依赖动画,更好的方式是build构建一次,也就是将子树作为child传入

    作者回复: 赞

    2019-09-04
    2
    2
  • 亡命之徒
    老师有没有遇到这个问题,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-19
    2
  • ptlCoder
    删除了就跟AnimatedWidget没有什么区别了 达不到渲染和动画隔离

    作者回复: 赞

    2019-08-28
    1
  • 黄明星
    用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 又传给了 container
    2023-04-03归属地:广东
收起评论
显示
设置
留言
15
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部