【Flutter 动画探索】Flutter 动画小册已发布

5,313 阅读8分钟

1.欢迎来到Flutter 动画探索

本册的发布,标志着 Flutter 框架底层三位大佬的集结完毕:

另外,如果你不太愿意买小册,也可以下载项目的源码跑跑看,学习一下。

小册名小册地址源码地址
《Flutter 绘制指南 - 妙笔生花》这里idraw
《Flutter 手势探索 - 指掌天下》这里itouch
《Flutter 动画探索 - 流光幻影》这里ianim

2. 想说在前面的话

手势绘制动画布局 四个大部分是界面构成交互体验的核心,一切可视的展现交互的触发都脱离不了这四者。 Flutter 作为一个优秀的跨平台框架,但很多人对他并没有全面的认知,只停留在表面的使用上。如果需求的 UI 表现没有内置组件 支持,就无法继续进行,只能找三方库,找不到的话就只能止步于此。这就很容易达到一个瓶颈期: 绘制不会画手势不太懂动画不会做布局一团糟

目前的三本小册比较系统地介绍了 Flutter 绘制技能Flutter 手势体系Flutter 动画体系 三大模块。这些知识可以为你在 Flutter 技术前进的路上扫除一些障碍,让你不再仅限于简单的组件使用,更有能力靠自己去解决一些实际问题。我也很高兴前两本小册可以为大家提供技术上的帮助,你们的肯定让我非常欣慰,也让我觉得自己做的事是有价值的。


3.关于阅读源码

现在 内卷 这个词非常火,稍微深入一丢丢,看看源码,就有人吵着 。一个演员,台上三分钟,台下十年功。想磨练自己精进演技,克服表演中的重重困难,这能叫卷吗?干这行的,既然吃这口饭,就要有这份手艺 。如果一个工具会和你朝夕相伴,或可能成为你饭碗的时候,那你对这个工具再怎么深入研究都是不为过的,因为我们就是干这个的。我们自然角色就绝不仅仅是一个使用者,对工具的认识了解,是工具使用者最基础的能力。

内卷 是供求不平衡下的不合理竞争,这不是放弃精进自己,拓展知识的借口。在源码中藏有很多有价值的宝藏,这些会开拓你的视野,让你更熟悉自己所使用的工具。可以体会作者的用意,思索某个类被定义的意义,发现其中运用的模式,这些都能对我们的编码能力起到一个正反馈循环。即看得越多,体会得越深,你就更容易去阅读源码,汲取的经验也就越多。反之就是一个负反馈,不想看源码,因为看不懂,遇到问题就去搜,搜不到就去问。这样你的目标是解决问题,而不是拥有解决问题的能力。无法有更深层的认识和思考,就很容易出现更多的问题,你面临的就是更多的

授人以鱼不如授人以渔 就是这个道理,不要只是关注解决面前的问题(肚子饿) ,而应更注重解决问题的能力(如何获取食物)。然而,自己看源码确实是一件非常痛苦的事,特别是能力欠佳的朋友,大多数都没有耐心能力去深究源码的。其中有不少人是想要去深入认识源码如何实现的,奈何火候不到,看不出所以然。所以,我也很愿意去分享自己读码的收获,为这些人指引道路。小册中包含了很多源码的分析,我不想直接给你这条鱼,我想要给你获取鱼的方式。


4. 关于Flutter 动画

站在广义的角度,万物的状态都具有运动性。在现实生活中,一个人在跑步,我们感觉在动,是因为在时间变化中,他的位置状态发生了变化。电影的播放,我们感觉在动,是因为在时间变化中,屏幕像素状态发生了变化。一旦属性的变化频率高,我们就会感知到流畅的运动表现。

对于显示设备来说,我们只要按指定的规律高频率地让一个对象的某个属性 进行变化,就可以达到对该属性的动画。比如下面小球的上升,我们能感知到它的运动,只是因为在 1s 内不断让其位置属性变化而已,每个点代表一帧,当一秒可以运动 60 帧,就能感到流畅的动画效果。

可能说到 Flutter 动画 组件,你脑海里会浮现一大堆动画组件,感觉乱七八糟的。为 Flutter 动画组件纷繁复杂,只是因为你浮于世界的表象。就像这绚烂的世界,事物万千,乱花渐欲迷人眼,终也只是由各种元素拼组构成罢了。众多 Flutter 动画组件就相当于基于底层建筑之上的繁华万物,如果你只是为了使用它们,而死记硬背地认识,自然会深陷表象之中,无法窥其奥秘。

本册最主要的目的是为了,让大家了解 Flutter 框架底层是如何让动画运转起来的,从根本上去认知这个世界。最终你会站在世界的顶峰,手握宇宙运行的机制,看着散布于星河中的组件,这就是境界的不同。一切上层的建筑都无法脱离底层运行的机制,对底层的认知贯通之后,上层自然会水到渠成,融会贯通。


4. 本册介绍

本册只要分为三个大部分: (注,第一篇为第 0 章)

这本小册对于不同能力阶段的朋友都比较实用,其中 1~6 章是介绍 动画器 及其周边类的使用,较为基础和重要,适合刚入门的新手品尝。7 ~ 11 章介绍一些 Flutter 动画组件的使用及源码实现,适合中等阶段的朋友品尝。最后 12 ~16 章是框架层动画相关源码的分析,适合老手品尝。


小册内容概述 - 动画器使用篇

前六章主要是围绕 AnimationCurveAnimatable 的使用进行介绍,通一些动画的案例了解 Flutter 中如何处理动画。比如,如何将下面的文字外层的遮罩不断变大:

动画本质上就是状态的不断变更和更新,不通过 Animation 我们依然可以实现一些动画效果。比如使用 Timer 进行周期性任务。


2 ~ 4 章 我们会全面认识 AnimationCurveAnimatable 这三个动画核心类的使用。并且可以让你更直观形象地去看到动画数值变化的过程。比如下面是附加 Curves.bounceOut 运动效果,你就知道,原来它是这样变化的,而不是仅是一个冰冷的单词。

动画控制器有很多开启的方法,通过图形可以更形象认知,比如下面是 reversetrue 时,重复开启时,动画控制器数值变化的情况。通过结合图形,可以让大家对动画的认知更为深刻,华罗庚说过:

数缺形时少直观,
形少数时难入微。
数形结合百般好,
隔离分家万事休。


第 5 章是通过三个案例,练习巩固动画器的对组件的动画。结合具体的案例可以说明一些操作注意细节。

  • 呼吸光晕

  • 点击旋转折返

  • 绽放菜单


第 6 章 通过四个 loading 绘制,练习动画在绘制中的使用。


小册内容概述 - 动画组件篇

Flutter 中内置了很多可以执行动画的组件,比如将装饰进行动画的 DecoratedBoxTransition

透明度动画 AnimatedOpacity

某个组件的属性切换动画 AnimatedSwitcher

两组间之间的切换动画 AnimatedCrossFade

这部分还有很多其他的案例,就不一一列举了,文中并不止与对动画组件的使用,更会带大家一起探索源码的实现,不浮于表层,才能认识到一个更真实的世界。


小册内容概述 - 源码篇

如果你熟悉了前面两个部分,那么对 Flutter 动画使用方面也算炉火纯青了。当然本册并不止于此,还会去分析整个 Flutter 动画体系 的源码,包括 AnimationCurveAnimatable 、以及 Ticker 等。 这部分是本册最核心的知识,如果你一时难以消化,建议先简单了解一下。在之后的开发中多用用动画,随着你对它越来越熟悉,再逐渐去深入了解,这是事物发展的必要过程。

最后一句:由于纯手工码字以及认知的局限性,如果本册内容上有什么错误疑问错别字修改建议,可在小册的评论区指正,或直接联系我进行探讨 ~


5. 最后给小册一个特写:

img