乐趣区

关于flutter:Flutter-实战17篇动画系列文章带你走进自定义动画

老孟导读:Flutter 动画系列文章分为三局部:根底原理和外围概念、零碎动画组件、8 篇自定义动画案例,共 17 篇。

动画外围概念

在开发 App 的过程中,自定义动画必不可少,Flutter 中想要自定义动画,首先要了解 Flutter 动画实现的基本原理及相干概念。

第 1 - 4 篇介绍了 Flutter 动画中最重要的三个概念以及三者之间的关系:

  • AnimationController:动画控制器,管制动画的播放、进行等。继承自 Animation< double >,是一个非凡的 Animation 对象,默认状况下它会线性的生成一个 0.0 到 1.0 的值,类型只能是 double 类型,不设置动画曲线的状况下,能够设置输入的最小值和最大值。
  • Curve:动画曲线,作用和 Android 中的 Interpolator(差值器)相似,负责管制动画变动的速率,艰深地讲就是使动画的成果可能以匀速、减速、加速、抛物线等各种速率变动。
  • Tween:将 AnimationController 生成的 [0,1]值映射成其余属性的值,比方色彩、款式等。

第 5 篇解说了 动画序列 TweenSequence,其将多个 Tween 或者 Curve 关联到一个 AnimationController 中。

文章链接:

  • 动画外围 -AnimationController:http://laomengit.com/guide/animation/AnimationController.html
  • 动画外围 -Tween:http://laomengit.com/guide/animation/Tween.html
  • 动画外围 -Curve:http://laomengit.com/guide/animation/Curve.html
  • 动画外围 - 总结:http://laomengit.com/guide/animation/AnimationSummary.html
  • 动画序列 TweenSequence:http://laomengit.com/guide/animation/TweenSequence.html

零碎动画组件

第 6 篇介绍了 20 多种零碎动画组件的用法以及如何选取应用哪一种组件,乍一看 20 多种零碎动画组件十分多,但其仅分为 隐式动画组件 显式动画组件 两种,用法根本一样。文章地址:http://laomengit.com/guide/animation/AnimatedWidget.html

第 7 篇解说 AnimatedList 列表增 / 删动画组件:http://laomengit.com/guide/animation/AnimatedList.html

第 8 篇解说 Hero 共享动画组件:http://laomengit.com/guide/animation/Hero.html

第 9 篇解说 Material motion 动画,Material motion 是 Flutter 1.17 大会上 Flutter 团队公布的新的 Animations 软件包,该软件包提供了实现新的 Material motion 标准的预构建动画:http://laomengit.com/guide/animation/TranslationAnimations.html

自定义动画

第 10 篇 案例 - 自定义路由动画:http://laomengit.com/guide/animation/NavigatorAnimation.html

第 11 篇 案例 -“孔雀开屏”的动画成果:http://laomengit.com/guide/animation/Peacock.html

第 12 篇 案例 - 自定义突变进度条:http://laomengit.com/guide/animation/CircleProgress.html

第 13 篇 案例 - 自绘玫瑰:http://laomengit.com/guide/animation/Rose.html

第 14 篇 案例 - 仿掘金点赞:http://laomengit.com/guide/animation/JuejinLike.html

第 15 篇 案例 - 酷炫的 3D 成果:http://laomengit.com/guide/animation/3DPerspective.html

第 16 篇 案例 - 涟漪成果:http://laomengit.com/guide/animation/WaterRipple.html

第 17 篇 案例 - 雷达扫描成果:http://laomengit.com/guide/animation/Radar.html

结尾

很多人都感觉 Flutter 动画比拟难,不好入门,很多读者也反馈如何能力自定义动画?上面是我对学习 Flutter 动画的一些办法:

  • 第一步:具体的浏览第 1 - 5 篇,也就是根底概念局部,当然对于初学者来说,浏览完后仍然会迷茫,不了解,没关系,记住即可。
  • 第二步:应用零碎动画组件实现一些简略的动画成果,照猫画虎,不要感觉应用零碎组件没有用途,当你写完 20 多个零碎动画组件的用法的时候,你肯定对动画的认知有极大的晋升。
  • 第三步:在回过头来,认认真真的浏览第 1 - 5 篇,置信我,你肯定会有不一样的感觉。
  • 第四步:动画系列文章中有 8 篇为自定义动画案例,倡议先依据动画成果单独实现,如果没有思路再参考文章。

集体感觉只有通过 多写 能力了解的更加粗浅,纸上得来终觉浅,绝知此事要躬行

Flutter 动画系列曾经全副实现,如果对你有所帮忙,请不要吝惜你的 转发

交换

老孟 Flutter 博客地址(330 个控件用法):http://laomengit.com

欢送退出 Flutter 交换群(微信:laomengit)、关注公众号【老孟 Flutter】:

退出移动版