Flutter Animation动画开发之——AnimationStatusListener动画状态监听
源码分析
在之前的文章中我们介绍过Animation的addListener可以用来监听动画每一帧的变化
而如果要监听动画的状态变化，就要用到Animation的void addStatusListener(AnimationStatusListener listener)方法
addStatusListener方法是定义在AnimationLocalStatusListenersMixin中的，Animation抽象类的实现都有withAnimationLocalStatusListenersMixin，比如AnimationController
class AnimationController extends Animation<double>
with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
}我们再看下withAnimationLocalStatusListenersMixin的源码
-
didRegisterListener()：在添加动画状态监听前调用，该方法需融合withAnimationLocalStatusListenersMixin的类来实现
-
addStatusListener(AnimationStatusListener listener)：添加动画状态监听
-
removeStatusListener(AnimationStatusListener listener)：移除动画状态监听
-
didUnregisterListener()：在移除动画状态监听后调用，该方法需融合withAnimationLocalStatusListenersMixin的类来实现
-
notifyStatusListeners(AnimationStatus status)：动画状态变化的通知，通知所有注册的AnimationStatusListener
/// A mixin that implements the addStatusListener/removeStatusListener protocol
/// and notifies all the registered listeners when notifyStatusListeners is
/// called.
///
/// This mixin requires that the mixing class provide methods [didRegisterListener]
/// and [didUnregisterListener]. Implementations of these methods can be obtained
/// by mixing in another mixin from this library, such as [AnimationLazyListenerMixin].
mixin AnimationLocalStatusListenersMixin {
final ObserverList<AnimationStatusListener> _statusListeners = ObserverList<AnimationStatusListener>();
/// Called immediately before a status listener is added via [addStatusListener].
///
/// At the time this method is called the registered listener is not yet
/// notified by [notifyStatusListeners].
void didRegisterListener();
/// Called immediately after a status listener is removed via [removeStatusListener].
///
/// At the time this method is called the removed listener is no longer
/// notified by [notifyStatusListeners].
void didUnregisterListener();
/// Calls listener every time the status of the animation changes.
///
/// Listeners can be removed with [removeStatusListener].
void addStatusListener(AnimationStatusListener listener) {
didRegisterListener();
_statusListeners.add(listener);
}
/// Stops calling the listener every time the status of the animation changes.
///
/// Listeners can be added with [addStatusListener].
void removeStatusListener(AnimationStatusListener listener) {
final bool removed = _statusListeners.remove(listener);
if (removed) {
didUnregisterListener();
}
}
/// Calls all the status listeners.
///
/// If listeners are added or removed during this function, the modifications
/// will not change which listeners are called during this iteration.
void notifyStatusListeners(AnimationStatus status) {
final List<AnimationStatusListener> localListeners = List<AnimationStatusListener>.from(_statusListeners);
for (AnimationStatusListener listener in localListeners) {
try {
if (_statusListeners.contains(listener))
listener(status);
} catch (exception, stack) {
FlutterError.reportError(FlutterErrorDetails(
exception: exception,
stack: stack,
library: 'animation library',
context: ErrorDescription('while notifying status listeners for $runtimeType'),
informationCollector: () sync* {
yield DiagnosticsProperty<AnimationLocalStatusListenersMixin>(
'The $runtimeType notifying status listeners was',
this,
style: DiagnosticsTreeStyle.errorProperty,
);
},
));
}
}
}
}接下来我们在看下AnimationStatus的源码，AnimationStatus是一个枚举类，共定义了如下几种动画状态
- dismissed：回到动画起点处
- forward：从起点往终点方向执行
- reverse：从终点往起点反方向执行
- completed：到达动画终点处
/// The status of an animation
enum AnimationStatus {
/// The animation is stopped at the beginning
dismissed,
/// The animation is running from beginning to end
forward,
/// The animation is running backwards, from end to beginning
reverse,
/// The animation is stopped at the end
completed,
}示例代码
看完源码分析，接下我我们写一个示例跑一下
一下示例中演示了一个绿色的方块，宽高从100变化到200，由于监听了动画的状态，当动画执行到终点时会反向执行，当反向执行到起点时又会再正向执行，如此循环往复就可以实现无限循环动画（当然，AnimationController.repeat()也可实现动画循环播放）
绿色方块汇总还有两个Text
当动画到达起点时第一个Text显示“起点”，当动画到达终点时第一个Text显示“终点”
当动画往前正向执行时第二个Text显示“正向”，当动画往后反向执行时第二个Text显示“反向”
大家可以直接拷贝如下整段代码运行看下效果
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AnimationRoute(),
);
}
}
class AnimationRoute extends StatefulWidget {
@override
AnimationRouteState createState() => AnimationRouteState();
}
class AnimationRouteState extends State<AnimationRoute> with SingleTickerProviderStateMixin {
AnimationController controller;
String position = '';
String direction = '';
initState() {
super.initState();
// Controller设置动画时长
// vsync设置一个TickerProvider，当前State 混合了SingleTickerProviderStateMixin就是一个TickerProvider
controller = AnimationController(
lowerBound: 100,
upperBound: 200,
duration: Duration(seconds: 5),
vsync: this //
)..addStatusListener((status){
if (status == AnimationStatus.dismissed) {
controller.forward();
setState(() {
position = '起点';
});
} else if (status == AnimationStatus.forward) {
setState(() {
direction = '正向';
});
} else if (status == AnimationStatus.reverse) {
setState(() {
direction = '反向';
});
} else if (status == AnimationStatus.completed) {
controller.reverse();
setState(() {
position = '终点';
});
}
});
//启动动画(正向执行)
controller.forward();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (BuildContext ctx, Widget child) {
return Center(
child: Container(
color: Colors.green,
alignment: Alignment.center,
width: controller.value,
height: controller.value,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(position,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
),
),
Text(direction,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
),
)
],
),
),
);
}
);
}
@override
void dispose() {
// 释放资源
controller.dispose();
super.dispose();
}
}
