Flutter 中动画的使用

最新推荐文章于 2024-08-24 08:27:49 发布

2401_84121958

最新推荐文章于 2024-08-24 08:27:49 发布

阅读量1k

点赞数 22

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84121958/article/details/137533537

版权

程序员专栏收录该内容

192 篇文章 0 订阅

订阅专栏

本文介绍了Flutter中的动画控制（如Animation、AnimationController和AnimatedBuilder）以及Hero功能的应用，展示了如何实现小图到大图的动画切换，并提到了Android开发的学习资源。作者强调了自主学习和系统化的重要性。

摘要由CSDN通过智能技术生成

: 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: Center(
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(
//手势监听点击
child: Hero(
tag: ‘hero’, //设置共享tag
child: Center(
child: Container(width: 80, height: 80, child: FlutterLogo()),
)),
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (_) => Page2())); //点击后打开第二个页面
},
));
}
}

class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“第二个页面”),
),
body: Hero(
tag: ‘hero’, //设置共享tag
child: Center(
child: Container(width: 320, height: 320, child: FlutterLogo()),
)));
}
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。