鸿蒙（HarmonyOS）性能优化实战-应用程序动效能力实践

最新推荐文章于 2024-09-04 11:58:32 发布
最新推荐文章于 2024-09-04 11:58:32 发布
阅读量832 收藏 23
点赞数 26
分类专栏： HarmonyOS 移动开发 OpenHarmony 文章标签： harmonyos 鸿蒙开发 性能优化 鸿蒙系统 OpenHarmony
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniuT/article/details/138189290
版权
移动开发 同时被 3 个专栏收录
956 篇文章 9 订阅
订阅专栏
HarmonyOS
871 篇文章 13 订阅
订阅专栏
OpenHarmony
695 篇文章 17 订阅
订阅专栏

概述

本文介绍如何在开发应用程序时合理地使用动效，来获得更好的性能。主要通过减少布局和属性的变更频次，避免冗余刷新，从而降低性能开销。
基于上述考虑，提供四种较为推荐的动效实现方式：

  • 组件转场动画使用transition
  • 组件布局改动时使用图形变换属性动画
  • 动画参数相同时使用同一个animateTo
  • 多次animateTo时统一更新状态变量

合理使用动效

组件转场动画使用transition

在实现组件出现和消失的动画效果时，通常有两种方式：

  • 使用组件动画（animateTo），并在在动画结束回调中增加逻辑处理。
  • 直接使用转场动画（transition）。

animateTo需要在动画前后做两次属性更新，而transition只需做一次条件改变更新，性能更好。此外，使用transition，可以避免在结束回调中做复杂逻辑处理，开发实现更容易。因此，推荐优先使用transition。

反例：通过改变透明度属性，从1到0进行隐藏，并在动画结束回调中控制组件的消失。

@Entry
@Component
struct MyComponent {
  @State mOpacity: number = 1;
  @State show: boolean = true;
  count: number = 0;
  
  build() {
    Column() {
      Row() {
        if (this.show) {
          Text('value')
            .opacity(this.mOpacity)
        }
      }
      .width('100%')
      .height(100)
      .justifyContent(FlexAlign.Center)
      Text('toggle state')
        .onClick(() => {
          this.count++;
          const thisCount: number = this.count;
          this.show = true;
          // 通过改变透明度属性，对Text控件做隐藏或出现的动画
          animateTo({ duration: 1000, onFinish: () => {
            // 在最后一个动画中，先让Text控件隐藏，再改变条件让Text控件消失
            if (thisCount === this.count && this.mOpacity === 0) {
              this.show = false;
            }
          } }, () => {
            this.mOpacity = this.mOpacity === 1 ? 0 : 1;
          })
        })
    }
  }
}

正例：直接使用转场动画，实现Text控件透明度的出现与消失。

@Entry
@Component
struct MyComponent {
  @State show: boolean = true;
  
  build() {
    Column() {
      Row() {
        if (this.show) {
          Text('value')
            // 设置id，使转场可打断
            .id('myText')
            .transition(TransitionEffect.OPACITY.animation({ duration: 1000 }))
        }
      }.width('100%')
      .height(100)
      .justifyContent(FlexAlign.Center)
      Text('toggle state')
        .onClick(() => {
          // 通过transition，做透明度的出现或消失动画
          this.show = !this.show;
        })
    }
  }
}

组件布局改动时使用图形变换属性动画

改动组件的布局显示有两种方式：

  • 改动布局属性。当布局属性发生改变时，界面将重新布局。常见的布局属性有width、height、layoutWeight等。
  • 改动图形变换属性。图形变换是对组件布局结果的变换操作，如平移、旋转、缩放等操作。

界面布局是非常耗时的操作，而当图形变换属性发生变化时，并不会重新触发布局。因此，优先推荐使用图形变换属性来实现组件布局的改动。接下来，采用上述两种方式分别对组件实现放大10倍的效果。

反例：通过设置布局属性width和height，改变组件大小。

@Entry
@Component
struct MyComponent {
  @State textWidth: number = 10;
  @State textHeight: number = 10;

  build() {
    Column() {
      Text()
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(20)
        .width(this.textWidth)
        .height(this.textHeight)

      Button('布局属性')
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(20)
        .margin({ top: 30 })
        .borderRadius(30)
        .padding(10)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.textWidth = 100;
            this.textHeight = 100;
          })
        })
    }
}
}

在对组件位置或大小变化做动画时，由于布局属性的改变会触发重新测量布局，导致性能开销大。scale属性的改变不会重新触发测量布局，性能开销小。因此，在组件位置大小持续发生变化的场景，如手指缩放的动画场景，推荐使用scale。

正例：通过设置图形变换属性scale，改变组件大小。

@Entry
@Component
struct MyComponent {
  @State textScaleX: number = 1;
  @State textScaleY: number = 1;

  build() {
    Column() {
      Text()
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(20)
        .width(10)
        .height(10)
        .scale({ x: this.textScaleX, y: this.textScaleY })
        .margin({ top: 100 })

      Button('图形变换属性')
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(20)
        .margin({ top: 60 })
        .borderRadius(30)
        .padding(10)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.textScaleX = 10;
            this.textScaleY = 10;
          })
        })
    }
}
}

动画参数相同时使用同一个animateTo

每次animateTo都需要进行动画前后的对比，因此，减少animateTo的使用次数（例如使用同一个animateTo设置组件属性），可以减少该组件更新的次数，从而获得更好的性能。
如果各个属性要做动画的参数相同，推荐将它们放到同一个动画闭包中执行。

反例：相同动画参数的状态变量更新放在不同的动画闭包中。

@Entry
@Component
struct MyComponent {
  @State textWidth: number = 200;
  @State color: Color = Color.Red;
  
  func1() {
    animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
      this.textWidth = (this.textWidth === 100 ? 200 : 100);
    });
  }
  
  func2() {
    animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
      this.color = (this.color === Color.Yellow ? Color.Red : Color.Yellow);
    });
  }
  
  build() {
    Column() {
      Row()
        .width(this.textWidth)
        .height(10)
        .backgroundColor(this.color)
      Text('click')
        .onClick(() => {
          this.func1();
          this.func2();
        })
    }
    .width('100%')
    .height('100%')
  }
}

正例：将相同动画参数的动画合并在一个动画闭包中。

@Entry
@Component
struct MyComponent {
  @State textWidth: number = 200;
  @State color: Color = Color.Red;
  
  func() {
    animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
      this.textWidth = (this.textWidth === 100 ? 200 : 100);
      this.color = (this.color === Color.Yellow ? Color.Red : Color.Yellow);
    });
  }
  
  build() {
    Column() {
      Row()
        .width(this.textWidth)
        .height(10)
        .backgroundColor(this.color)
      Text('click')
        .onClick(() => {
          this.func();
        })
    }
    .width('100%')
    .height('100%')
  }
}

多次animateTo时统一更新状态变量

animateTo会将执行动画闭包前后的状态进行对比，对差异部分进行动画。为了对比，会在执行animateTo的动画闭包之前，将所有变更的状态变量和脏节点都刷新。
如果多个animateTo之间存在状态更新，会导致执行下一个animateTo之前又存在需要更新的脏节点，可能造成冗余更新。

反例：多个animateTo之间更新状态变量。

以下代码在两个animateTo之间更新组件的其他状态。

@Entry
@Component
struct MyComponent {
  @State textWidth: number = 200;
  @State textHeight: number = 50;
  @State color: Color = Color.Red;
  
  build() {
    Column() {
      Row()
        .width(this.textWidth)
        .height(10)
        .backgroundColor(this.color)
      Text('click')
        .height(this.textHeight)
        .onClick(() => {
          this.textWidth = 100;
          // textHeight是非动画属性
          this.textHeight = 100;
          animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
            this.textWidth = 200;
          });
          this.color = Color.Yellow;
          animateTo({ curve: Curve.Linear, duration: 2000 }, () => {
            this.color = Color.Red;
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

在第一个animateTo前，重新设置了textWidth属性，所以Row组件需要更新一次。在第一个animateTo的动画闭包中，改变了textWidth属性，所以Row组件又需要更新一次并对比产生宽高动画。第二个animateTo前，重新设置了color属性，所以Row组件又需要更新一次。在第二个animateTo的动画闭包中，改变了color属性，所以Row组件再更新一次并产生了背景色动画。Row组件总共更新了4次属性。
此外还更改了与动画无关的状态textHeight，如果不需要改变无关状态，则不应改变造成冗余更新。

正例：统一更新状态变量。

正例1：在animateTo之前使用原始状态，让动画从原始状态过渡到指定状态，这样也能避免动画在开始时发生跳变。

@Entry
@Component
struct MyComponent {
  @State textWidth: number = 100;
  @State textHeight: number = 50;
  @State color: Color = Color.Yellow;
  
  build() {
    Column() {
      Row()
        .width(this.textWidth)
        .height(10)
        .backgroundColor(this.color)
      Text('click')
        .height(this.textHeight)
        .onClick(() => {
          animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
            this.textWidth = (this.textWidth === 100 ? 200 : 100);
          });
          animateTo({ curve: Curve.Linear, duration: 2000 }, () => {
            this.color = (this.color === Color.Yellow ? Color.Red : Color.Yellow);
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

在第一个animateTo之前，不存在需要更新的脏状态变量和脏节点，无需更新。在第一个animateTo的动画闭包中，改变了textWidth属性，所以Row组件需要更新一次并对比产生宽高动画。在第二个animateTo之前，由于也没有执行额外的语句，不存在需要更新的脏状态变量和脏节点，无需更新。在第二个animateTo的动画闭包中，改变了color属性，所以Row组件再更新一次并产生了背景色动画。Row组件总共更新了2次属性。

正例2：在animateTo之前显式的指定所有需要动画的属性初值，统一更新到节点中，然后再做动画。

@Entry
@Component
struct MyComponent {
  @State textWidth: number = 200;
  @State textHeight: number = 50;
  @State color: Color = Color.Red;
  
  build() {
    Column() {
      Row()
        .width(this.textWidth)
        .height(10)
        .backgroundColor(this.color)
      Text('click')
        .height(this.textHeight)
        .onClick(() => {
          this.textWidth = 100;
          this.color = Color.Yellow;
          animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
            this.textWidth = 200;
          });
          animateTo({ curve: Curve.Linear, duration: 2000 }, () => {
            this.color = Color.Red;
          });
          this.textHeight = 100;
        })
    }
    .width('100%')
    .height('100%')
  }
}

在第一个animateTo之前，重新设置了textWidth和color属性，所以Row需要更新一次。在第一个animateTo的动画闭包中，改变了textWidth属性，所以Row组件需要更新一次并对比产生宽高动画。在第二个animateTo之前，由于没有执行额外的语句，不存在需要更新的脏状态变量和脏节点，无需更新。在第二个animateTo的动画闭包中，改变了color属性，所以Row组件再更新一次并产生了背景色动画。Row组件总共更新了3次属性。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

OpenHarmony_小贾
关注
  • 26
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现简单的动画效果的编程过程
2301_79326930的博客
09-28 79
通过定义关键帧动画和使用适当的CSS属性，我们可以创建各种各样的动画效果。当然，这只是动画实现的一种方法，还有其他更多的技术和工具可供选择，具体取决于你的需求和偏好。在JavaScript中，我们可以通过创建一个新的HTML元素，并将其添加到文档中来实现。的关键帧动画，该动画在0%、50%和100%的关键帧位置上分别设置了容器元素的左偏移量，从而实现了一个简单的左右移动的动画效果。最后，我们可以将上述代码保存为一个HTML文件，并在浏览器中打开该文件，即可看到简单的动画效果。如有任何疑问，请随时提问。
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5022
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
OpenHarmony实战开发-应用程序动效能力实践。
2401_82546228的博客
04-23 1071
本文介绍如何在开发应用程序时合理地使用动效，来获得更好的性能。主要通过减少布局和属性的变更频次，避免冗余刷新，从而降低性能开销。 基于上述考虑，提供四种较为推荐的动效实现方式：
动效设计入门工具小手册（微交互）
UI设计小站
04-29 2848
编者按：这篇小册子的目的不是手把手教你如何做出一个动效，而是从基础动效、动效曲线、动效软件等方面从头梳理相关的知识点，串成一片，帮助你从整体轮廓上认识动效，适合零基础及新手阅读。 最近几年UI设计领域最大的变化便是越来越强调用户体验设计，而在Web或者App中使用动效也就成了一大趋势。这种趋势是如此强烈，以至于我看到越来越多的应用中所使用的那些动效已经不再是为了提升用户体验，而更多是为了强调动效
HTML5培训教程学习之动效制作
xiaoxijinger的博客
07-01 297
近年来，HTML5应用愈发广泛，并有取代Flash的趋势。很多人知道利用HTML5可以做出好的动作效果，但你知道它是怎么做出来的吗?今天小千就来给大家分享一下HTML5培训教程中动效制作的几种方法。 1、逐帧动画。逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。逐帧动画脚本可以控制逐帧动画的快慢和动作的暂停，后期可以通过代码进行动画速率及透明度的修改。 2、GIF。GIF图片擅长于制作细节的小动画、位图，优势在于 “体型”很小，可压缩，制作成本低，
OpenHarmony动效示例-如何使用animateTo实现显式动画。
2401_82546228的博客
03-29 800
利用ArkUI组件不仅可以实现局部属性变化产生的属性动画，也可以实现父组件属性变化引起子组件产生过渡效果式的全局动画即显式动画。效果如图所示：
鸿蒙（HarmonyOS）性能优化实战-SmartPerf-Host分析应用性能
maniuT的博客
04-26 1287
SmartPerf-Host是一款深入挖掘数据、细粒度展示数据的性能功耗调优工具，可采集CPU调度、频点、进程线程时间片、堆内存、帧率等数据，采集的数据通过泳道图清晰地呈现给开发者，同时通过GUI以可视化的方式进行分析。该工具当前为开发者提供了五个分析模板，分别是帧率分析、CPU/线程调度分析、应用启动分析、TaskPool分析、动效分析。关于工具使用的更多内容可查看SmartPerf-Host调优工具使用指导。
鸿蒙HarmonyOS实战-Stage模型（开发卡片页面）_harmonyos元服务卡片
04-11 635
Entry@Component// 初始化CanvasRenderingContext2D和RenderingContextSettingsbuild() {Column() {Row() {// 在onReady回调中获取画布的实际宽和高// 绘制画布的背景// 在画布的中心绘制一个红色的圆// 绘制笑脸的左眼// 绘制笑脸的右眼。
鸿蒙HarmonyOS实战-窗口管理_鸿蒙nativewindow 获取窗口
2401_84181108的博客
04-21 983
窗口模块是在同一块物理屏幕上提供多个应用界面显示和交互的机制。对应用开发者而言，窗口模块是一个重要的工具，它允许他们创建具有界面的应用程序，并提供了界面显示和交互的能力。通过窗口模块，开发者可以方便地管理窗口的创建、展示和关闭，并可以对窗口进行调整和布局，以满足用户的需求。而对终端用户而言，窗口模块提供了一种控制应用界面的方式。用户可以通过窗口模块来切换和控制不同应用程序的窗口，使得他们能够同时在屏幕上显示多个应用界面，并能够在这些界面之间进行交互和操作。
2024鸿蒙OS实战开发项目大全：从入门到精通（含101个实战案例）超详细的鸿蒙实战案例
sybh的博客
05-17 3376
从基础的UI组件到复杂的分布式场景，从ArkTS的细致教学到JS的灵活运用，这一百个项目涵盖了你需要知道的HarmonyOS实战技术和策略。我们会从溪村小镇的细节世界开始，深入多端部署的可能性，感受如购物应用和音乐专辑这样的实用系统是如何在HarmonyOS中获得生命的。忘却繁杂，把握简单，最后我们将以开发您的第一个快应用（初级版和高级版）为终结，为您的鸿蒙OS开发之旅画上完美的句号。这一百个项目不仅仅是教程或示例，它们是设计思维、创新灵感和开发技巧的集大成，是您实战开发HarmonyOS路上的重要伴侣。
鸿蒙实战开发-如何实现时钟、闹钟、倒计时、设置屏幕亮度相功能
2401_82546228的博客
04-01 2155
本示例集中展示了时钟、闹钟、倒计时、设置屏幕亮度相关的场景，
HTML5入门教程之CSS3 2D炫酷动效
liuyingv8的博客
03-01 1017
CSS3 2D炫酷动效是CSS3里面新增的属性，在了解它之前先看下CSS3的有关知识。CSS3是一种样式语言，是用来告诉浏览器如何渲染页面的，是CSS推出的最新版本。在CSS2.1上增加了很多强大的新功能，用来帮助开发人员解决一些问题，并且不再需要非语义化标签，复杂的js脚本和图片，例如圆角、多背景、透明度、阴影等等。我们知道CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自...
盘点在H5小游戏里常用的动效制作套路
H5游戏开发
05-08 3872
近年来，越来越多的自带绚丽动效的H5小游戏如雨后春笋一般冒出来，而也正是这些炫酷的交互动效，才能够成功地吸引住用户的眼球，让用户为此驻足。 而「动效制作」也伴随着H5的大热而火遍前端圈及设计界，下面就让型科为大家分享在H5小游戏里常用的动效制作套路。 首先给大家贴上几个动效例子，上面这些动效都是采用我们非常熟悉的gif动画制作出来的动效，而H5动效制作的第一套路，就是G
android animation
wongstar的专栏
06-16 285
动画效果编程基础--AnimationAndroid 动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 JavaCode中 AlphaAnimation 渐变透明度动画效果 S...
使用SymbolGlyph和SymbolSpan在HarmonyOS中实现高级图标效果
A1551143530的博客
09-03 563
不仅支持静态图标，还可以通过属性为图标添加动态效果。Column() {Text("弹跳动效示例")'停止' : '开始').onClick(() => {})这个示例展示了如何通过按钮控制图标的动效，利用实现图标的弹跳效果。这样的动效可以显著提升用户界面的动态感。和SymbolSpan组件提供了丰富的功能，使您能够在HarmonyOS中轻松创建和管理图标。通过掌握这些组件的用法，您可以在应用中实现精美的图标效果，并为用户带来更好的视觉体验。4o。
HarmonyOS开发实战（ Beta5版）线程间通信场景最佳实践
weixin_55362248的博客
09-02 1033
在应用开发中，经常会需要处理一些耗时的任务，如果全部放在主线程中执行就会导致阻塞，从而引起卡顿或者掉帧现象，降低用户体验，此时就可以将这些耗时操作放到子线程中处理。
HarmonyOS开发实战（ Beta5版）应用滑动场景帧率问题分析最佳实践
weixin_55362248的博客
09-01 1077
应用运行时的流畅度，涉及人因要素，不完全等同于应用系统性能。其中帧率问题，可以从如下几个指标进行衡量。
【HarmonyOS 4.0】@ohos.events.emitter (Emitter)
最新发布
票票的博客
09-04 156
@ohos.events.emitter (Emitter)
鸿蒙HarmonyOS车机应用开发与驾驶模式指南
"HarmonyOS车机应用设计文档主要讲解了如何在华为的HarmonyOS操作系统上为汽车场景开发安全、适应性的应用。文档强调了驾驶模式和非驾驶模式的概念，并提出了对车载应用的约束与限制，以保障驾驶安全。此外，还介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值