Flutter | 通过一个小例子带你认识动画 Animation

首先,我们知道在我们的APP中充斥着各种各样的动画,有的是用 GIF,有的用的 Flare,有的是用的 Lottie...。

而对于 Flutter 原生动画来说,也是非常强大的。

下面就是一个小小的例子:

底部箭头会 「向上移动并且逐渐透明,然后重复该动作」。

关于如何实现,后面再说,先来说一下 Flutter 中的动画基础知识。

动画类型

首先 Flutter 中的动画分为两类:

1.补间动画(Tween)
2.基于物理的动画

其中我们常用的就是补间动画,补间动画的含义,引用「Flutter 中文网」的解释:

“介于两者之间”的简称。在补间动画中,定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。

其实动画就是以一连串的画面组成的,而补间动画就是根据时间来计算如何过渡,然后给我们展示一连串的画面。

Animation

Flutter 中的动画系统基于 「Animation」,「Widgets」 可以直接将这些动画合并到自己的 build 方法中来读取它们的当前值或者监听它们的状态变化,或者可以将其作为的更复杂动画的基础传递给其他 widgets。

Animation 是一个抽象类,它主要的功能就是保存动画的状态和值。

一般用 .addListener 方法来添加一个监听器,在这个监听器里你可以获取当前的状态和值,但是这个监听是只要有动作就会回调,如果只想要监听当前的状态,那么就只需要用 .addStatusListener 方法。

「Animation」 的状态有如下几种:

1.dismissed:一般情况,动画会从这个状态开始
2.forward:运行时可能是这个
3.reverse::运行时也可能是这个
4.completed:完成的时候会变成这个

AnimationController

要创建动画,首先要创建一个 AnimationController。除了Animation本身,AnimationController 还可以用来控制动画。例如让动画正向播放和停止。

那既然首先要创建一个 AnimationController,那就看看它的构造函数,来了解一下如何创建:

AnimationController({
  double value,
  this.duration,
  this.reverseDuration,
  this.debugLabel,
  this.lowerBound = 0.0,
  this.upperBound = 1.0,
  this.animationBehavior = AnimationBehavior.normal,
  @required TickerProvider vsync,
}) : assert(lowerBound != null),
assert(upperBound != null),
assert(upperBound >= lowerBound),
assert(vsync != null),
_direction = _AnimationDirection.forward {
  _ticker = vsync.createTicker(_tick);
  _internalSetValue(value ?? lowerBound);
}

解释一下参数:

1.value:初始化该动画的值
2.duration:持续时间
3.reverseDuration:reverse 动画持续时间
4.debugLabel:一个字符串,用于 Debug
5.lowerBound:下界,该动画可以获得的最小值,以及该动画已取消时候的值,不能为空。6.upperBound:上界,该动画可以获得的最大值,以及该动画已完成时候的值,不能为空。7.animationBehavior:配置禁用动画时[AnimationController]的行为。
8.vsync:当前上下文的 TickerProvider,可以通过 resync 来更改它,不能为空。

其中 vsync 是必须的,在使用动画的类后面加上 with TickerProviderStateMixin 就ok了。

Tween

由于 AnimationController 的默认值是 0 - 1,那么想要设置 0 - 1 以外的值就要用到 Tween,它可以设置 begin 和 end 值,其中常用的是 Tween,但是也有很多特定类型的 Tween:

•ColorTween
•SizeTween
•RectTween
•CurveTween
•...

Tween 本身只是定义了如何在两个值之间插值,如果想要当前具体值,还是需要一个动画的,这里有两种方法来获得当前状态的具体指:

1.evaluate:这种方法适合用于已经写好动画,并且在该动画运行时重新build widget 时比较有效。2.animate:这种方法返回一个 Animation,适用于给一个 Widget使用该 Tween 创建一个新的动画。

实现开始时的效果

首先想一下这个效果:「向上移动并且逐渐透明,然后重复该动作」。

1.向上移动:我们利用 Container 的 margin 属性
2.逐渐透明:套一层 Opacity,利用 opacity 属性即可达到
3.重复动作:判断动画当前状态,然后重新运行

了解需求以后,先来写控件。

由于我们的动画效果还算有一点点复杂,所以我们用 AnimatedWidget 来封装该组件,避免大量重复的 setState。

所以,动画 Widget 代码如下:

class AnimatedUpArrow extends AnimatedWidget {
  final Tween<double> _opacityTween = Tween(begin: 1, end: 0);
  final Tween<double> _marginTween = Tween(begin: 0, end: 50);

  AnimatedUpArrow({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);


  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return SafeArea(
      child: Center(
        child: Opacity(
          opacity: _opacityTween.evaluate(animation),
          child: Container(
            margin: EdgeInsets.only(bottom: _marginTween.evaluate(animation)),
            child: Image.asset("images/UP.png", width: 20, height: 24,),
          ),
        ),
      ),
    );
  }
}

首先创建两个 Tween,由于是两种动画同时执行,所以这里使用 Tween 的 evaluate 方法来通过动画计算插值是最合适的。

代码很简单,然后看一下如何使用这个 Widget:

AnimationController _animationController;
Animation<double> _animation;

@override
void initState() {
  super.initState();
  _animationController = AnimationController(
    vsync: this, duration: Duration(milliseconds: 1400));
  _animation =
    CurvedAnimation(parent: _animationController, curve: Curves.linear);

  _animationController.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      Future.delayed(Duration(milliseconds: 500), () {
        _animationController.reset();
      });
    } else if (status == AnimationStatus.dismissed) {
      _animationController.forward();
    }
  });

  _animationController.forward();
}

@override
Widget build(BuildContext context) {
  return AnimatedUpArrow(
    animation: _animation,
  );
}

简单解释一下:

首先定义 AnimationController,定义了动画持续时间为 1400,

然后定义 Animation,设置控制器为刚才的 controller, curve 为线性,

接着定义 StatusListener,在这里判断了动画是否已经执行完成,如果已经完成,则在500毫秒的延迟之后重置动画,并且继续执行动画,这样就达到了动画重复的效果。

最后在 build 方法中传入设置好的 Animation,这样刚才定义好的 AnimatedWidget 就可以根据这个动画来计算插值做动画了。

这样最上面的动画就做好了。

总结

在 Flutter 很多原生控件中,都使用了 AnimatedWidget,比如 AnimatedPositioned,看一下它的 build 方法:

@override
Widget build(BuildContext context) {
  return Positioned(
    child: widget.child,
    left: _left?.evaluate(animation),
    top: _top?.evaluate(animation),
    right: _right?.evaluate(animation),
    bottom: _bottom?.evaluate(animation),
    width: _width?.evaluate(animation),
    height: _height?.evaluate(animation),
  );

可以看得出来,和我们上面用的一样,都是 evaluate 方法。

其实在 Flutter 当中做动画已经很方便了,起码比 Android 舒服,2333。

推荐5个Flutter重磅开源项目!

大家好,我是hub哥,近年来,随着移动智能设备的快速普及,移动多端统一开发框架已成为一个热门话题。这里为大家整理了5个Flutter优质的开源项目,希望对大家有帮助

发布于:2月以前  |  436次阅读  |  详细内容 »

Flutter在PLUS业务中的探索和实践

2016年京东为向核心客户提供更优质的购物体验,特别推出京东PLUS会员,旨在全方位提升和丰富用户网购体验,目前京东PLUS会员已成为电商行业付费人数最多的会员体系。作为PLUS的前端开发,我们思考最多的就是如何让页面更快更好的呈现在用户面前,如何用技术为用户提供最好的购物体验。

发布于:2月以前  |  369次阅读  |  详细内容 »

首发 | 闲鱼公开多年 Flutter 实践经验

Flutter从诞生到现在,已经成为了跨端开发的领跑者。闲鱼应用在flutter能够以模块形式存在前,进行了很长时间的混合app架构的探索,对原生工程进行较多改动,在官方推出flutter模块模式后,我们进行了大量调研,最终推出了一套开箱即用的混合工程脚手架flutter-boot,帮助大家快速搭建混合工程。

发布于:2月以前  |  372次阅读  |  详细内容 »

打破重重阻碍,Flutter 和 Web 生态如何对接?

Flutter 设计之初是不考虑 Web 生态的,原因很简单:两种技术设计理念不同,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的。今天,阿里无线开发专家门柳就来手把手教如何实现 Flutter 和 Web 生态的对接?

发布于:2月以前  |  372次阅读  |  详细内容 »

一文看完阿里巴巴 AliFlutter 客户端研发体系

Flutter 是开源的 UI 工具包,其能够帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 组件采用现代响应式框架构建,中心思想是用组件 (widget) 构建 UI。淘宝终端技术部无线技术专家王康从 Flutter 的原理出发,介绍了 Flutter 的原理、业内现状,以及阿里巴巴在 Flutter 上所做的深度实践和探索。

发布于:2月以前  |  366次阅读  |  详细内容 »

美团外卖Flutter动态化实践

动态化是 Flutter 无法避开的话题。本文从 Flutter 的特点讲起, 阐述了美团外卖团队在整个 Flutter 动态化上探索的心路历程,还有设计理念、核心原理以及业务应用的经验。本文的视角也不局限于框架本身,更多思考了在解决问题的过程中技术团队需要做的事情,希望能对大家有所启发和帮助。

发布于:2月以前  |  407次阅读  |  详细内容 »

Flutter 上的内存泄漏监控

Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。

发布于:3月以前  |  395次阅读  |  详细内容 »

网易支付-高性能NEJFlutter小程序动态化架构实践

大家好,今天跟大家分享的主题是《NEJFlutter小程序动态化高性能架构》,这是关于网易支付团队在Flutter小程序动态化方向上尝试的一套技术解决方案,一句话介绍NEJFlutter,就是用JavaScript开发业务逻辑、Flutter开发UI布局的小程序架构,性能堪比原生Flutter应用;

发布于:3月以前  |  583次阅读  |  详细内容 »

Flutter卡顿问题的监控与思考

使用Flutter技术构建的应用,一直以高性能高流畅度著称。但是随着应用复杂度越来越高,Flutter会出现一些页面流畅度明显低于Native的情况,甚至可能发生一些卡顿。而很多时候卡顿都发生在线上,即使获得了用户的操作路径,也难以重现。如果我们有一套卡顿监控系统,能够帮助我们捕获到卡顿时的堆栈,那么在发生卡顿的时候,我们就可以定位到具体是哪个函数引起的卡顿,从而解决这些问题。

发布于:3月以前  |  546次阅读  |  详细内容 »

最多阅读

在Flutter中添加资源和图片 1年以前  |  2735次阅读
Flutter的手势GestureDetector分析详解 1年以前  |  2603次阅读
Flutter插件详解及其发布插件 1年以前  |  2313次阅读
发布Flutter开发的iOS程序 1年以前  |  2013次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1699次阅读
使用Inspector检查用户界面 1年以前  |  1691次阅读
Flutter Widget框架概述 1年以前  |  1687次阅读
Flutter 状态管理指南之 Provider 1年以前  |  1685次阅读
Flutter for Web详细介绍 1年以前  |  1524次阅读
JSON和序列化 1年以前  |  1518次阅读
Flutter框架概览 1年以前  |  1493次阅读
为Flutter应用程序添加交互 1年以前  |  1425次阅读
Flutter路由详解 1年以前  |  1420次阅读
使用自定义字体 1年以前  |  1410次阅读
处理文本输入 1年以前  |  1346次阅读
发布Flutter开发的Android程序 1年以前  |  1278次阅读
使用包来开发Flutter应用 1年以前  |  1263次阅读
编写国际化Flutter App 1年以前  |  1240次阅读