基于Flutter实现爱心三连动画效果
作者:岛上码农 时间:2023-09-02 03:38:36
前言
我们开始 Flutter 动画相关篇章之旅,在应用中通过动效能够给用户带来更愉悦的体验,比较典型的例子就是一些直播平台的动效了,比如送火箭能做出来那种火箭发射的动效——感觉倍有面子,当然这是土豪的享受,我等码农只在视频里看过。本篇我们来介绍基于 Animation 类实现的基本动画构建。
Animation 简介
Animation
是一个抽象类,它并不参与屏幕的绘制,而是在设定的时间范围内对一段区间值进行插值。插值的方式可以是线性、曲线、一个阶跃函数或其他能够想到的方式。这个类的对象能够知道当前的值和状态(完成或消失)。Animation 类提供了一个监听回调方法,当它的值改变的时候,就会调用该方法:
@override
void addListener(VoidCallback listener);
因此,在监听回调里,我们可以来刷新界面,通过Animation
对象最新的值控制 UI 组件的位置、尺寸、角度,从而实现动画的效果。Animation
类通常会和 AnimationController
一起使用。
AnimationController 简介
AnimationController
是一个特殊的 Animation
类,它继承自 Animation<double>
。每当硬件准备好绘制下一帧时,AnimationController
就会产生一个新的值。默认情况下 AnimationController
会在给定的时间范围内产生的值是从0到1.0的线性序列值(通常60个值/秒,以达到60 fps的效果)。例如,下面的代码构建一个时长为2秒的 AnimationController
。
var controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
AnimationController
具有 forward
,reverse
等控制动画的方法,通常用于控制动画的开始和恢复。
连接 Animation
和 AnimationController
的是 Animatable
类,该类也是一个抽象类, 常用的的实现类包括 Tween<T>
(线性插值),CurveTween
(曲线插值)。Animatable
类有一个 animate
方法,该方法接收 Animation<double>
类参数(通常是 AnimationController
),并返回一个 Animation
对象。
Animation<T> animate(Animation<double> parent) {
return _AnimatedEvaluation<T>(parent, this);
}
animate
方法使用给定的 Animation<double>
对象驱动完成动效,但使用的值的范围是自身的值,从而可以构建自定义值范围的动效。比如,要构建一个2秒内从0增长100的动效值,可以使用如下的代码。
var controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
var animation = Tween<double>(begin: 0, end: 100).animate(controller);
应用 - 爱心三连
有了上面的基础,我们就可以开始牛刀小试了,我们先来一个爱心三连放大缩小的动效,如下所示,首次点击逐渐放大,再次点击逐渐缩小恢复到原样。
界面代码很简单,三个爱心其实就是使用Stack
将三个不同颜色的爱心 Icon
组件叠加在一起,然后通过 Animtion
对象的值改变 Icon
的大小。在 Animation
值变化的监听回调里使用 setState
刷新界面就好了。完整代码如下:
import 'package:flutter/material.dart';
class AnimtionDemo extends StatefulWidget {
const AnimtionDemo({Key? key}) : super(key: key);
@override
_AnimtionDemoState createState() => _AnimtionDemoState();
}
class _AnimtionDemoState extends State<AnimtionDemo>
with SingleTickerProviderStateMixin {
late Animation<double> animation;
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 1), vsync: this);
animation = Tween<double>(begin: 40, end: 100).animate(controller)
..addListener(() {
setState(() {});
});
controller.addStatusListener((status) {
print(status);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animation 动画'),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
Icon(
Icons.favorite,
color: Colors.red[100],
size: animation.value * 1.5,
),
Icon(
Icons.favorite,
color: Colors.red[400],
size: animation.value,
),
Icon(
Icons.favorite,
color: Colors.red[600],
size: animation.value / 2,
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.play_arrow, color: Colors.white),
onPressed: () {
if (controller.status == AnimationStatus.completed) {
controller.reverse();
} else {
controller.forward();
}
},
),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
}
这里需要提的是在_AnimtionDemoState
中混入了SingleTickerProviderStateMixin
,这里其实是为 AnimationController
提供了一个 TickerProivder
对象。TickerProivder
对象会在每一帧刷新前触发一个 onTick
回调,从而实现AnimationController
的值更新。
来源:https://mp.weixin.qq.com/s/mXlzBh0OoLvgHIFYt-kASg
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
c#打包文件解压缩的实例
![](https://img.aspxhome.com/file/2023/2/89792_0s.jpg)
关于工厂方法模式的Java实现
spring mvc实现文件上传与下载功能
javaweb Servlet开发总结(一)
![](https://img.aspxhome.com/file/2023/0/65610_0s.jpg)
深入理解Android中的建造者模式
![](https://img.aspxhome.com/file/2023/7/139217_0s.jpg)
使用vscode搭建javaweb项目的详细步骤
![](https://img.aspxhome.com/file/2023/1/119101_0s.png)
android 仿微信demo——注册功能实现(服务端)
![](https://img.aspxhome.com/file/2023/8/114328_0s.png)
ehcache模糊批量移除缓存的方法
Struts2配置文件中使用通配符的方法(三种形式)
JAVA读取文件夹大小的几种方法实例
关于MyBatis模糊查询的几种实现方式
springboot验证码生成以及验证功能举例详解
![](https://img.aspxhome.com/file/2023/5/87195_0s.png)
C#实现会移动的文字效果
![](https://img.aspxhome.com/file/2023/5/111225_0s.jpg)
c#通用登录模块分享
C#多线程异步执行和跨线程访问控件Helper
Android APK应用安装原理解析之AndroidManifest使用PackageParser.parserPackage原理分析
![](https://img.aspxhome.com/file/2023/9/111699_0s.jpg)
深入理解Java并发编程之ThreadLocal
![](https://img.aspxhome.com/file/2023/8/59018_0s.jpg)
java 排序算法之快速排序
![](https://img.aspxhome.com/file/2023/4/69314_0s.png)
C#编程获取资源文件中图片的方法
Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)
![](https://img.aspxhome.com/file/2023/1/93261_0s.gif)