先上代码:
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();
}
}
然后上图:
flutter动画代码流程.jpg
图片较大请放大看,然后开始分析:
- 从
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用了小括号后面就不能打字了,所以看的时候不要在这里迷糊就好,有问题请在下面留言,一起学习。
网友评论