flutter动画中AnimatedWidget的使用
程序员文章站
2022-03-25 08:52:31
...
flutter中通过animatedWidget和AnimatedBuilder两个类可以快速搭建动画:
以下实例为通过animatedwidget实现图片有小到大的动画。
//思路:
/**
* 1 创建animationlogo的widget类 实现其构造函数和build方法(用于指明动画样式和具体动作)
* 2 创建state类 其中initstate函数中通过实例化controller对象和animation类对象指明animation的动画
* 3 在state的build函数中返回实例的animationlogo对象
*/
class TestAnimation2 extends StatefulWidget {
@override
_TestAnimationState createState() {
return _TestAnimationState();
}
}
//创建一个动画类继承自animatedwidget(其中可以通过构造函数传入必要的动画)
class AnimationLogo extends AnimatedWidget {
@override
Widget build(BuildContext context) {
final Animation<double> animation = listenable;
return Center(
child: Container(
margin: new EdgeInsets.symmetric(vertical: 10),
height: animation.value,
width: animation.value,
child: new FlutterLogo(),
),
);
}
AnimationLogo({Key key, Animation<double> animation})
: super(key: key, listenable: animation);
}
class _TestAnimationState extends State<TestAnimation2>
with SingleTickerProviderStateMixin {
//实例animation对象 和必要的控制和状态对象
Animation<double> animation;
AnimationController controller;
AnimationStatus animationStatus;
double animationvalue;
@override
void initState() {
super.initState();
//初始化一个动画控制器 定义好动画的执行时长
controller =
AnimationController(duration: const Duration(seconds: 3), vsync: this);
//初始化一个补间动画 实例化一个补间类动画的实例,明确需要变换的区间大小和作用的controller对象
animation = Tween<double>(begin: 0, end: 300).animate(controller);
//提供方法 为动画添加监听
controller.forward();
}
//重写生命周期的dispose函数 将controller资源回收
@override
void dispose() {
//回收资源
controller.dispose();
super.dispose();
}
//build方法 返回页面的布局widget
@override
Widget build(BuildContext context) {
return AnimationLogo(
animation: animation,
);
}
}