Flutter动画性能， 官方flutter基础动画在真机上能跑到20-30%CPU

前提，有个哥们，目前在做 ios flutter的，我也在做flutter App，他向我反馈一个问题

image.png

image.png

这是他提的 ：https://github.com/flutter/flutter/issues/102020
用的是这个官方动画效果
（https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html）

这是测试代码

import 'package:flutter/material.dart';

class TestDemo extends StatefulWidget {
  const TestDemo({Key? key}) : super(key: key);

  @override
  State createState() => _TestDemoState();
}

class _TestDemoState extends State with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.fastOutSlowIn,
  );

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animation'),
      ),
      body: Column(
        children: [
          _buildAniCircle(),
          _buildAniCircle(),
          _buildAniCircle(),
          const Text('no rebuild'),
          // _buildAniCircle(),
        ],
      ),
    );
  }

  _buildAniCircle() {
    return ScaleTransition(
      scale: _animation,
      child: _buildAni(),
    );
  }

  _buildAni() {
    return const Padding(
      padding: EdgeInsets.all(8.0),
      child: FlutterLogo(size: 150.0),
    );
  }
}

运行起来的效果 如下：就是在一个Column 中放置了3个的动画

image.png

这是 ios手机上占用CPU

image.png

那么这些代码在安卓手机的表现情况如何？

1、查看CPU占用率的命令 adb shell top

目前测试App在前台，运行中的CPU的情况

image.png

首先解释下名称

• PR就是优先级，厂商自定义，系统的应用的优先级会高一些
• CPU占用率表示交换机在某个时间点的运行任务情况。A任务占用10ms，B任务占用30ms，然后空闲60ms，再又是A任务占10ms，B任务占30ms，空闲60ms。如果在一段时间内都是如此，那么这段时间内的占用率为40%。CPU占用率越高，说明交换机在这个时间上运行了很多任务，反之则很少。CPU使用率其实就是你运行的程序占用的CPU资源，表示你的机器在某个时间点的运行程序的情况。使用率越高，说明你的机器在这个时间上运行了很多程序，反之较少。使用率的高低与你的CPU强弱有直接关系。

说明安卓的flutter的动画的Demo的占有率达到了 80%，感觉有点恐怖呀

打开App的时候 CPU的使用率 ，当App在做网络请求的时候，占用率会更加的高

image.png

这是打开百度翻译的APP CPU占有率

image.png

记不记得这个图片，电脑的CPU使用率，如果它的占用大于了60%，你就会发现电脑的风扇在拼命的转，而且电脑会运行过慢

image.png

但是手机好像没有像电脑那么严重，使用起来也没有那么卡，这个和手机的固件设计有关系

这是另外一个小伙伴的公司的App内存的占用情况

image.png

最后说明

CPU使用率是性能测试是一项重要指标，CPU占用过高会使得设备运行程序出现卡顿与发热，甚至出现应用程序Crash,影响用户体验。在排除硬件环境的限制下，应用程序应该尽可能少的占用CPU。
一个Demo，3个动画的CPU使用率达到了80%，如果用java or kotlin 去实现应该不会有那么高的占有率，所以Flutter的还需要继续的优化。

(App性能测试—CPU使用率):https://cloud.tencent.com/developer/article/1858070