如何快速提升 Flutter App 中的动画性能

观前提醒:本文假设你已经有一定的 Flutter 开发经验,对Flutter 的 Widget,RenderObject 等概念有所了解,并且知道如何开启 DevTools。

现有一个简单的汽泡动画需要实现,如下图:

一、直接通过 AnimationController 实现

当看到这个效果图的时候,很快啊,啪一下思路就来了。涉及到动画,有状态,用 StatefulWidget ,State 里创建一个 AnimationController,用两个 Container 对应两个圈,外圈的 Container 的宽高监听动画跟着更新就行。
代码如下:

const double size = 56;

class BubbleAnimationByAnimationController extends StatefulWidget {
  @override
  _BubbleAnimationByAnimationControllerState createState() => _BubbleAnimationByAnimationControllerState();
}

class _BubbleAnimationByAnimationControllerState extends State<BubbleAnimationByAnimationController>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..addListener(() => setState(() {}));
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    // 两个 `Container` 对应两个圈
    return Container( 
      alignment: Alignment.center,
      constraints: BoxConstraints.tight(
        Size.square((1 + _controller.value * 0.2) * size),
      ),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue[200],
      ),
      child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
        width: size,
        height: size,
        child: Text(
          'Hello world!',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    );
  }
}

跑起来,很完美的实现了要求,如下图所示:

但且慢,仔细 review 一下代码,有没有发现,内圈的 Container其实和动画并没有什么关系,换句话说,它并不需要跟随动画一起被 build。

用 DevTools 的 Timeline 开启Track Widgets Builds 跟踪一下,如下图所示:

可以发现,在 Build 阶段,BubbleAnimationByAnimationController 因为 setState 引发 rebuild,进而重新 build 了两个 Container,包括内圈里的 Text

解决办法也很简单,把内圈的 Widget 提前构建好,外圈直接用就行了:

class BubbleAnimationByAnimationController extends StatefulWidget {
  final Widget child;
  const BubbleAnimationByAnimationController({this.child});
  @override
  _BubbleAnimationByAnimationControllerState createState() => _BubbleAnimationByAnimationControllerState();
}

class _BubbleAnimationByAnimationControllerState extends State<BubbleAnimationByAnimationController>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..addListener(() => setState(() {}));
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    // 外圈 `Container` 包裹内圈
    return Container( 
      alignment: Alignment.center,
      constraints: BoxConstraints.tight(
        Size.square((1 + _controller.value * 0.2) * size),
      ),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue[200],
      ),
      // 这里的 widget.child 不会 rebuild
      child: widget.child,
    );
  }
}

// 使用时,外部构建内圈的Widget
final Widget buble = BubbleAnimationByAnimationController(
  child: Container(
    alignment: Alignment.center,
    padding: const EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.blue,
    ),
    width: size,
    height: size,
    child: Text(
      'Hello world!',
      style: TextStyle(color: Colors.white, fontSize: 12),
    ),
  ),
);

二、通过 AnimatedBuilder 实现

其实 Flutter 官方提供的AnimatedBuilder就是这么做的,它将不变部分的 child 交由外部构建。

用 AnimatedBuilder 改造代码如下:

class BubbleAnimationByAnimatedBuilder extends StatefulWidget {
  @override
  _BubbleAnimationByAnimatedBuilderState createState() =>
      _BubbleAnimationByAnimatedBuilderState();
}

class _BubbleAnimationByAnimatedBuilderState
    extends State<BubbleAnimationByAnimatedBuilder>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );

    // 注意:这里不需要监听了并setState了,AnimatedBuilder 已经内部这样做了

    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    // 用 AnimatedBuilder 内部监听动画
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Container(
          alignment: Alignment.center,
          constraints: BoxConstraints.tight(
            Size.square((1 + _controller.value * 0.2) * size),
          ),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue[200],
          ),
          child: child, // 这个child 其实就是外部构建好的 内圈 `Container`
        );
      },
      child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
        width: size,
        height: size,
        child: Text(
          'Hello world!',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    );
  }
}

再次跑起来,非常完美。DevTools 的 Timeline 如下图所示:

可以看到,Build 阶段完全没有 rebuild 内圈的内容,只有外圈 Container随着 rebuild。

且慢,还没完呢,还有没有办法完全不 rebuild 呢?毕竟这个动画很简单,内圈完全不变的,只有外圈随时间累加而放大/缩小。这个外圈动画自己画行不行?

三、用 CustomPaint 实现

Flutter 提供了一个Widget 叫 CustomPaint,它只需要我们实现一个 CustomPainter 自己往 Canvas 绘制内容。

先定义一个 CustomPainter,根据动画的值画外圈,代码如下:

class _BubblePainter extends CustomPainter {
  final Animation<double> animation;
  const _BubblePainter(this.animation) : super(repaint: animation);
  @override
  void paint(Canvas canvas, Size size) {
    final center = size.center(Offset.zero);
    // 跟随动画放大/缩小圈的半径
    final radius = center.dx * (1 + animation.value * 0.2);
    final paint = Paint()
      ..color = Colors.blue[200]
      ..isAntiAlias = true;
    canvas.drawCircle(center, radius, paint);
  }

  @override
  bool shouldRepaint(_BubblePainter oldDelegate) {
    return oldDelegate.animation != this.animation;
  }
}

特别注意,父类构造方法的调用不能省super(repaint: animation),后面告诉你为什么。

其它代码跟之前没什么两样,如下:

class BubbleAnimationByCustomPaint extends StatefulWidget {
  @override
  _BubbleAnimationByCustomPaintState createState() =>
      _BubbleAnimationByCustomPaintState();
}

class _BubbleAnimationByCustomPaintState
    extends State<BubbleAnimationByCustomPaint>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );

    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _BubblePainter(_controller),
      // CustomPaint 的大小会自动使用 child 的大小
      child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
        width: size,
        height: size,
        child: Text(
          'Hello world!',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    );
  }
}

跑起来,跟之前版本一样的完美。

你可能好奇了,CustomPaint 怎么会自己动起来呢?其实,秘密就在 CustomPainter 的构造方法里的 repaint 参数。

CustomPaint创建的 RenderObject 对象 RenderCustomPaint 会监听这个 repaint,而该对象是外部传入的 _controller,动画更新触发markNeedsPaint(),进而画面动起来了。可以戳这里看一眼 RenderCustomPaint 源码。

这次 DevTools 的 Timeline 如下图所示,完全没有了 Build 的踪影:

再且慢,还没结束。到这里只是解决了 Build 阶段频繁rebuild 的问题,看上图所示,Paint 阶段似乎还能再挤几滴性能出来?

最后的最后

怎么跟踪查看 repaint 呢,总不至于打log吧?

开启 DevTools 的 Repaint RainBow 选项即可。或者在代码中设置debugRepaintRainbowEnabled = true

在手机画面上立马会看到色块,如果画面上有动画的话更明显,其会随着 paint 的次数增加而变化,像彩虹灯一样。如下图:

可以看到,整个 APP 界面包括头部的 AppBar 的颜色是跟着内部的汽泡一起变的,说明在随着内部动画而发生 repaint

Flutter 提供了一个 RepaintBoundary 用于限制重绘区域,专门用来解决此问题。

使用方式很简单,直接套在CustomPaint外面,代码如下:

@override
Widget build(BuildContext context) {
  return RepaintBoundary(
    child: CustomPaint(
      painter: _BubblePainter(_controller),
      child: Container(...),
    ),
  );
}

效果立杆见影,彩虹图如下图所示,只重绘了动画的区域:

相对应的,Paint 阶段耗时也很明显的降低:

结语

恭喜你,又离资深 Flutter 开发更近了一步。通过本文,你应该学会了如何让 Flutter 动画动得更有效率。


https://mp.weixin.qq.com/s/xSzm4QiaY7UEVvFNocuk8Q

借助 Flutter 顺畅地开发多平台应用

发布于:9天以前  |  53次阅读  |  详细内容 »

基于 Flutter 的 Web 渲染引擎「北海」正式开源

发布于:22天以前  |  122次阅读  |  详细内容 »

如何快速提升 Flutter App 中的动画性能

发布于:26天以前  |  111次阅读  |  详细内容 »

Flutter 使用 Riverpod+Retrofit 构建 MVVM 开发模式

发布于:26天以前  |  109次阅读  |  详细内容 »

使用 Flutter 加速应用开发

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

深入分析 Flutter 渲染性能

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

深入分析 Flutter 渲染性能

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

Flutter 不是真正的跨平台框架

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

Flutter 2 来了!

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

Flutter Worker —— 闲鱼这样实现“逻辑跨平台”

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

针对 Web,移动端和桌面端构建的下一代 Flutter

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

使用 flutter_driver 进行集成测试

单元测试可以确保应用的各个部分正常工作,但如何确保整个应用正常工作呢?这就需要用到集成测试了。

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

详解:Flutter内存泄漏解决方案

众所周知,内存的高低是评判一款app的性能优劣的重要的指标之一。如何更简单的帮助开发者分析、暴露且解决内存泄漏问题,几乎是每一个平台或框架、开发者亟需的一个的"标配"的feature。但是对于flutter社区,缺少一款用得顺手的内存泄漏工具。 对于使用flutter而言,因使用dart语言,通过形成渲染树提交到c++的skia进行渲染,从dart层到c++层拥有很长的渲染链路,使用者必须对整个渲染链路有通盘深刻的理解,才能深刻此时此刻的内存使用情况。本文提出一种基于渲染树个数的方式寻找内存泄漏的解决方案。

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

开始使用 Flutter 构建 Windows 桌面应用吧!

我们的使命是为开发者提供一个开源的高效框架,帮助他们在任何平台上构建美观的原生应用。截至目前,我们已经为 Android 和 iOS 带来了生产级别的支持,发布了 8 个稳定版本,仅在 Google Play 商店中就有超过 10 万款应用使用 Flutter。我们在继续努力,将支持范围扩展至 web、macOS 和 Linux 等其他平台。如今,Flutter 的另一个目标,即支持 Windows 的 Flutter Alpha 版本已经发布。

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

如何有效定位Flutter内存问题?

内存水位升高导致的稳定性问题严重影响app用户体验,所以开发者们非常关注Flutter的内存表现。随着Flutter业务越来越多,闲鱼也面临着oom导致的crash率提升的问题,下面我们结合项目中实际遇到的内存问题和解决思路跟大家分享下flutter内存优化的经验。

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

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

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

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

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

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

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

京东技术中台Flutter实践之路(二)

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

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

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

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

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

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

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

最多阅读

Flutter的手势GestureDetector分析详解 1年以前  |  4356次阅读
Flutter插件详解及其发布插件 1年以前  |  3755次阅读
在Flutter中添加资源和图片 2年以前  |  3540次阅读
发布Flutter开发的iOS程序 2年以前  |  2782次阅读
Flutter 状态管理指南之 Provider 1年以前  |  2500次阅读
在Flutter中发起HTTP网络请求 2年以前  |  2451次阅读
使用Inspector检查用户界面 2年以前  |  2367次阅读
Flutter for Web详细介绍 1年以前  |  2362次阅读
Flutter Widget框架概述 2年以前  |  2202次阅读
Flutter框架概览 2年以前  |  2043次阅读
JSON和序列化 2年以前  |  2033次阅读
为Flutter应用程序添加交互 2年以前  |  2032次阅读
Flutter路由详解 1年以前  |  1977次阅读
使用自定义字体 2年以前  |  1889次阅读
处理文本输入 2年以前  |  1886次阅读
编写国际化Flutter App 2年以前  |  1829次阅读
发布Flutter开发的Android程序 2年以前  |  1813次阅读
使用包来开发Flutter应用 2年以前  |  1805次阅读