写点什么

Flutter 实现爱心三连动画效果

作者:岛上码农
  • 2022 年 7 月 09 日
  • 本文字数:2372 字

    阅读完需:约 8 分钟

Flutter 实现爱心三连动画效果

前言

我们开始 Flutter 动画相关篇章之旅,在应用中通过动效能够给用户带来更愉悦的体验,比较典型的例子就是一些直播平台的动效了,比如送火箭能做出来那种火箭发射的动效——感觉倍有面子,当然这是土豪的享受,我等码农只在视频里看过😂😂😂。本篇我们来介绍基于 Animation 类实现的基本动画构建。

Animation 简介

Animation 是一个抽象类,它并不参与屏幕的绘制,而是在设定的事件范围内对一段区间值进行插值。插值的方式可以是线性、曲线、一个阶跃函数或其他能够想到的方式。这个类的对象能够知道当前的值和状态(完成或消失)。Animation 类提供了一个监听回调方法,当它的值改变的时候,就会调用该方法:


@overridevoid 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 具有 forwardreverse等控制动画的方法,通常用于控制动画的开始和恢复。​


连接 AnimationAnimationController 的是 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的值更新。

总结

本篇介绍了 Flutter 动画构建类 AnimationAnimationController 的使用,通过这两个类可以实现很多基础动画效果,例如常见的进度条、缩放、旋转、移动等。接下来我们还将介绍基于 Animation 实现动画的其他方式和其他类型的动画效果。


话说,都看到这里了,是不是也给本码农来个爱心三连


发布于: 刚刚阅读数: 3
用户头像

岛上码农

关注

用代码连接孤岛,公众号@岛上码农 2022.03.03 加入

从南漂到北,从北漂到南的业余码农

评论

发布
暂无评论
Flutter 实现爱心三连动画效果_flutter_岛上码农_InfoQ写作社区