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 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿
