1# DisplaySync分级管控 2 3### 介绍 4 5本示例通过DisplaySync分级管控功能对自绘制、属性动画、XComponent的绘制内容设置开发者所期望的帧率 6### 效果预览 7 8|初始页|自绘制|属性动画|XComponent| 9|--------------------------------|--------------------------------|--------------------------------|--------------------------------| 10| <img src="./screenshots/device/initPage.jpg" width="100%" /> | <img src="./screenshots/device/customDraw.jpg" width="100%"/> | <img src="./screenshots/device/propertyAnimation.jpg" width="100%" /> | <img src="./screenshots/device/xcomponent.jpg" width="80%"/> | 11 12使用说明 13 141.在初始页面点击“**自绘制**”，进入自绘制页面，点击“**Start**”，数字“**30**”按照30Hz帧率放大缩小，数字“**60**”按照60Hz帧率放大缩小；点击“**Stop**”绘制停止；点击“**Back**”返回初始页面 15 162.在初始页面点击“**属性动画**”，进入属性动画页面，点击“**Start**”，三个方块分别按照30Hz、40Hz、60Hz移动；点击“**Stop**”动画停止；点击“**Back**”返回初始页面 17 183.在初始页面点击“**XComponent**”，进入属性动画页面，点击“**Start**”，两个方块分别按照30Hz、120Hz移动；点击“**Stop**”动画停止；点击“**Back**”返回初始页面 19 20### 工程目录 21``` 22├──entry/src/main 23│ ├──cpp // C++代码区 24│ │ ├──CMakeLists.txt // CMake配置文件 25│ │ ├──hello.cpp // Napi模块注册 26│ │ ├──common 27│ │ │ └──log_common.h // 日志封装定义文件 28│ │ ├──plugin // 生命周期管理模块 29│ │ │ ├──plugin_manager.cpp 30│ │ │ └──plugin_manager.h 31│ │ ├──samples // samples渲染模块 32│ │ │ ├──sample_xcomponent.cpp 33│ │ │ └──sample_xcomponent.h 34│ ├──ets // ets代码区 35│ │ ├──entryability 36│ │ │ ├──EntryAbility.ts // 程序入口类 37| | | └──EntryAbility.ets 38| | ├──interface 39│ │ │ └──XComponentContext.ts // XComponentContext 40│ │ ├──pages // 页面文件 41│ │ | ├──Index.ets // 初始页面 42│ │ | ├──CustomDrawDisplaySync.ets // 自绘制页面 43│ │ | ├──PropertyAnimationDisplaySync.ets // 属性动画页面 44│ │ | └──XComponentDisplaySync.ets // XComponent页面 45│ │ ├──utils // 工具类 46| ├──resources // 资源文件目录 47``` 48 49### 具体实现 50 51* 自绘制：通过调用[@ohos.graphics.displaySync](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkgraphics2d/js-apis-graphics-displaySync.md)接口，通过注册回调和设置刷新了区间控制回调周期 52 * 涉及到的相关接口： 53 54 通过`import displaySync from '@ohos.graphics.displaySync'`引入 55 56 | 接口名 | 描述 | 57 | -------- | -------- | 58 | Create(): DisplaySync | 创建一个DisplaySync实例 | 59 | setExpectedFrameRateRange(rateRange: ExpectedFrameRateRange): void | 设置期望帧率 | 60 | on(type: 'frame', callback: Callback<IntervalInfo>): void | 设置自定义绘制内容回调函数 | 61 | off(type: 'frame', callback?: Callback<IntervalInfo>): void | 清除自定义绘制内容回调函数 | 62 | start(): void | DisplaySync使能 | 63 | stop(): void | DisplaySync失能 | 64 65* 属性动画：通过[animation](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-animatorproperty.md)和[animateTo](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animation.md)接口新增的参数expectedFrameRateRange，设置动画刷新率的区间，预期设置的刷新率，作为动画的属性之一，作用于动画场景 66 * 涉及到的相关接口： 67 68 | 新增动画属性 | 描述 | 69 | -------- | -------- | 70 | expectedFrameRateRange | animation和animateTo接口的动画属性参数中可选配置expectedFrameRateRange参数 | 71* XComponet：通过在IDE中的Native c++ 工程，在c++代码中定义对外接口为register和unregister，并调用新增的CAPI接口,可在页面上使用drawing根据设定的期望帧率来绘制 72 * 涉及到的相关接口([CAPI接口链接](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/_o_h___native_x_component.md))： 73 74 | 接口名 | 描述 | 75 | -------- | -------- | 76 | OH_NativeXComponent_SetExpectedFrameRateRange| 设置期望帧率范围 | 77 | OH_NativeXComponent_RegisterOnFrameCallback | 注册更新回调 | 78 | OH_NativeXComponent_UnregisterOnFrameCallback | 取消更新回调 | 79 80 81### 相关权限 82 83不涉及 84 85### 依赖 86 87不涉及 88 89### 约束与限制 90 911.本示例仅支持在标准系统上运行，支持设备：RK3568。 92 932.本示例为Stage模型，已适配API version 11版本SDK，SDK版本号(API Version 11 4.1.5.2),镜像版本号(4.1.5.2)。 94 953.本示例需要使用DevEco Studio 版本号(3.1.0.501)及以上版本才可编译运行。 96 97 98### 下载 99 100如需单独下载本工程，执行如下命令： 101``` 102git init 103git config core.sparsecheckout true 104echo code/SystemFeature/Graphics/DisplaySync/ > .git/info/sparse-checkout 105git remote add origin https://gitee.com/openharmony/applications_app_samples.git 106git pull origin master 107 108``` 109
