鸿蒙（API 12 Beta6版）图形【请求动画绘制帧率】方舟2D图形服务

最新推荐文章于 2024-09-03 18:14:10 发布

移动开发技术栈

最新推荐文章于 2024-09-03 18:14:10 发布

阅读量616

点赞数 10

分类专栏：鸿蒙开发文章标签： harmonyos openharmony 鸿蒙鸿蒙系统方舟2D图形动画绘制程序员

本文链接：https://blog.csdn.net/m0_70748845/article/details/141860577

版权

鸿蒙开发专栏收录该内容

475 篇文章 12 订阅

订阅专栏

ArkGraphics 2D（方舟2D图形服务）主要提供图形绘制与显示相关的能力。开发者可以基于一套统一的图形接口进行应用开发，使应用开发更简单、高效。

能力范围

提供图像处理的一些基本能力，包括对当前图像的亮度调节、模糊化、灰度调节、智能取色等。具体可见[@ohos.effectKit (图像效果)]。
提供管理抽象化色域对象的基础能力，包括色域的创建、色域基础属性的获取等。
提供可针对不同形式的内容指定帧率的能力，可用于开发者自绘制内容。
提供高动态显示的相关能力。
提供自绘制的相关能力，开发者可根据需要，自定义绘制实现UI效果，可自定义绘制基础形状、文本、图片等。具体可见[@ohos.graphics.drawing (绘制模块)]。
提供图形绘制与显示相关的Native能力，包括[NativeWindow]、[NativeBuffer]、[NativeImage]、[NativeVsync]、[Drawing]等模块。

使用场景

图像效果处理：开发者可根据不同的UI效果需要，使用[effectKit模块]实现图像的效果处理，以提升用户浏览体验。
设置图像色域：开发者可根据设计需求使用图像文件并设置色域信息，实现图像广色域效果的绘制和显示。
定制帧率场景：支持开发者根据不同内容和需要，定制帧率进行绘制。比如不同游戏场景和界面时，设置不同的帧率，以提升用户体验流畅性并达到平衡功耗的效果。
自绘制场景：开发者可根据不同的UI效果和场景需要，使用Drawing等模块实现除ArkUI组件外的自定义组件或者自定义UI效果的绘制和显示。

亮点特征

同个窗口支持多个帧率：支持为同个窗口的不同内容，比如动画或自绘制UI，定制不同的绘制帧率，不同内容之间独立运行。
支持帧率动态配置，兼顾体验与功耗：支持三方框架根据UI场景，动态请求绘制帧率，比如游戏、视频等业务，兼顾流畅体验与功耗体验
支持录制回放机制，提升交互体验：支持录制命令的缓存，可对绘制指令进行回放，以提升UI绘制的跟手性。
支持多种渲染后端：一次开发，支持多种渲染绘制后端，以降低多端适配成本，并满足应用的差异化需求。

可变帧率简介

随着设备屏幕的不断演进，当前主流设备采用LTPO屏幕，此类屏幕支持在多个档位之间切换屏幕帧率。

对于快速变化的内容，如射击游戏，交互动画等，显示帧率越高，画面越流畅，但是相对的功耗也会越高。

而低速变化的内容，如游戏大厅，时钟更新动画等，画面更新频率较低，使用相对低的显示帧率，用户也不会觉得卡顿，但是相对的功耗就比较低。

基于显示内容的可变帧率能力，在具备LTPO屏幕的设备上，可以达到性能体验和功耗间的平衡。

HarmonyOS支持可变帧率能力，开发者通过使用可变帧率接口，进行相关业务开发，可以享受可变帧率特性带来的功耗收益。

使用场景

可变帧率能力支持开发者自定义应用业务的帧率，其常见的使用场景：

通过配置属性动画/显示动画的帧率属性参数，用于动画的绘制。
通过申请一个独立的绘制帧率，用于UI的绘制。
通过XComponent在Native侧申请独立的绘制帧率，用于游戏等自绘制内容的绘制。
通过NativeVsync在Native侧申请独立的绘制帧率，用于非UI线程的绘制。

运作机制

可变帧率为应用开发中的动画组件、XComponent组件、UI绘制等提供一种基础帧率配置和能力。

开发者通过设置有效的期望绘制帧率后，系统会收集设置的请求帧率，进行决策和分发，在渲染管线上进行分频，尽量能够满足开发者的期望帧率。

在应用开发中，[属性动画]和[显式动画]能够使用可选参数[ExpectedFrameRateRange]，为不同的动画配置不同的期望绘制帧率。

请求属性动画的绘制帧率

定义文本组件的属性动画，请求绘制帧率为60，范例如下：

 Text()
  .animation({
     duration: 1200,
     iterations: 10,
     expectedFrameRateRange: { // 设置属性动画的帧率范围
       expected: 60, // 设置动画的期望帧率为60hz
       min: 0, // 设置帧率范围
       max: 120, // 设置帧率范围
     },
  })

请求显式动画的绘制帧率

定义按钮组件的显式动画，请求绘制帧率为30，范例如下：

Button()
 .onClick(() => {
   animateTo({
     duration: 1200,
     iterations: 10,
     expectedFrameRateRange: { // 设置显式动画的帧率范围
       expected: 30, // 设置动画的期望帧率为30hz
       min: 0, // 设置帧率范围
       max: 120, // 设置帧率范围
     },
   }, () => {
   })
 })

完整示例

@Entry
@Component
struct AnimationToAnimationDemo {
  @State isAnimation: boolean = false;
  @State translateX1: number = -100;
  @State translateX2: number = -100;
  @State translateX3: number = -100;

  build() {
    Column() {
      Row() {
        Text('30')
          .fontWeight(FontWeight.Bold)
          .fontSize(16)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0xF56C6C)
          .width(80)
          .height(80)
          .translate({ x: this.translateX1 })
      }
      .height('20%')

      Row() {
        Text('40')
          .fontWeight(FontWeight.Bold)
          .fontSize(16)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0x2E8B57)
          .width(80)
          .height(80)
          .translate({ x: this.translateX2 })
      }
      .height('20%')

      Row() {
        Text('60')
          .fontWeight(FontWeight.Bold)
          .fontSize(16)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .backgroundColor(0x008B8B)
          .width(80)
          .height(80)
          .translate({ x: this.translateX3 })
          .animation({
            duration: 1200,
            iterations: 10,
            playMode: PlayMode.AlternateReverse,
            expectedFrameRateRange: { // 设置属性动画的帧率范围
              expected: 60, // 设置动画的期望帧率为60hz
              min: 0, // 设置帧率范围
              max: 120, // 设置帧率范围
            },
          })
      }
      .height('20%')

      Row() {
        Button('Start')
          .id('PropertyAnimationStart')
          .fontSize(14)
          .fontWeight(500)
          .margin({ bottom: 10, left: 5 })
          .fontColor(Color.White)
          .onClick(() => {
            this.isAnimation = !this.isAnimation;
            this.translateX3 = this.isAnimation ? 100 : -100;

            animateTo({
              duration: 1200,
              iterations: 10,
              playMode: PlayMode.AlternateReverse,
              expectedFrameRateRange: { // 设置显式动画的帧率范围
                expected: 30, // 设置动画的期望帧率为30hz
                min: 0, // 设置帧率范围
                max: 120, // 设置帧率范围
              },
            }, () => {
              this.translateX1 = this.isAnimation ? 100 : -100;
            })

            animateTo({
              duration: 1200,
              iterations: 10,
              playMode: PlayMode.AlternateReverse,
              expectedFrameRateRange: { // 设置显式动画的帧率范围
                expected: 40, // 设置动画的期望帧率为40hz
                min: 0, // 设置帧率范围
                max: 120, // 设置帧率范围
              },
            }, () => {
              this.translateX2 = this.isAnimation ? 100 : -100;
            })
          })
          .width('40%')
          .height(40)
          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
      .alignItems(VerticalAlign.Bottom)
      .layoutWeight(1)
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .shadow(ShadowStyle.OUTER_DEFAULT_SM)
    .layoutWeight(1)
  }
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

《鸿蒙 (OpenHarmony)开发学习视频》
《鸿蒙生态应用开发V2.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
《鸿蒙开发进阶》
《鸿蒙开发实战》

在这里插入图片描述

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！自↓↓↓拿

移动开发技术栈

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙（API 12 Beta6版）图形【请求动画绘制帧率】方舟2D图形服务

ArkGraphics 2D（方舟2D图形服务）主要提供图形绘制与显示相关的能力。开发者可以基于一套统一的图形接口进行应用开发，使应用开发更简单、高效。
复制链接

扫一扫