Flutter实现心动的动画特效
作者:艾维码 发布时间:2021-09-03 18:08:01
标签:Flutter,动画,特效
为了追求更好的用户体验,有时候我们需要一个类似心跳一样跳动着的控件来吸引用户的注意力,这是一个小小的优化需求,但是在 Flutter 里动画两件套就像裹脚布一样臭长,所以需要像封装一个 AnimatedWidget,解放生产力。
实现动画
混入 SingleTickerProviderStateMixin
当创建一个 AnimationController 时,需要传递一个vsync
参数,存在vsync
时会防止动画的UI不在当前屏幕时消耗不必要的资源。 通过混入 SingleTickerProviderStateMixin 。
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{}
创建动画
创建一个间隔将近一秒钟的动画控制器:
late final AnimationController animController;
@override
void initState() {
super.initState();
animController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
}
心跳动画是从小变大,再变小,所以需要一个值大小变化的动画:
late final Animation<double> animation;
@override
void initState() {
super.initState();
animController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
animation = Tween<double>(
begin: 0.9,
end: 1.05,
);
}
心跳是不间断的,所以需要监听动画完成时恢复动画,再继续开始动画:
animation = Tween<double>(
begin: 0.9,
end: 1.05,
).animate(animController)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
animController.reverse();
} else if (status == AnimationStatus.dismissed) {
animController.forward();
}
});
使用缩放控件:
Transform.scale(
scale: animation.value,
child: const FlutterLogo(
size: 80,
),
),
为了跳动效果,突出跳动动画,把缩回去的时间改短:
animController = AnimationController(
reverseDuration: const Duration(milliseconds: 700),
duration: const Duration(milliseconds: 800),
vsync: this,
);
最后别忘了释放资源:
@override
void dispose() {
animController.dispose();
super.dispose();
}
抽离成小组件
为了每次用到类似的动画只需引入即可,需要分离动画和显示的组件。新建一个BounceWidget
,包含动画,然后可以传入UI组件:
class BounceWidget extends StatefulWidget {
final Widget child;
const BounceWidget({
Key? key,
required this.child,
}) : super(key: key);
@override
State<BounceWidget> createState() => _BounceWidgetState();
}
继续实现动画:
class _BounceWidgetState extends State<BounceWidget>
with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController animController;
@override
void initState() {
super.initState();
animController = AnimationController(
reverseDuration: const Duration(milliseconds: 700),
duration: const Duration(milliseconds: 800),
vsync: this,
);
animation = Tween<double>(
begin: 0.9,
end: 1.05,
).animate(animController)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
animController.reverse();
} else if (status == AnimationStatus.dismissed) {
animController.forward();
}
});
animController.forward();
}
@override
Widget build(BuildContext context) {
return Transform.scale(
scale: animation.value,
child: widget.child,
);
}
@override
void dispose() {
animController.dispose();
super.dispose();
}
}
去引入动画:
Center(
child: BounceWidget(
child: FlutterLogo(
size: 80,
),
),
完整代码
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.only(top: 80, left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text(
"心动的",
style: TextStyle(
fontSize: 28,
color: Colors.black,
),
),
Text(
"感觉",
style: TextStyle(
fontSize: 48,
color: Colors.black,
),
),
Center(
child: BounceWidget(
child: FlutterLogo(
size: 80,
),
),
),
],
),
),
);
}
}
来源:https://juejin.cn/post/7083418319159722020
0
投稿
猜你喜欢
- 下面程序代码通过使用Lock锁执行简单的流水线任务:import java.util.concurrent.locks.Condition;
- 所以对于应用层用着还不是很方便。最近做一个项目顺便就封装了一个调用默认打印机的类。虽说有几个小bug,但对于目前来说,已经满足需求了。以后不
- 概念里氏替换原则是任何基类出现的地方,子类一定可以替换它;是建立在基于抽象、多态、继承的基础复用的基石,该原则能够保证系统具有良好的拓展性,
- 写在前面:使用springboot作为web框架,方便开发许多,做分布式开发,dubbo又不可少,那么怎么整合在一起呢,跟我学一遍,至少会用
- 实践过程效果代码public partial class Form1 : Form{ public Form1()
- BufferedImage转换为MultipartFileJava里读取图片或调整图片大小可使用BufferedImage进行操作(参考我另
- 本文实例讲述了C#实现翻转字符串的方法。分享给大家供大家参考。具体实现方法如下:Func<string, string> Rev
- 不啰嗦,上菜 QueryWrapper queryWrapper = new QueryWrapper(); queryWrapper.se
- java可以通过Runtime.getRuntime().exec()执行一个操作系统的命令,在操作系统层面执行命令也就创建了一个进程,Ja
- Java事件处理机制和适配器最重要的是理解事件源,监视器,处理事件的接口的概念。1.事件源:是能够产生时间的对象都可以叫事件源,比如文本框,
- 本文实例为大家分享了Java实现部门员工管理的具体代码,供大家参考,具体内容如下项目作业:部门员工管理题目要求:某公司要开发内部的 &
- 题目描述这是 LeetCode 上的 768. 最多能完成排序的块 II ,难度为 困难。Tag : 「贪心」这个问题和&ldquo
- 原理:使用Popup控件,并且设置Popup控件的位置居中。1:新建自定义控件PopupBorder,作为Popup的child。代码如下:
- 上一篇介绍了使用springmvc集成shiro登陆过程,通过FormAuthenticationFilter过滤器获取到用户输入的账号密码
- 用类加载器的5中形式读取.properties文件(这个.properties文件一般放在src的下面)用类加载器进行读取:这里采取先向大家
- 假设我们有一个类:Productpublic class Product{ public string
- 本文实例讲述了Java实现的日期处理类。分享给大家供大家参考,具体如下:开发中常常要使用日期,先小结如下,以备后用。import java.
- 微信小程序与aspnetcore signalr实例本文不对小程序与signalr做任何介绍,默认读者已经掌握aspnetcore Sign
- C#将对象序列化成JSON字符串public string GetJsonString() { List<Product> p
- 本文实例为大家分享了Java 1.8使用数组实现循环队列的具体代码,供大家参考,具体内容如下1、引入使用数组实现循环队列,功能如下:1)is