我想在一个项目中实现这个效果,所以我创建了一个隐式动画小部件,称为AnimatedFlipCounter
,可以实现类似的效果。
我已经将它作为一个包发布了:https://pub.dev/packages/animated_flip_counter
用法:
AnimatedFlipCounter(
duration: Duration(milliseconds: 500),
value: _value, /* pass in a number like 2014 */
)
小数:
AnimatedFlipCounter(
value: _value,
fractionDigits: 2, // decimal precision
suffix: "%",
textStyle: TextStyle(
fontSize: 40,
color: _value >= 0 ? Colors.green : Colors.red,
),
)
class ValueChangeAnimationWidget extends StatefulWidget {
@override
ValueChangeAnimationWidgetState createState() =>
ValueChangeAnimationWidgetState();
}
class ValueChangeAnimationWidgetState
extends State<ValueChangeAnimationWidget> with TickerProviderStateMixin {
AnimationController controller;
Animation animation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
final Animation curve =
CurvedAnimation(parent: controller, curve: Curves.easeOut);
animation = IntTween(begin: 0, end: 10).animate(curve)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
}
if (status == AnimationStatus.dismissed) {
Navigator.pop(context);
}
});
}
@override
Widget build(BuildContext context) {
controller.forward();
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return Scaffold(
body: new Center(
child: Text(animation.value.toString(), style: TextStyle(fontSize: 48.0)),
));
});
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
我使用Tween动画和动画构建器
IntTween(begin: 0, end: starredCount).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut)