Flutter(十三) 实现动画

最新推荐文章于 2022-11-17 21:56:31 发布
最新推荐文章于 2022-11-17 21:56:31 发布
阅读量521 收藏
点赞数
分类专栏： Flutter开发
原文链接：https://mp.weixin.qq.com/s/xNRTjDApabIXasUGiW160Q
版权

Flutter实现动画

一. 动画API认识

动画其实是我们通过某些方式（比如对象，Animation对象）给Flutter引擎提供不同的值，而Flutter可以根据我们提供的值，给对应的Widget添加顺滑的动画效果。

针对动画这个章节，我打算先理清楚他们的API关系和作用，再来讲解如何利用这些API来实现不同的动画效果。

1.1. Animation

在Flutter中，实现动画的核心类是Animation，Widget可以直接将这些动画合并到自己的build方法中来读取它们的当前值或者监听它们的状态变化。

我们一起来看一下Animation这个类，它是一个抽象类：

  • addListener方法

    • 每当动画的状态值发生变化时，动画都会通知所有通过 addListener 添加的监听器。
    • 通常，一个正在监听动画的state对象会调用自身的setState方法，将自身传入这些监听器的回调函数来通知 widget 系统需要根据新状态值进行重新构建。

  • addStatusListener

    • 当动画的状态发生变化时，会通知所有通过 addStatusListener 添加的监听器。
    • 通常情况下，动画会从 dismissed 状态开始，表示它处于变化区间的开始点。
    • 举例来说，从 0.0 到 1.0 的动画在 dismissed 状态时的值应该是 0.0。
    • 动画进行的下一状态可能是 forward（比如从 0.0 到 1.0）或者 reverse（比如从 1.0 到 0.0）。
    • 最终，如果动画到达其区间的结束点（比如 1.0），则动画会变成 completed 状态。
abstractclass Animation<T> extends Listenable implements ValueListenable<T> {
  const Animation();
  
  // 添加动画监听器
  @override
  void addListener(VoidCallback listener);
  
  // 移除动画监听器
  @override
  void removeListener(VoidCallback listener);
	
  // 添加动画状态监听器
  void addStatusListener(AnimationStatusListener listener);
	
  // 移除动画状态监听器
  void removeStatusListener(AnimationStatusListener listener);
	
  // 获取动画当前状态
  AnimationStatus get status;
	
  // 获取动画当前的值
  @override
  T get value;

1.2. AnimationController

Animation是一个抽象类，并不能用来直接创建对象实现动画的使用。

AnimationController是Animation的一个子类，实现动画通常我们需要创建AnimationController对象。

  • AnimationController会生成一系列的值，默认情况下值是0.0到1.0区间的值；
    除了上面的监听，获取动画的状态、值之外，AnimationController还提供了对动画的控制：

  • forward：向前执行动画

  • reverse：方向播放动画

  • stop：停止动画
    AnimationController的源码：

class AnimationController extends Animation<double>
  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
  AnimationController({
    // 初始化值
    double value,
    // 动画执行的时间
    this.duration,
    // 反向动画执行的时间
    this.reverseDuration,
    // 最小值
    this.lowerBound = 0.0,
    // 最大值
    this.upperBound = 1.0,
    // 刷新率ticker的回调（看下面详细解析）
    @required TickerProvider vsync,
  })
}

AnimationController有一个必传的参数vsync，它是什么呢？

  • 之前我讲过关于Flutter的渲染闭环，Flutter每次渲染一帧画面之前都需要等待一个vsync信号。
  • 这里也是为了监听vsync信号，当Flutter开发的应用程序不再接受同步信号时（比如锁屏或退到后台），那么继续执行动画会消耗性能。
  • 这个时候我们设置了Ticker，就不会再出发动画了。
  • 开发中比较常见的是将SingleTickerProviderStateMixin混入到State的定义中。

1.3. CurvedAnimation

CurvedAnimation也是Animation的一个实现类，它的目的是为了给AnimationController增加动画曲线：

  • CurvedAnimation可以将AnimationController和Curve结合起来，生成一个新的Animation对象
class CurvedAnimation extends Animation<double> with AnimationWithParentMixin<double> {
  CurvedAnimation({
    // 通常传入一个AnimationController
    @requiredthis.parent,
    // Curve类型的对象
    @requiredthis.curve,
    this.reverseCurve,
  });
}

Curve类型的对象的有一些常量Curves（和Color类型有一些Colors是一样的），可以供我们直接使用：

  • 对应值的效果，可以直接查看官网（有对应的gif效果，一目了然）
  • 官网Demo

官方也给出了自己定义Curse的一个示例：

import'dart:math';

class ShakeCurve extends Curve {
  @override
  double transform(double t) => sin(t * pi * 2);
}

1.4. Tween

默认情况下，AnimationController动画生成的值所在区间是0.0到1.0

  • 如果希望使用这个以外的值，或者其他的数据类型，就需要使用Tween

Tween的源码：

  • 源码非常简单，传入两个值即可，可以定义一个范围。
class Tween<T extends dynamic> extends Animatable<T> {
  Tween({ this.begin, this.end });
}

Tween也有一些子类，比如ColorTween、BorderTween，可以针对动画或者边框来设置动画的值。

Tween.animate

要使用Tween对象，需要调用Tween的animate()方法，传入一个Animation对象。

二. 动画案例练习

2.1. 动画的基本使用

我们来完成一个案例：

  • 点击案例后执行一个心跳动画，可以反复执行
  • 再次点击可以暂停和重新开始动画

在这里插入图片描述

class HYHomePage extends StatelessWidget {
  final GlobalKey<_AnimationDemo01State> demo01Key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动画测试"),
      ),
      body: AnimationDemo01(key: demo01Key),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_circle_filled),
        onPressed: () {
          if (!demo01Key.currentState.controller.isAnimating) {
            demo01Key.currentState.controller.forward();
          } else {
            demo01Key.currentState.controller.stop();
          }
        },
      ),
    );
  }
}

class AnimationDemo01 extends StatefulWidget {
  AnimationDemo01({Key key}): super(key: key);

  @override
  _AnimationDemo01State createState() => _AnimationDemo01State();
}

class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    // 1.创建AnimationController
    controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
    // 2.动画添加Curve效果
    animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
    // 3.监听动画
    animation.addListener(() {
      setState(() {});
    });
    // 4.控制动画的翻转
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } elseif (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });
    // 5.设置值的范围
    animation = Tween(begin: 50.0, end: 120.0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.favorite, color: Colors.red, size: animation.value,),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

2.2. AnimatedWidget

在上面的代码中，我们必须监听动画值的改变，并且改变后需要调用setState，这会带来两个问题：

  • 1.执行动画必须包含这部分代码，代码比较冗余
  • 2.调用setState意味着整个State类中的build方法就会被重新build
    如何可以优化上面的操作呢？AnimatedWidget

创建一个Widget继承自AnimatedWidget：

class IconAnimation extends AnimatedWidget {
  IconAnimation(Animation animation): super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    Animation animation = listenable;
    return Icon(Icons.favorite, color: Colors.red, size: animation.value,);
  }
}

修改_AnimationDemo01State中的代码：

class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    // 1.创建AnimationController
    controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
    // 2.动画添加Curve效果
    animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
    // 3.监听动画
    // 4.控制动画的翻转
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } elseif (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });
    // 5.设置值的范围
    animation = Tween(begin: 50.0, end: 120.0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: IconAnimation(animation),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

2.3. AnimatedBuilder

Animated是不是最佳的解决方案呢？

  • 1.我们每次都要新建一个类来继承自AnimatedWidget

  • 2.如果我们的动画Widget有子Widget，那么意味着它的子Widget也会重新build

如何可以优化上面的操作呢？AnimatedBuilder

class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    // 1.创建AnimationController
    controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
    // 2.动画添加Curve效果
    animation = CurvedAnimation(parent: controller, curve: Curves.elasticInOut, reverseCurve: Curves.easeOut);
    // 3.监听动画
    // 4.控制动画的翻转
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } elseif (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });
    // 5.设置值的范围
    animation = Tween(begin: 50.0, end: 120.0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: animation,
        builder: (ctx, child) {
          return Icon(Icons.favorite, color: Colors.red, size: animation.value,);
        },
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

三. 其它动画补充

3.1. 交织动画 stagger_animation

案例说明：

  • 点击floatingActionButton执行动画
  • 动画集合了透明度变化、大小变化、颜色变化、旋转动画等；
  • 我们这里是通过多个Tween生成了多个Animation对象；
import'dart:math';

import'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HYHomePage(),
    );
  }
}

class HYHomePage extends StatelessWidget {
  final GlobalKey<_AnimationDemo01State> demo01Key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("列表测试"),
      ),
      body: AnimationDemo01(key: demo01Key),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_circle_filled),
        onPressed: () {
          demo01Key.currentState.controller.forward();
        },
      ),
    );
  }
}

class AnimationDemo01 extends StatefulWidget {
  AnimationDemo01({Key key}): super(key: key);

  @override
  _AnimationDemo01State createState() => _AnimationDemo01State();
}

class _AnimationDemo01State extends State<AnimationDemo01> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  Animation<Color> colorAnim;
  Animation<double> sizeAnim;
  Animation<double> rotationAnim;

  @override
  void initState() {
    super.initState();

    // 1.创建AnimationController
    controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
    // 2.动画添加Curve效果
    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);
    // 3.监听动画
    animation.addListener(() {
      setState(() {});
    });

    // 4.设置值的变化
    colorAnim = ColorTween(begin: Colors.blue, end: Colors.red).animate(controller);
    sizeAnim = Tween(begin: 0.0, end: 200.0).animate(controller);
    rotationAnim = Tween(begin: 0.0, end: 2*pi).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Opacity(
        opacity: animation.value,
        child: Transform(
          alignment: Alignment.center,
          transform: Matrix4.rotationZ(animation.value),
          child: Container(
            width: sizeAnim.value,
            height: sizeAnim.value,
            color: colorAnim.value,
            alignment: Alignment.center,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

当然，我们可以使用Builder来对代码进行优化

@override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: controller,
        builder: (ctx, child) {
          return Opacity(
            opacity: animation.value,
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.rotationZ(rotationAnim.value),
              child: Container(
                width: sizeAnim.value,
                height: sizeAnim.value,
                color: colorAnim.value,
                alignment: Alignment.center,
              ),
            ),
          );
        },
      ),
    );
  }

3.2. Hero动画

移动端开发会经常遇到类似这样的需求：

  • 点击一个头像，显示头像的大图，并且从原来图像的Rect到大图的Rect
  • 点击一个商品的图片，可以展示商品的大图，并且从原来图像的Rect到大图的Rect

这种跨页面共享的动画被称之为享元动画（Shared Element Transition）

在Flutter中，有一个专门的Widget可以来实现这种动画效果：Hero

实现Hero动画，需要如下步骤：

  1. 在第一个Page1中，定义一个起始的Hero Widget，被称之为source hero，并且绑定一个tag；
  2. 在第二个Page2中，定义一个终点的Hero Widget，被称之为 destination hero，并且绑定相同的tag；
  3. 可以通过Navigator来实现第一个页面Page1到第二个页面Page2的跳转过程；

Flutter会设置Tween来界定Hero从起点到终端的大小和位置，并且在图层上执行动画效果。

首页Page代码：

import'dart:math';

import'package:flutter/material.dart';
import'package:testflutter001/animation/image_detail.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HYHomePage(),
    );
  }
}

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero动画"),
      ),
      body: HYHomeContent(),
    );
  }
}

class HYHomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
        childAspectRatio: 2
      ),
      children: List.generate(20, (index) {
        String imageURL = "https://picsum.photos/id/$index/400/200";
        return GestureDetector(
          onTap: () {
            Navigator.of(context).push(PageRouteBuilder(
              pageBuilder: (ctx, animation, animation2) {
                return FadeTransition(
                  opacity: animation,
                  child: HYImageDetail(imageURL),
                );
              }
            ));
          },
          child: Hero(
            tag: imageURL,
            child: Image.network(imageURL)
          ),
        );
      }),
    );
  }
}

图片展示Page

import'package:flutter/material.dart';

class HYImageDetail extends StatelessWidget {
  finalString imageURL;

  HYImageDetail(this.imageURL);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Hero(
            tag: imageURL,
            child: Image.network(
              this.imageURL,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
          )),
      ),
    );
  }
}
goodswifter
关注
专栏目录
Flutter学习-交织动画
weixin_45376030的博客
11-19 373
import 'package:flutter/material.dart'; import 'animation5_2.dart'; class StaggerRoute extends StatefulWidget { @override _StaggerRouteState createState() => _StaggerRouteState(); } class _S...
Flutter实现的登录动画
08-10
Flutter实现的登录动画
Flutter实现动画
qq_27909209的博客
07-19 817
f
Flutter动画 1 - 实现一个最简单的动画
得不到的永远是骚栋.
05-06 549
简述 动画效果会对提升用户体验有着显著效果,一个漂亮的动画效果会让人眼前一亮,反正就是用这舒服,如果没有动画效果的加持,整个App会显的非常生涩难用.对于Flutter的动画,作为小白的我也是最近才刚刚接触,所以这里就说一下Futter中如何使用动画. 这一篇主要是来说如何在Flutter中实现一个最简单的动画,这里假设你已经对Flutter有一些基本的了解或者有一定的开发经验了. 构建基础 这里我们就以控制 Container组件中 margin 为示例. 首先我们先创建一个StatefulWi..
Flutter交织动画
海阔天空
05-27 226
Flutter交织动画
绘画矩形_Flutter 绘画专题 Path动画 矩形的画线动画
weixin_33049919的博客
01-12 542
优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维，不局限于思维，不局限语言限制，才是编程的最高境界。本文章是一个基础篇，实现的Demo如下：首先在Flutter项目工程中定义一个单文件启动页面，用来方便测试，代码如下：void main() { runApp(MaterialApp( home: RootPage(), ));}RootPage...
flutter RotationTransition实现旋转动画
08-25
在 Flutter 中，AnimationController 是实现动画的核心组件。 下面是一个 AnimationController 的基本使用示例代码： ```dart AnimationController _controller = AnimationController( duration: const Duration...
Flutter进阶之实现动画效果（二）
01-04
在上一篇文章：Flutter进阶—实现动画效果（一）的最后，我们说到需要一个处理程序混乱的概念。在这一篇文章中，我们会引入补间，它是构建动画代码的一个非常简单的概念，主要作用是用面向对象的方法替代之前面向...
flutter 微信语音消息动画
07-19
在本文中，我们将深入探讨如何使用Flutter框架来实现微信风格的语音消息播放动画。Flutter是Google推出的一个开源UI工具包，用于构建高性能、高保真度的原生移动应用程序，适用于Android和iOS平台。微信语音消息动画...
Flutter进阶之实现动画效果（七）
08-27
【标题】：“Flutter进阶之实现动画效果（七）” 【描述】：本文深入探讨了在Flutter中如何为应用程序创建高级动画效果，特别是在处理图表变化时保持语义清晰的策略。 【标签】：“Flutter” “动画” 【正文】：...
Flutter进阶之实现动画效果（一）
01-05
上一篇文章我们了解了Flutter的动画基础，这一篇文章我们就来实现一个图表的动画效果。 首先，我们需要创建一个新项目myapp，然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp(
Flutter_41_交织动画
m0_49349981的博客
08-28 167
why 交织动哈是由多个单个一动画叠加而形成复杂动画 例如：组件变化肯涉及高度、宽度、颜色、透明度、位置等等 需要给每个动画设置时间间隔（Interval） transform(对组件进行矩阵变换) 平移:Transform.translate() 旋转：Transform.rotate() 缩放:Transform.scale() import 'package:flutter/material.dart'; import 'dart:math'; void main() { //下.
【Flutter从入门到实战】⑯Flutter的动画、Animation-以心跳案例、交织动画(多个动画一起)-以矩形旋转变大小、FlutteriOS动画弹出页面效果、Hero动画案例-图片放大展示
慢慢来就很快。
03-30 1582
【Flutter从入门到实战】⑯Flutter的动画、Animation-以心跳案例、交织动画(多个动画一起)-以矩形旋转变大小、FlutteriOS动画弹出页面效果、Hero动画案例-图片放大展示
flutter 动画_手把手教你用Flutter做炫酷动画
weixin_39779975的博客
11-30 560
导读：随着技术的发展，很多网页开发技术都带有动画效果，比如淡入淡出、渐变、变大变小，等等。Flutter中的动画效果可以用酷炫来形容，这也是Flutter的一大特色。现代的应用程序不仅仅需要程序稳定、好用，还需要好看，体验好。那么动画效果是必不可少的。作者：亢少军来源：大数据DT(ID：bigdatadt)01 动画概念动画顾名思义，就是动起来的画面。如果一直持续的动再加上音频那就是我们...
flutter-简单组合动画
WX丶SpongeBob的博客
06-02 584
交织动画，就是多个动画组合。这个只是简单的动画。 import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_video_world/constant/data.dart'; import 'package:flutter_video_world/ui/widgets/heart.dart'; import 'package:flutter_video_world/ui/widgets.
flutter 动画_Flutter开发之动画
weixin_39600823的博客
11-30 140
动画作为产品的重要组成部分，是提升用户体验的重要方式，一个恰当的动画不仅能够缓解用户因为等待而带来的情绪焦躁，还会增加应用的整体用户体验。因此，在应用中增加动画的相关功能，可以增强用户的粘性。动画的原理不管是Android平台还是iOS平台，我们在使用应用时都能看到一些炫酷的动画效果。作为移动应用的重要组成部分，动画是提高用户体验的重要手段，一个恰当的动画，不仅能够缓解用户因为等待而带来的情绪问题...
【flutter 动画汇总】
u011646541的博客
05-28 451
flutter 动画汇总
Flutter 在项目中使用动画(不使用包)
最新发布
会煮咖啡的猫咪
11-17 890
Flutter 在项目中使用动画(不使用包) 前言 动画对于 web 和移动应用程序都非常重要。但是在移动应用程序中不应该使用夸张的动画。简单但是很多动画使你的应用程序更好用。以至于当你点击一个按钮时，一种平滑的感觉或者页面过渡都会影响到你。 正文 1 按下按钮柔软的感觉 class _CustomButtonState extends State<CustomButton>    with SingleTick
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值