Flutter Component动画的显和隐最佳实践

目录
  • 动画选择决策树
  • Implicit Animations——隐式动画
    • 基本使用
    • 使用场景
    • TweenAnimationBuilder
  • Explicit Animations——显示动画
    • 基本使用
    • AnimatedWidget
    • AnimatedBuilder

动画选择决策树

Flutter中包含大量的动画组件和自定义动画方式,所以,在合适的场景下选择合适的动画实现方式就成了决定代码质量好坏的一个重要因素。

Flutter中的动画从广义上来讲可以分为两类,一类是基于绘制的动画(Drawing-based animations),另一类是基于代码的动画(Code-based animations)。

下面这个决策树,是Flutter动画选择的总纲,这里梳理了不同的动画的作用场景和功能,我们来看下它具体的实现。

首先,我们需要区分是使用CustomPainter,或者是使用Lottie、Flare这种第三方库,这一类的动画很容易区分——如果你第一感觉,这个动画我做不了,那它大概率就是了。

接下来,就是区分是使用「显示动画」还是「隐式动画」。

简单的说,它们的区别如下:

  • 隐式动画:不用循环播放、不用随时中断、不用多个动画协同,它实现的是一种状态到另一种状态的改变
  • 显示动画:需要自己控制动画过程

最后,就是看现有组件是否满足需求,如果不行,那么就需要自定义相应的动画。

这就是整个动画决策树的执行过程。它们的开发难度,如下所示。

下面我们就具体来分析下不同的动画实现。本文首先介绍显示动画和隐式动画。

Implicit Animations——隐式动画

在Flutter中,很多常用组件都有其自带的隐式动画版本,例如下图所示的这些组件。

这些组件在Flutter中被称之为隐式动画Widget,下面以AnimatedContainer为例,来看下Implicit Animations的使用。

隐式动画有一个特点,那就是它们都是以「Animated」开头。

基本使用

AnimatedContainer的使用非常简单,甚至和普通的Container没有太大的区别,代码如下所示。

AnimatedContainer(
  margin: EdgeInsets.only(top: 20),
  width: size,
  height: size,
  decoration: BoxDecoration(
    color: color,
    borderRadius: BorderRadius.circular(radius),
  ),
  curve: Curves.easeIn,
  duration: Duration(milliseconds: 300),
),

当通过setState函数改变AnimatedContainer中的属性时,AnimatedContainer会经过一段动画效果,然后再完成相应的改变。在隐式动画中,你依然可以定义Curve和Duration等参数,但是你无法控制动画,即动画的执行和结束,是由属性改变来驱动的。

使用场景

Implicit Animations可以非常方便的使Widget具有动画效果而不需要写很多额外的动画代码,结合FutureBuilder或者StreamBuilder,甚至不用写setState,下面这个例子就演示了如何将Implicit Animations和FutureBuilder结合起来使用,代码如下所示。

FutureBuilder(
  future: future,
  builder: (context, snapshot) {
    var width = .0;
    switch (snapshot.connectionState) {
      case ConnectionState.none:
      case ConnectionState.waiting:
      case ConnectionState.active:
        width = .0;
        break;
      case ConnectionState.done:
        width = 100.0;
        break;
    }
    return AnimatedContainer(
      width: width,
      duration: Duration(seconds: 1),
      curve: Curves.easeIn,
      child: Image.asset('images/logo.png'),
    );
  },
),

通过FutureBuilder的各种状态回调,就可以设置不同的Widget,并在FutureBuilder完成并显示正常的Widget时,产生一个动画效果,而不是非常生硬的出现。

TweenAnimationBuilder

TweenAnimationBuilder是自定义隐式动画的方式,借助它,你可以给一个指定的Widget作用一个动画效果,一个简单的示例代码如下所示。

TweenAnimationBuilder(
  tween: Tween<double>(begin: 0, end: 48),
  onEnd: (){}
  duration: Duration(seconds: 1),
  builder: (BuildContext context, double size, Widget child) {
    return IconButton(
      iconSize: size,
      color: Colors.blue,
      icon: child,
    );
  },
  child: Icon(Icons.aspect_ratio),
)

借助TweenAnimationBuilder,就可以将一个指定的Tween作用于builder中的Widget,builder中的第二个参数,就是Tween所指定的参数的类型,通过TweenAnimationBuilder,就可以在Widget参数变化的时候产生动画效果。

TweenAnimationBuilder的builder中如果有不变的Child Widget,可以放在TweenAnimationBuilder的child属性中,因为builder在产生动画时会重建,所有不变的Widget,都可以放在TweenAnimationBuilder的child中,再通过builder的第三个参数来传递这个Widget,以避免重建。

通常我们在开发中,会借助Transform来完成动画效果,在builder中,根据Tween返回的数值,使用不同的Transform来修改动画状态。

TweenAnimationBuilder中的begin,只在第一次使用,后面更新时,只看end的值,例如10-30,修改end为50,实际变化是30-50。如果不传begin,那么默认和end相等。

Explicit Animations——显示动画

与隐式动画不同,显示动画给了开发者对动画过程的完全掌控,开发者可以根据自己的需要来控制动画,Flutter中内置了很多显示动画,如下所示。

显示动画也有一个很明显的特点,那就是它们都以「Transition」结尾。

基本使用

以RotationTransition为例,下面来演示下如何使用Flutter中的显示动画。

显示动画是通过AnimationController来进行驱动的,所以,使用显示动画的第一步,就是需要创建AnimationController。有了AnimationController之后,就可以通过控制AnimationController的状态来控制动画的驱动过程,整个代码如下所示。

AnimationController controller;
@override
void initState() {
  super.initState();
  controller = AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat();
}
@override
void dispose() {
  controller.dispose();
  super.dispose();
}
@override
Widget build(BuildContext context) {
  return Center(
    child: GestureDetector(
      onTap: () {
        if (controller.isAnimating) {
          controller.stop();
        } else {
          controller.repeat();
        }
      },
      child: RotationTransition(
        turns: controller,
        child: FlutterLogo(
          size: 100,
        ),
      ),
    ),
  );
}

与隐式动画相比,显式动画通过AnimationController来获取动画的行进状态和参数,从而让调用者能够控制动画的行进过程。

显式动画可以实现隐式动画的所有功能,但是比隐式动画多了管理动画生命周期的工作

当Flutter内置显示动画不能满足开发者的需求时,Flutter提供了AnimatedBuilder和AnimatedWidget来让开发者对显示动画进行自定义。

AnimatedWidget

前面提到的都是Flutter中使用动画的最基本方式,但实际上,Flutter提供了很多关于动画的封装组件,可以让开发者更加方便的使用动画,这就是AnimatedWidget。AnimatedWidget也有很多实现类,如图所示。

AnimatedWidget是实现自定义显示动画的另一种方式,它可以将一些动画的逻辑以Widget的形式封装起来,从而让build函数中的代码逻辑更加清晰,下面是AnimatedWidget的示例代码。

@override
Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      AnimWidget(animation: controller),
      Center(child: FlutterLogo(size: 100)),
    ],
  );
}
class AnimWidget extends AnimatedWidget {
  const AnimWidget({
    Key? key,
    required Animation<double> animation,
  }) : super(key: key, listenable: animation);
  @override
  Widget build(BuildContext context) {
    Animation<double> animation = listenable as Animation<double>;
    return Container(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: const [Colors.red, Colors.transparent],
          stops: [0, animation.value],
        ),
      ),
    );
  }
}

那么这种方式和之前直接使用AnimationController和Tween有什么区别呢?细心的读者可能已经发现了,AnimatedWidget不需要自己去监听动画的回调,也不需要通过setState来刷新动画,这些操作,AnimatedWidget已经封装好了,这就是AnimatedWidget的作用。

AnimatedBuilder

AnimatedBuilder是一个特殊的AnimatedWidget,它可以直接指定一个动画作用于Widget上,而不需要重新创建一个自定义的AnimatedWidget,它可以帮助开发者处理动画的监听,当一个Widget Tree中有一些需要动画的Widget,也有一些不需要动画的Widget时,用AnimatedBuilder可以很方便的避免非动画Widget的重绘,所以说,AnimatedBuilder可以更加方便的给一个Widget增加动画效果。

AnimatedBuilder与其它的显示动画一样,也是通过AnimationController驱动的,借助AnimatedBuilder,开发者可以根据需要,自己创建Animation并控制它,下面的代码演示了如何通过控制RadialGradient的stop属性来控制RadialGradient的显示大小,从而形成动画效果,代码如下所示。

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: controller,
    builder: (context, widget) {
      return Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: RadialGradient(
                colors: [Colors.red, Colors.transparent],
                stops: [0, controller.value],
              ),
            ),
          ),
          Center(child: FlutterLogo(size: 100))
        ],
      );
    },
  );
}

上面的代码演示了如何使用AnimatedBuilder,实际上非常简单,与使用内置的显示动画的过程基本一致。

在使用AnimatedBuilder的过程中,需要尽可能多的将需要动画的部分和不需要动画的部分区分开来,这样可以避免多余的重绘,从而提高动画性能,例如上面的代码,可以将FlutterLogo和Stack放置在最外层,这样只需要让RadialGradient产生动画就可以了,代码如下所示。

@override
Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      AnimatedBuilder(
        animation: controller,
        builder: (context, widget) {
          return Container(
            decoration: BoxDecoration(
              gradient: RadialGradient(
                colors: [Colors.red, Colors.transparent],
                stops: [0, controller.value],
              ),
            ),
          );
        },
      ),
      Center(child: FlutterLogo(size: 100))
    ],
  );
}

AnimatedBuilder接收了一个animation,在child中,可以直接使用这个animation的值,其它都和普通的AnimatedWidget类似。

实际上,AnimatedBuilder就是AnimatedWidget的子类,所以在本质上,这两种实现自定义显示动画的方式想相同的,开发者可以根据自己的喜好来选择相应的方式来创建自己的显示动画。

AnimateWidget负责组件的抽离,可以看出组件中杂糅了动画逻辑。而AnimatedBuilder恰好相反,它不在意组件是什么,只是将动画抽离达到复用简单。

Flutter中的显示动画和隐式动画,几乎可以解决大部分我们平时在开发中遇到的动画场景,借助动画选择决策树,我们可以对动画的选择了如指掌,剩下的工作,就是对动画进行拆解,分而治之。

以上就是Flutter Component动画的显和隐最佳实践的详细内容,更多关于Flutter Component动画显隐的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter 自定义Drawer 滑出位置的大小实例代码详解

    Flutter开发过程中,Drawer控件的使用频率也是比较高的,其实有过移动端开发经验的人来说,Flutter中的Drawer控件就相当于ios开发或者Android开发中的"抽屉"效果,从侧边栏滑出导航菜单.对于Flutter中的Drawer控件的常规用法就不多介绍,网上大把的教程. 那么本篇博文分享一个网上教程不多的一个知识点,那就是自定义Drawer的滑出位置的大小,自定义Drawer滑出位置就需要修改一个double的widthPercent属性,widthPercent一般

  • Flutter使用Android原生播放器详解

    接上篇:播放器-IOS(Swift)篇 安卓端原生播放器的接入思路与ios基本一致,所以本篇就不废话了,直接上代码: 创建插件VideoViewPlugin实现FlutterPlugin: package io.flutter.plugins.videoplayer; import android.util.Log; import androidx.annotation.NonNull; import io.flutter.embedding.engine.plugins.FlutterPlug

  • Flutter高级玩法Flow位置自定义

    目录 前言 第一幕.开场-演员入台 1. 展示舞台 2. Flow出场 3. FlowDelegate出场 4. paintChildren方法和FlowPaintingContext对象 第二幕.排兵布阵 1. paintChild与Matrix4 2. Flow布局的封装 3. 圆形的Flow布局 第三幕.当Flow遇到Animation 1.圆形布局 + 旋转 2.圆形布局 + 偏移 前言 Flow布局是一个超级强大的布局,但应该很少有人用,因为入手的门槛还是有的 Flow的属性很简单,只

  • Flutter学习之Navigator的高级用法分享

    目录 简介 named routes 给named route传参数 从Screen返回值 向Screen传值 总结 简介 上篇文章我们讲到了flutter中navigator的基本用法,我们可以使用它的push和pop方法来进行Router之间的跳转. 在flutter中一个Router就是一个widget,但是在Android中,一个Router就是Activity,在IOS中,一个Router是一个ViewController. Router除了之前讲过的push和pop方法之外,还有一些

  • flutter 微信聊天输入框功能实现

    目录 chat_bottom.dart chat_element_other.dart chat_element_self.dart chat_input_box.dart page_chat_person.dart provider_chat_content.dart 高仿微信聊天输入框,效果图如下(目前都是静态展示,服务还没开始开发): 大家如果观察仔细的话 应该会发现,他输入框下面的高度 刚好就是 软键盘的高度:所以在这里就需要监听软键盘的高度.还要配置 resizeToAvoidBott

  • 使用Flutter定位包获取地理位置

    目录 Flutter 中获取地理位置 先决条件 使用 Flutter 定位包 设置 位置权限 获取当前位置 使用 Flutter 地理编码包 设置 获取地址 常见的陷阱 结论 Flutter 中获取地理位置 如今,发现用户位置是移动应用程序非常常见且功能强大的用例.如果您曾经尝试过在 Android 中实现位置,您就会知道样例代码会变得多么复杂和混乱. 但这与 Flutter 不同--它有很多令人惊叹的包,可以为您抽象出样板代码,并使实现地理定位成为梦想.另一个好的方面是您可以在 Android

  • Flutter Component动画的显和隐最佳实践

    目录 动画选择决策树 Implicit Animations——隐式动画 基本使用 使用场景 TweenAnimationBuilder Explicit Animations——显示动画 基本使用 AnimatedWidget AnimatedBuilder 动画选择决策树 Flutter中包含大量的动画组件和自定义动画方式,所以,在合适的场景下选择合适的动画实现方式就成了决定代码质量好坏的一个重要因素. Flutter中的动画从广义上来讲可以分为两类,一类是基于绘制的动画(Drawing-b

  • ADO.NET 的最佳实践技巧

    这是我很早以前看过的微软的一篇文章,最近,一些网友问的问题很多理论都在里面,所以,整理一下放在这里,大家可以参考一下. 简介 本文为您提供了在 Microsoft ADO.NET 应用程序中实现和获得最佳性能.可伸缩性以及功能的最佳解决方案:同时也讲述了使用 ADO.NET 中可用对象的最佳实践:并提出一些有助于优化 ADO.NET 应用程序设计的建议. 本文包含: • 有关 .NET 框架包含的 .NET 框架数据提供程序的信息. • DataSet 和 DataReader 之间的比较,以及

  • Vue.js最佳实践(五招助你成为vuejs大师)

    本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写. 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.

  • 详解React 代码共享最佳实践方式

    任何一个项目发展到一定复杂性的时候,必然会面临逻辑复用的问题.在React中实现逻辑复用通常有以下几种方式:Mixin.高阶组件(HOC).修饰器(decorator).Render Props.Hook.本文主要就以上几种方式的优缺点作分析,帮助开发者针对业务场景作出更适合的方式. Mixin 这或许是刚从Vue转向React的开发者第一个能够想到的方法.Mixin一直被广泛用于各种面向对象的语言中,其作用是为单继承语言创造一种类似多重继承的效果.虽然现在React已将其放弃中,但Mixin的

  • ASP.NET Core文件压缩常见使用误区(最佳实践)

    前言 在微软官方文档中,未明确指出文件压缩功能的使用误区. 本文将对 ASP.NET Core 文件响应压缩的常见使用误区做出说明. 误区1:未使用Brotil 压缩 几乎不需要任何额外的代价,Brotil 压缩算法可以帮助你的网站提升约 20% 静态资源加载性能. 同时启用 Gzip / Brotil 压缩 Gzip 有更好的 user-agent 兼容性,而 Brotli 有更好的性能. 所以我们通常需要在 ASP.NET Core 网站中同时启用这两种压缩. 如何区分 Gzip 压缩和 B

  • vue2.0 keep-alive最佳实践

    vue2.0 keep-alive的最佳实践,供大家参考,具体内容如下 1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- 组件将被缓存 --> </component> </keep-alive> 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的 在使用keep-alive的情况下 <keep-al

  • 基于AngularJS前端云组件最佳实践

    AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

  • Javascript模块化编程(一)模块的写法最佳实践

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂.  网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块&

  • webpack配置的最佳实践分享

    本文主要介绍了关于webpack配置的最佳实践,本文分享的实践具有以下的优势: 使用happypack提升打包速度. 使用MD5 hash可以生成文件版本,进行版本控制 在非单页面的系统中支持多个入口的配置 模板中可以利用htmlplugin输出一些配置性的信息 支持devserver,支持本地json数据的mock 一.webpack最佳实践中的需求 1.热加载 2.语法校验 3.js打包 4.模板打包 二.解决方案 1.webpack.config.json var path = requi

  • Java日志API管理最佳实践详解

    概述 对于现在的应用程序来说,日志的重要性是不言而喻的.很难想象没有任何日志记录功能的应用程序运行在生产环境中.日志所能提供的功能是多种多样的,包括记录程序运行时产生的错误信息.状态信息.调试信息和执行时间信息等.在生产环境中,日志是查找问题来源的重要依据.应用程序运行时的产生的各种信息,都应该通过日志 API 来进行记录. 很多开发人员习惯于使用 System.out.println.System.err.println 以及异常对象的 printStrackTrace 方法来输出相关信息.这

随机推荐