基于Flutter实现爱心三连动画效果

更新时间：2022年03月24日 09:53:12 作者：岛上码农

Animation是一个抽象类，它并不参与屏幕的绘制，而是在设定的时间范围内对一段区间值进行插值。本文将利用Animation制作一个爱心三连动画效果，感兴趣的可以学习一下

前言

我们开始 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的值更新。

总结

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

到此这篇关于基于Flutter实现爱心三连动画效果的文章就介绍到这了,更多相关Flutter爱心三连动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Android UI 中的 ListView列表控件的示例
本篇文章主要介绍了Android UI 中的 ListView列表控件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
Android 模仿QQ侧滑删除ListView功能示例
这篇文章主要介绍了Android 模仿QQ侧滑删除ListView功能示例,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
Android 实现桌面未读角标
本文主要介绍了Android实现桌面未读角标的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
Kotlin开发中与if等价的takeIf与takeUnless详解
这篇文章主要介绍了Kotlin开发中与if等价的takeIf与takeUnless使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01
Android HttpURLConnection.getResponseCode()错误解决方法
在使用HttpURLConnection.getResponseCode()的时候直接报错是IOException错误，一直想不明白，同一个程序我调用了两次，结果有一个链接一直OK，另一个却一直报这个错误
2013-06-06
Android实现顶部弧形背景效果
在当今移动互联网应用中,界面设计的美观与交互体验往往成为用户评价一款产品的重要因素之一,本文将详细介绍如何在 Android 应用中实现顶部弧形背景效果,通过自定义 View、绘制原理和动画特效等多种技术手段,打造出既美观又具有较好扩展性的界面背景效果
2025-04-04
Android图片识别应用详解
这篇文章主要为大家详细介绍了Android图片识别的应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
Flutter实现webview与原生组件组合滑动的示例代码
这篇文章主要介绍了Flutter实现webview与原生组件组合滑动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
Flutter开发之路由与导航的实现
这篇文章主要介绍了Flutter开发之路由与导航的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
轻松实现Rxjava定时器功能
这篇文章主要为大家详细介绍了Rxjava实现定时器功能的两种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-06-06