class TweenAnim extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return TweenAnimA();
}
}
class TweenAnimA extends State<TweenAnim> with SingleTickerProviderStateMixin {
AnimationController controller;
//doubler类型动画
Animation<double> doubleAnimation;
//颜色动画
Animation<Color> colorAnimation;
//位置动画
Animation<Offset> offsetAnimation;
//圆角动画
Animation<BorderRadius> radiusAnimation;
//装饰动画
Animation<Decoration> decorationAnimation;
//字体动画
Animation<TextStyle> textStyleAnimation;
@override
void initState() {
// TODO: implement initState
super.initState();
//创建AnimationController
controller = new AnimationController(
vsync: this, duration: Duration(milliseconds: 2000));
//animation第一种创建方式:
doubleAnimation = new Tween<double>(begin: 0.0, end: 200.0).animate(controller)
..addListener(() {
setState(() {});
})
..addStatusListener((AnimationStatus status) {
//执行完成后反向执行
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向执行完成,正向执行
controller.forward();
}
});
//animation第二种创建方式:
offsetAnimation = controller.drive(
Tween<Offset>(begin: Offset(0.0, 0.0),end: Offset(400.0, 200.0))
);
colorAnimation = ColorTween(begin: Colors.yellow,end: Colors.red).animate(controller);
radiusAnimation = BorderRadiusTween(begin: BorderRadius.circular(0),end: BorderRadius.circular(50)).animate(controller);
decorationAnimation = DecorationTween(begin: BoxDecoration(color: Colors.purple,borderRadius: BorderRadius.circular(0),),
end: BoxDecoration(color: Colors.lightBlueAccent,borderRadius: BorderRadius.circular(40))).animate(controller);
textStyleAnimation = TextStyleTween(begin: TextStyle(color: Colors.black,fontSize: 20,fontWeight: FontWeight.w100),
end: TextStyle(color: Colors.purple,fontSize: 30,fontWeight: FontWeight.w700)).animate(controller);
//启动动画
controller.forward();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Tween动画"),),
body: Container(
alignment: Alignment.center,
child: ListView(
children: <Widget>[
SizedBox(
height: 200,
child: Container(
height: doubleAnimation.value,
width: doubleAnimation.value,
child: FlutterLogo(),
),
),
Container(
margin: EdgeInsets.only(left: offsetAnimation.value.dx),
width: 50,
height: 50,
color: Colors.green,
),
Container(
height: 50,
width: 50,
color: colorAnimation.value,
),
SizedBox(height: 10,),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(borderRadius: radiusAnimation.value,color: Colors.blue),
),
Container(
height: 60,
width: 200,
decoration: decorationAnimation.value,
),
Container(
height: 50,
child: Text("Tween",style: textStyleAnimation.value,),
),
],
),
)
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
controller.dispose();
}
}
网友评论