先上代码：
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Material(child: ScaleAnimationRoute()),
),
);
}
//需要继承TickerProvider，如果有多个AnimationController，则应该使用TickerProviderStateMixin。
class _ScaleAnimationRouteState extends State<ScaleAnimationRoute> with SingleTickerProviderStateMixin {
Animation<double> animation;
AnimationController controller;
initState() {
super.initState();
controller = new AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
);
//图片宽高从0变到300
animation = new Tween(begin: 0.0, end: 300.0).animate(controller) //tag0
..addListener(() { //tag1
setState(() => {});
});
//启动动画(正向执行)
controller.forward(); //tag2
}
@override
Widget build(BuildContext context) {
return new Center(
child: Image.asset(
"assets/banner1.png",
width: animation.value,
height: animation.value,
),
);
}
dispose() {
//路由销毁时需要释放动画资源
controller.dispose();
super.dispose();
}
}
然后上图：
图片较大请放大看，然后开始分析：
- 从
tag0开始，这步生成了一个Tween，并设置了begin和end两个属性，然后调用animate方法，该方法内部创建了一个_AnimatedEvaluation对象，这是一个Animation实例，然后返回设置给了引用animation，这步操作在_AnimatedEvaluation内部保存了Tween.animate方法传入的参数AnimationController和Tween自身 - 然后看
tag1，该步骤调用了_AnimatedEvaluation的addListener方法，_AnimatedEvaluation是从父类AnimationWithParentMixin继承的该方法，在父类AnimationWithParentMixin里该方法的实现如下：
// keep these next five dartdocs in sync with the dartdocs in Animation<T>
/// Calls the listener every time the value of the animation changes.
///
/// Listeners can be removed with [removeListener].
void addListener(VoidCallback listener) => parent.addListener(listener);
其中parent是Tween.animate这步传入的AnimationController，所以执行的是AnimationController的addListener方法，所以监听的就是原始发送动画数据的类实例，后面不管嵌套多少层动画，原始数据都是从AnimationController这里获取的值，范围是0.0-1.0，然后看一下AnimationController这个类：
class AnimationController extends Animation<double>
with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
...
}
省略不相关代码，只看继承结构，AnimationController的addListener实现在父类AnimationLocalListenersMixin里面，所以tag1这步就把值改变时的监听方法保存到了AnimationController类
- 然后看
tag2，调用AnimationController的forward方法开始动画后，方法内部执行_animateToInternal方法，然后animateToInternal内部执行notifyListeners和_checkStatusChanged遍历值监听和状态监听列表，然后我们的监听方法就被回调了，我们在回调里执行了setState方法刷新界面，然后在_ScaleAnimationRouteState的build方法里调用animation.value获取了变化的值，然后我们分析animation.value这个步骤：
3.1 因为animation是_AnimatedEvaluation的实例，所以我们看这个类的内部value的方法实现，该方法源码如下：
@override
T get value => _evaluatable.evaluate(parent);
其中_evaluatable看tag0这步得知该实例是Tween，parent是AnimationController实例，
然后看Tween的内部方法_evaluatable
/// The current value of this object for the given [Animation].
///
/// This function is implemented by deferring to [transform]. Subclasses that
/// want to provide custom behavior should override [transform], not
/// [evaluate].
///
/// See also:
///
/// * [transform], which is similar but takes a `t` value directly instead of
/// an [Animation].
/// * [animate], which creates an [Animation] out of this object, continually
/// applying [evaluate].
T evaluate(Animation<double> animation) => transform(animation.value);
Tween的evaluate方法内部执行transform(animation.value)，其中animation是AnimationController，AnimationController的animation的value范围是0.0-1.0，transform内部是实际将0.0-1.0转换成了对应的值，也就是页面调用animation(这个是我们的测试代码的animation，是_AnimatedEvaluation实例，不要和transform方法里的搞混).value方法后获得的计算好的值，可以看一下Tween的transform方法
@override
T transform(double t) {
if (t == 0.0)
return begin;
if (t == 1.0)
return end;
return lerp(t);
}
分析完了，这就是整个流程，复杂动画可能会嵌套多个动画效果，但是万变不离其宗，原理都是一样的，图片里的[]实际就是()，但是这个starUML用了小括号后面就不能打字了，所以看的时候不要在这里迷糊就好，有问题请在下面留言，一起学习。
