Flutter动画性能, 官方flutter基础动画在真机上能跑

2022-06-09  本文已影响0人  仕明同学

前提,有个哥们,目前在做 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<TestDemo> createState() => _TestDemoState();
}

class _TestDemoState extends State<TestDemo> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _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
首先解释下名称

说明安卓的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

上一篇 下一篇

猜你喜欢

热点阅读