如何基于Flutter实现爱心三连动画效果(flutter,开发技术)

前言

我们开始 Flutter 动画相关篇章之旅，在应用中通过动效能够给用户带来更愉悦的体验，比较典型的例子就是一些直播平台的动效了，比如送火箭能做出来那种火箭发射的动效——感觉倍有面子，当然这是土豪的享受，我等码农只在视频里看过。本篇我们来介绍基于 Animation 类实现的基本动画构建。

Animation 简介

Animation是一个抽象类，它并不参与屏幕的绘制，而是在设定的时间范围内对一段区间值进行插值。插值的方式可以是线性、曲线、一个阶跃函数或其他能够想到的方式。这个类的对象能够知道当前的值和状态（完成或消失）。Animation 类提供了一个监听回调方法，当它的值改变的时候，就会调用该方法：

@overridevoidaddListener(VoidCallbacklistener);

因此，在监听回调里，我们可以来刷新界面，通过Animation对象最新的值控制 UI 组件的位置、尺寸、角度，从而实现动画的效果。Animation类通常会和AnimationController一起使用。

AnimationController 简介

AnimationController是一个特殊的Animation类，它继承自Animation<double>。每当硬件准备好绘制下一帧时，AnimationController就会产生一个新的值。默认情况下AnimationController会在给定的时间范围内产生的值是从0到1.0的线性序列值（通常60个值/秒，以达到60 fps的效果）。例如，下面的代码构建一个时长为2秒的AnimationController。

varcontroller=AnimationController(duration:constDuration(seconds:2),vsync:this);

AnimationController具有forward，reverse等控制动画的方法，通常用于控制动画的开始和恢复。

连接Animation和AnimationController的是Animatable类，该类也是一个抽象类， 常用的的实现类包括Tween<T>（线性插值），CurveTween（曲线插值）。Animatable类有一个animate方法，该方法接收Animation<double>类参数（通常是AnimationController），并返回一个Animation对象。

Animation<T>animate(Animation<double>parent){return_AnimatedEvaluation<T>(parent,this);}

animate方法使用给定的Animation<double>对象驱动完成动效，但使用的值的范围是自身的值，从而可以构建自定义值范围的动效。比如，要构建一个2秒内从0增长100的动效值，可以使用如下的代码。

varcontroller=AnimationController(duration:constDuration(seconds:2),vsync:this);varanimation=Tween<double>(begin:0,end:100).animate(controller);

应用 - 爱心三连

有了上面的基础，我们就可以开始牛刀小试了，我们先来一个爱心三连放大缩小的动效，如下所示，首次点击逐渐放大，再次点击逐渐缩小恢复到原样。

界面代码很简单，三个爱心其实就是使用Stack将三个不同颜色的爱心Icon组件叠加在一起，然后通过Animtion对象的值改变Icon的大小。在Animation值变化的监听回调里使用setState刷新界面就好了。完整代码如下：

import'package:flutter/material.dart';classAnimtionDemoextendsStatefulWidget{constAnimtionDemo({Key?key}):super(key:key);@override_AnimtionDemoStatecreateState()=>_AnimtionDemoState();}class_AnimtionDemoStateextendsState<AnimtionDemo>withSingleTickerProviderStateMixin{lateAnimation<double>animation;lateAnimationControllercontroller;@overridevoidinitState(){super.initState();controller=AnimationController(duration:constDuration(seconds:1),vsync:this);animation=Tween<double>(begin:40,end:100).animate(controller)..addListener((){setState((){});});controller.addStatusListener((status){print(status);});}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text('Animation动画'),),body:Center(child:Stack(alignment:Alignment.center,children:[Icon(Icons.favorite,color:Colors.red[100],size:animation.value*1.5,),Icon(Icons.favorite,color:Colors.red[400],size:animation.value,),Icon(Icons.favorite,color:Colors.red[600],size:animation.value/2,),],),),floatingActionButton:FloatingActionButton(child:Icon(Icons.play_arrow,color:Colors.white),onPressed:(){if(controller.status==AnimationStatus.completed){controller.reverse();}else{controller.forward();}},),);}@overridevoiddispose(){controller.dispose();super.dispose();}}

这里需要提的是在_AnimtionDemoState中混入了SingleTickerProviderStateMixin，这里其实是为AnimationController提供了一个TickerProivder对象。TickerProivder对象会在每一帧刷新前触发一个onTick回调，从而实现AnimationController的值更新。