Flutter 中动画的使用(1)

最新推荐文章于 2024-05-13 00:02:46 发布

bfhye16552

最新推荐文章于 2024-05-13 00:02:46 发布

阅读量800

点赞数 24

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

本文链接：https://blog.csdn.net/bfhye16552/article/details/137533526

版权

程序员专栏收录该内容

189 篇文章 0 订阅

订阅专栏

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。