当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 7:10:14

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, // 设置动画的期望帧率为60hzmin: 0, // 设置帧率范围max: 120, // 设置帧率范围},})

请求显式动画的绘制帧率

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

Button().onClick(() => {animateTo({duration: 1200,iterations: 10,expectedFrameRateRange: { // 设置显式动画的帧率范围expected: 30, // 设置动画的期望帧率为30hzmin: 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, // 设置动画的期望帧率为60hzmin: 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, // 设置动画的期望帧率为30hzmin: 0, // 设置帧率范围max: 120, // 设置帧率范围},}, () => {this.translateX1 = this.isAnimation ? 100 : -100;})animateTo({duration: 1200,iterations: 10,playMode: PlayMode.AlternateReverse,expectedFrameRateRange: { // 设置显式动画的帧率范围expected: 40, // 设置动画的期望帧率为40hzmin: 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、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述