在 Flutter 中，有一种动画类型叫 Tween ，它主要是弥补 AnimationController 动画值只能为 double 类型的不足,，所以需要不同类型的变化值，那么就可以使用 Tween 。。结合上篇的 AnimationController 来使用
IntTween
int 类型的动画
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
AnimationController controller;
Animation animation;
Animation<int> intAnim;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);
controller.addListener((){
print("controller=====${controller.value}");
});
controller.addStatusListener((status){
print("status====$status");
});
intAnim = IntTween(begin: 0,end: 200).animate(controller)
..addListener(() {
setState(() {
// the state that has changed here is the animation object’s value
});
})..addStatusListener((status){
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: const Text('首页')),
body: Center(
child: Container(
width: intAnim.value.toDouble(),
height: intAnim.value.toDouble(),
color: Colors.blue,
),
)
);
}
@override
Ticker createTicker(onTick) {
return new Ticker(onTick, debugLabel: 'created by $this');
}
}
ColorTween
颜色渐变动画
Animation<Color> colorAnim = ColorTween(begin: Colors.grey,end: Colors.red).animate(controller)
..addListener(() {
setState(() {
// the state that has changed here is the animation object’s value
});
})..addStatusListener((status){
});
ReverseTween
反转动画
Animation reverseAnim = ReverseTween(IntTween(begin: 0,end: 200)).animate(controller)
..addListener(() {
print("reverse====${reverseAnim.value}");
setState(() {
// the state that has changed here is the animation object’s value
});
})..addStatusListener((status){
});
SizeTween
size类型的动画,如
Animation<Size> sizeAnim = SizeTween(begin: Size(100,100),end: Size(200,200)).animate(controller)
..addListener(() {
print("reverse====${sizeAnim.value}");
setState(() {
// the state that has changed here is the animation object’s value
});
})..addStatusListener((status){
});
SizedBox.fromSize(
child: Container(
color: Colors.red,
),
size: sizeAnim.value,
)
RectTween
Rect 类型动画
rectAnim = RectTween(begin: Rect.fromLTRB(100,100,100,100),end: Rect.fromLTRB(100,100,100,100)).animate(controller)
..addListener(() {
print("reverse====${rectAnim.value}");
setState(() {
// the state that has changed here is the animation object’s value
});
})..addStatusListener((status){
});
StepTween
步数动画，比如做个计时器
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
AnimationController controller;
Animation<int> stepAnim;
int _stepNum = 10;
@override
initState() {
super.initState();
controller = AnimationController(
duration: new Duration(seconds: _stepNum), vsync: this);
controller.addListener((){
print("controller=====${controller.value}");
});
controller.addStatusListener((status){
print("status====$status");
});
stepAnim = StepTween(begin: _stepNum,end: 0).animate(controller)
..addListener(() {
print("stepAnim====${stepAnim.value}");
setState(() {
this._stepNum = stepAnim.value;
});
})..addStatusListener((status){
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: const Text('首页')),
body: Column(
children: <Widget>[
new Text(
stepAnim.value.toString(),
style: new TextStyle(fontSize: 150.0),
),
],
)
);
}
@override
Ticker createTicker(onTick) {
return new Ticker(onTick, debugLabel: 'created by $this');
}
}
ConstantTween
常量值动画
Animation<int> constantAnim = ConstantTween<int>(5).animate(controller)
..addListener(() {
print("stepAnim====${constantAnim.value}");
setState(() {
});
})..addStatusListener((status){
});
