Flutter动画实现详解

目录

1.Flutter实现的思路  

2.使用绘图还是使用代码来实现动画效果   

3.使用隐式动画还是显示动画来实现

 4.使用哪种Widget     


先上图镇镇楼


1.Flutter实现的思路  

        当我们决定做一些动画的时候,首先要考虑的是在Flutter中实现动画的方式有哪几种以及我们需要选择哪种实现方式才能满足我们的需求。关于这里点,官方的文档也给我们提供了一个思路,如下图所示:

2.使用绘图还是使用代码来实现动画效果   

          基于绘图的动画看起来像是画上去的,比如说是游戏的角色,或者一些纯代码难易表达的动画。如果是必须自己或者是团队要自己绘图实现动画,可以考虑使用Rive或者Lottie等等第三方库,做好动画之后导出来,然后把做好的动画打包到项目的资源文件中加载。如果系统提供的组件能够实现自己需要的效果,我们可以通过编码的方式来实现。

3.使用隐式动画还是显示动画来实现

        如果我们的组件仅仅修改了widget的属性就能满足效果,这种情况下我们可以考虑使用隐形动画。比如说我们要做个渐变,缩放动画,平移动画,只需要改变widget的透明度,缩放比例,位置等属性就可以实现,这个时候隐式动画就是一个好的选择。比如说要实现下面的效果,点击下面的按钮,实现对上面Container空间的缩放,颜色更改,圆角更改等效果,我们仅仅需要改变Container类来实现,这个时候隐式动画就是很不多的选择。我们只需要写好动画前后的初始值,设置好动画的属性即可。

        

               图2.隐式动画

        与隐式动画对应的是Flutter中的显示动画,显示动画除了可以实现隐式动画所能做的一切,还提供了更多的功能,比如说当我们的动画中有循环播放的动画,类似下图中的类似刷新的进度。

        从开始加载的数据的时候一直到数据加载完成之前,这个按钮一直在不停地旋转,比如说重复旋转的图片。或者当我们使用打车软件的时候,打车的过程中显示的连续的水波纹动画,zhe'ge或者是多个Widget协作的方式制作的动画,这种情况下我们就只能选择使用显示动画。

                图3.下拉刷新动画

       

        显示动画多了个AnimationController属性,通过这个属性我们可以更加精确的控制动画的属性,缺点就是我们必须手动的管理AnimationController的声明周期。

 4.使用哪种Widget     

        我们知道Flutter中,万事万物皆Widget,也是一样的。

        决定了使用隐式动画还是显示动画之后,就可以考虑最后一个问题了,系统是否提供了内置的组件可以满足我的要求。隐式动画一般可以使用AnimayetedFoo类来实现,Foo指的是要设置的动画的属性,比如说我们要做个Container从0到1的透明度渐变的动画,可以用AnimatedOpacity来实现。

        如果找不到对应的内置的组件,可以使用TweenAnimationBuilder创建自定义动画。显示动画是以名为Foo Transition的widget来实现,比如说lSideTransition。

      如果系统的显示动画满足不了需求的话,可以使用自定义显示动画,拓展AnimatedWidget或者AnimatedBuilder.当然如果你对性能要求比较高,也可以考虑使用系统的CustomPainter来自己绘制动画。但是如果你对Flutter不是那么熟悉的话,使用这中方式绘制动画可能会导致性能问题。

          这几种动画实现的方式的难易程度如下:

难易程度从左到右(容易---》难)
AnimatedFoo TweenAnimationBuilder FooTransition AnimationBuilder(AnimatedWidget) CustomPainter

         这篇文章只是提供了动画实现的思路以及怎么样选择实现动画的方式,后续的文章会详细的介绍动画的实现方式。

猜你喜欢

转载自blog.csdn.net/ZCC361571217/article/details/129338321