如何选择适合您的Flutter Animation Widget?

100 阅读6分钟

本文最初由Emily Fortuna撰写,并已以她的名义发布。

因此,您已经决定在Flutter应用中添加动画-多么令人兴奋!事实是,有很多不同的动画小部件,因此弄清楚哪一个最合适可能会让人不知所措。幸运的是,本文对您有所帮助!

我将逐步解决一系列问题,您可以问自己有关所考虑的动画的问题,以帮助您确定如何创建动画。要记住的另一件事是,Flutter核心库中提供的动画小部件相当低级。这意味着如果您考虑到复杂的动画,建议您检查pub.dev上提供的一些动画包,这些包提供更高级别的界面。

看一下下面的决策树,我将在本文中对其进行解释:

图片发布

囊括您所有动画决策的流程图。

广义上讲,您可能希望在Flutter应用程序中包括两种主要的动画类型:基于图形的动画和基于代码的动画。

基于代码的动画,以小部件为重点,并植根于标准布局和样式基元,例如行,列,颜色或文本样式。这并不是说它们很无聊或简单,而是从本质上讲,它们倾向于增强特定现有小部件的外观或过渡效果,而不是自己充当独立的小部件。

相比之下,基于绘图的动画看起来就像有人在绘制它们。它们通常是独立的Sprite,例如游戏角色,或者涉及纯粹以代码表示很难进行的转换。因此,第一个要问自己的问题是:“我的动画更像是一个图形,还是看起来可以用Flutter小部件基元构建?”如果您的动画更像是绘图,或者您正在与将提供矢量或光栅图像资产的设计团队合作,那么建议您使用第三方工具(例如Rive或Lottie)以图形方式构建动画,然后导出它到颤振。有几个软件包可以帮助您将这些资产包括在Flutter应用中。否则,如果您的动画涉及使小部件发生突变(例如更改颜色,形状或位置),则需要编写一些Flutter代码!

显式还是隐式?

基于Flutter代码的动画有两种形式:隐式和显式动画。下一步是弄清楚您需要哪种类型。

图片发布

值更改时,隐式动画小部件会设置动画。隐式动画只需要简单地为某些窗口小部件属性设置一个新值,Flutter就会将其从当前值动画化为新值。这些小部件易于使用,功能强大。您在上面看到的所有动画都是通过隐式动画小部件完成的。隐式动画是在制作动画时开始的好地方。

显式动画需要AnimationController。之所以称为“显式”,是因为它们仅在明确要求时才开始设置动画。您可以使用显式动画来处理隐式动画,并做更多的事情。烦人的事情是您必须手动管理AnimationController的生命周期,因为它不是小部件,这意味着将其放入有状态小部件中。

因此,如果您可以使用隐式动画小部件,则代码通常会更简单。

有三个问题要问自己,以确定您需要哪种类型的小部件:

  • 我的动画会永远重复吗?“永远”是指当它在某个屏幕上,或者只要某个条件为真,例如音乐播放。

  • 要问自己的第二个问题是动画中的值是否不连续。我所说的不连续动画的一个例子就是这种不断增长的圆形动画。圆圈反复地变大,变小。它永远不会变小变大,然后再次收缩。在这种情况下,圆的大小是不连续的。

图片发布

一个只会增长而不会缩小的圆圈。这是一个不连续的动画!

  • 最后一个要问自己的问题是,是否有多个小部件以协调的方式一起动画?

例如:

图片发布

多个框一起动画。

如果您对这三个问题中的任何一个回答“是”,则需要使用显式小部件。否则,您可以使用隐式小部件!一旦确定需要隐式还是显式小部件,最后一个问题将引导您找到所需的特定小部件。

哪个小部件?

问问自己,是否有满足我需求的内置小部件?如果要查找内置的隐式动画小部件,请查找名为AnimatedFoo的小部件,其中“Foo”是要设置动画的属性,例如AnimatedOpacity。

还要检查AnimatedContainer,因为它是用于许多不同的隐式动画的功能极其强大且用途广泛的小部件。如果找不到所需的内置隐式动画,则可以使用TweenAnimationBuilder创建自定义的隐式动画。相反,如果您正在寻找内置的显式窗口小部件,则它们通常称为FooTransition,其中“

Foo”是您要设置动画的属性,例如SlideTransition。

如果找不到相关的内置显式动画,则您需要问自己一个最后的问题:

我是否希望动画成为独立的小部件或其他周围小部件的一部分?

答案主要取决于口味。如果要使用独立的自定义显式动画,则应扩展AnimatedWidget。

否则,您可以使用AnimatedBuilder。

如果您遇到性能问题,则需要考虑的最后一个选择是使用CustomPainter进行动画处理。您可以像AnimatedWidget一样使用它,但是CustomPainter可以直接绘制到Canvas上,而无需标准的小部件构建范例。如果使用得当,您可以创建一些整洁的,极其自定义的效果或节省性能。

但是,如果滥用,动画可能会导致更多性能问题。因此,要小心,就像手动内存管理一样,请确保在向各处撒满共享指针之前,先知道自己在做什么。

结论

总之,您可以问自己一系列高级问题,以指导如何创建动画。

问题的顺序创建了一个决策树,用于确定哪种小部件或软件包适合您的需求。

如果折叠这些端点,它们将落成一条线,大约表示从左到右的困难。

感谢您的阅读,并继续通过第三方框架或使用包(显式或隐式)创建Flutter动画!

图片发布

动画小部件从最简单的到最难的。