Flutter 中动画的使用_flutter启动动画-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_85729556/article/details/139886519

…addListener(() {
// 更新状态
setState(() {});
});
//在启动动画时，使用 repeat(reverse: true)，让动画来回重复执行。
controller.repeat(reverse: true);
// 监听动画状态。在动画结束时，反向执行；在动画反向执行完毕时，重新启动执行。
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//在动画结束时，反向执行
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//在动画反向执行完毕时，重新启动执行
controller.forward();
}
});
// 开始动画
controller.forward();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“基础动画”),
),
body: Center(
child: Container(
width: animation.value,
height: animation.value,
color: Colors.yellow,
),
),
);
}

@override
void dispose() {
// 停止动画
controller.stop();
super.dispose();
}
}

可以看到 animation只提供动画数据，因此我们还需要监听动画执行进度，并在回调中使用 setState 强制刷新界面才能看到动画效果。这些步骤都是固定的，有没有什么更简单的方法吗？

AnimatedWidget 与 AnimatedBuilder

通过这两个widget 可以简化我们的动画步骤。 AnimatedWidget：把对动画的监听放到 AnimatedWidget中，在里面就可以拿到动画的值，进行页面的重绘。

// 通过 AnimatedWidget 来实现动画

class AnimatedWidgetDemo extends AnimatedWidget {
AnimatedWidgetDemo({Key key, Animation animation})
: super(key: key, listenable: animation);

@override
Widget build(BuildContext context) {
final Animation animation = listenable;
return Container(
width: animation.value,
height: animation.value,
color: Colors.red,
);
}
}

class AnimationDemo2 extends StatefulWidget {
@override
State createState() {
return _AnimationDemo2State();
}
}

class _AnimationDemo2State extends State with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;

@override
void initState() {
super.initState();
// 创建 controller
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));

animation = Tween(begin: 50.0, end: 250.0).animate(controller);

//在启动动画时，使用 repeat(reverse: true)，让动画来回重复执行。
controller.repeat(reverse: true);
// 监听动画状态。在动画结束时，反向执行；在动画反向执行完毕时，重新启动执行。
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//在动画结束时，反向执行
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
//在动画反向执行完毕时，重新启动执行
controller.forward();
}
});
// 开始动画
controller.forward();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“AnimatedWidgetDemo”),
),
body: Cente
r(
child: AnimatedWidgetDemo(
animation: animation,
),
),
);
}

@override
void dispose() {
controller.stop();
super.dispose();
}
}

AnimatedBuilder: 将动画和渲染逻辑分开。

class _AnimationDemo3State extends State with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;

@override
void initState() {
super.initState();
// 创建 controller
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));

animation = Tween(begin: 50.0, end: 250.0).animate(controller);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“AnimatedWidgetDemo”),
),
body: AnimatedBuilder(
animation: animation,
builder: (context, child) => Center(
child: Container(
width: animation.value,
height: animation.value,
color: Colors.deepPurple,
),
),
));
}

@override
void dispose() {
controller.stop();
super.dispose();
}
}

可以看到通过AnimatedBuilder，传入 animation ，然后可以在里面的widget 拿到 animation 的值，然后设置相应的属性，更新UI。

通过上面几种方式对比，仅仅是在动画监听做了修改而已，从自己添加 listener 到继承 AnimationWidget 传入animation对象，在里面可以使用到；在到 AnimationBuild ，直接传入animation 对象，字面的子 widget 获取到 animation的属性后，更新UI，基本思路都是差不多。

hero 动画

实现小图到大图页面逐步放大的动画切换效果，而当用户关闭大图时，也实现原路返回的动画。这样的跨页面共享的控件动画效果有一个专门的名词，即“共享元素变换”（Shared Element Transition）。

Flutter 也有类似的概念，即 Hero 控件。通过 Hero，我们可以在两个页面的共享元素之间，做出流畅的页面切换效果。

为了实现共享元素变换，我们需要将这两个组件分别用 Hero 包裹，并同时为它们设置相同的 tag “hero”

class AnimationDemo4 extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“hero动画”),
),
body: GestureDetector(
//手势监听点击