跳至主要內容
JI,XIAOYONG' Blog

JI,XIAOYONG' Blog

Let's make something different!

Flutter 动画分析之 CustomPaint

本文讨论的 Flutter 动画主要限定在:随着每一帧的变化,修改 Flutter Widget 的大小、颜色、位置等属性,使之看起来从一种状态渐变为另外一种状态 这一范围。

根据之前的分析,关于 Flutter 中的 Widget 动画,大体可以分为三大类:

  • 隐式动画,以 ImplicitlyAnimatedWidget 及其子类为代表。特点是当涉及到的属性变化后,这些 Widget 会 自动渐变到新的属性,使用者只能设置动画的 Duration、Tween、Curve 等,而无法主动终止、反向执行动画。

    涉及到的类主要有 TweenAnimationBuilder 以及一系列以 AnimatedFoo 命名的类。

  • 显式动画,以 AnimatedWidget 及其子类为代表,需要配合 AnimationController 使用。特点是 当 AnimationController 的值变化时,Widget 中对应的属性也会随之变化

    涉及到的类主要有 AnimationBuilder/AnimatedWidget 以及一系列 FooTransition 命名的类。

  • 自定义动画,如果上述两种方式还无法满足需求,则可以使用 CustomPaint + CustomPainter + Listenable(比如 AnimationController)实现动画,特点是实现方式灵活,但同时也比上述两者难度高一些。


JI,XIAOYONG...大约 9 分钟
Flutter 动画分析之 AnimatedWidget&ImplicitlyAnimatedWidget

本文讨论的 Flutter 动画主要限定在:随着每一帧的变化,修改 Flutter Widget 的大小、颜色、位置等属性,使之看起来从一种状态渐变为另外一种状态 这一范围。

在之前的文章中,我们将 Flutter 中动画的实现分为 底层实现封装好的 Widget 两大部分,目前已经分析了底层实现的部分:


JI,XIAOYONG...大约 12 分钟
Flutter 动画分析之 Tween&Curve

在上篇文章中,我们分析了 Flutter 中主要由AnimationController控制动画的开始、结束,但是默认情况下其只能产生线性变化的 double 类型的 value,如果想随时间变化,让 Widget 产生 Size、Offset 等属性的变化,亦或者控制这些值变化的速度快慢,这时候就需要用到 Tween 和 Curve 了。


JI,XIAOYONG...大约 6 分钟
Flutter 动画分析之 AnimationController

本文讨论的 Flutter 动画主要限定在:随着每一帧的变化,修改 Flutter Widget 的大小、颜色、位置等属性,使之看起来从一种状态渐变为另外一种状态 这一范围。

Flutter 中关于动画的类有很多,为了便于分析,将其分为两大类:

  • Flutter 框架底层实现动画的各个类,比如 AnimationController、Ticker、Tween、Curve 等
  • 基于底层实现,提供进一步封装的 Flutter 动画相关的 Widget 类,比如 AnimatedWidget、ImplicitlyAnimatedWidget 和他们的子类。

JI,XIAOYONG...大约 9 分钟
Flutter 动画分析之 Hero

Flutter 中的 Hero 动画是指可以在切换页面时自动跨页面实现 Widget 放大缩小、位移的动画,在用户看起来好像是当前页面的 Widget“飞”入到另外一个页面,底层基于 Overlay 实现。

本文对其原理和应用做一简单分析,主要是对官方介绍的理解与分析,感兴趣的可以直接阅读官方文档。

使用


JI,XIAOYONG...大约 14 分钟
Flutter 图片加载方案分析之 power_image

Flutter 默认提供了Image用于从网络、文件等加载图片,并且使用ImageCache统一管理图片缓存,但有时候并不能满足使用需求(比如网络图片没有磁盘缓存,导致每次 ImageCache 清除缓存之后又要从网络下载),所以又出现了flutter_cached_network_imageextended_image等基于 Flutter 原生的解决方案,以及power_image等基于混合开发的解决方案。


JI,XIAOYONG...大约 16 分钟
Flutter 图片加载方案分析之 extended_image

Flutter 默认提供了Image用于从网络、文件等加载图片,并且使用ImageCache统一管理图片缓存,但有时候并不能满足使用需求(比如网络图片没有磁盘缓存,导致每次 ImageCache 清除缓存之后又要从网络下载),所以又出现了flutter_cached_network_imageextended_image等基于 Flutter 原生的解决方案,以及power_image等基于混合开发的解决方案。


JI,XIAOYONG...大约 6 分钟
Flutter 图片加载方案分析之 Image

Flutter 默认提供了Image用于从网络、文件等加载图片,并且使用ImageCache统一管理图片缓存,但有时候并不能满足使用需求(比如网络图片没有磁盘缓存,导致每次 ImageCache 清除缓存之后又要从网络下载),所以又出现了flutter_cached_network_imageextended_image等基于 Flutter 原生的解决方案,以及power_image等基于混合开发的解决方案。


JI,XIAOYONG...大约 13 分钟
Flutter 滑动分析之 NestedScrollView

Flutter 中的 scrollable widget 根据实现方式的不同,可以分为两大类:

  • 基于 RenderBox 的 box protocol 实现的,主要基于 Size 实现布局。常见的有SingleChildScrollView
  • 基于 RenderSliver 的 sliver protocol 实现的,主要基于 SliverGeometry 实现布局。比如 CustomScrollView 及其子类 ListView、GridView 等继承自ScrollView的 Widget,以及基于 CustomScrollView 的 NestedScrollView、基于 Viewport 等的 PageView、TabBarView 等直接对 SliverFillViewport 等进行封装的 Widget。

JI,XIAOYONG...大约 22 分钟
2
3
4
5
...
11