OpenHarmony实战开发-请求动画绘制帧率

在应用开发中，属性动画和显式动画能够使用可选参数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)
  }
}

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

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

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG