• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 请求动画绘制帧率
2
3在应用开发中，[属性动画](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md)和[显式动画](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md)能够使用可选参数[ExpectedFrameRateRange](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md#expectedframeraterange11)，为不同的动画配置不同的期望绘制帧率。
4
5## 请求属性动画的绘制帧率
6定义文本组件的属性动画，请求绘制帧率为60，范例如下：
7
8   ```ts
9    Text()
10     .animation({
11      duration: 1200,
12      iterations: 10,
13      expectedFrameRateRange: { // 设置属性动画的帧率范围
14   ​    expected: 60, // 设置动画的期望帧率为60hz
15   ​    min: 0, // 设置帧率范围
16   ​    max: 120 // 设置帧率范围
17      },
18     })
19   ```
20
21## 请求显式动画的绘制帧率
22定义按钮组件的显式动画，请求绘制帧率为30，范例如下：
23
24   ```ts
25   Button()
26    .onClick(() => {
27      animateTo({
28        duration: 1200,
29        iterations: 10,
30        expectedFrameRateRange: { // 设置显式动画的帧率范围
31          expected: 30, // 设置动画的期望帧率为30hz
32          min: 0, // 设置帧率范围
33          max: 120, // 设置帧率范围
34        },
35      }, () => {
36      })
37    })
38   ```
39
40
41## 完整示例
42
43```ts
44@Entry
45@Component
46struct AnimationToAnimationDemo {
47  @State isAnimation: boolean = false;
48  @State translateX1: number = -100;
49  @State translateX2: number = -100;
50  @State translateX3: number = -100;
51
52  build() {
53    Column() {
54      Row() {
55        Text('30')
56          .fontWeight(FontWeight.Bold)
57          .fontSize(16)
58          .fontColor(Color.White)
59          .textAlign(TextAlign.Center)
60          .borderRadius(10)
61          .backgroundColor(0xF56C6C)
62          .width(80)
63          .height(80)
64          .translate({ x: this.translateX1 })
65      }
66      .height('20%')
67
68      Row() {
69        Text('40')
70          .fontWeight(FontWeight.Bold)
71          .fontSize(16)
72          .fontColor(Color.White)
73          .textAlign(TextAlign.Center)
74          .borderRadius(10)
75          .backgroundColor(0x2E8B57)
76          .width(80)
77          .height(80)
78          .translate({ x: this.translateX2 })
79      }
80      .height('20%')
81
82      Row() {
83        Text('60')
84          .fontWeight(FontWeight.Bold)
85          .fontSize(16)
86          .fontColor(Color.White)
87          .textAlign(TextAlign.Center)
88          .borderRadius(10)
89          .backgroundColor(0x008B8B)
90          .width(80)
91          .height(80)
92          .translate({ x: this.translateX3 })
93          .animation({
94            duration: 1200,
95            iterations: 10,
96            playMode: PlayMode.AlternateReverse,
97            expectedFrameRateRange: { // 设置属性动画的帧率范围
98              expected: 60, // 设置动画的期望帧率为60hz
99              min: 0, // 设置帧率范围
100              max: 120, // 设置帧率范围
101            },
102          })
103      }
104      .height('20%')
105
106      Row() {
107        Button('Start')
108          .id('PropertyAnimationStart')
109          .fontSize(14)
110          .fontWeight(500)
111          .margin({ bottom: 10, left: 5 })
112          .fontColor(Color.White)
113          .onClick(() => {
114            this.isAnimation = !this.isAnimation;
115            this.translateX3 = this.isAnimation ? 100 : -100;
116
117            animateTo({
118              duration: 1200,
119              iterations: 10,
120              playMode: PlayMode.AlternateReverse,
121              expectedFrameRateRange: { // 设置显式动画的帧率范围
122                expected: 30, // 设置动画的期望帧率为30hz
123                min: 0, // 设置帧率范围
124                max: 120, // 设置帧率范围
125              },
126            }, () => {
127              this.translateX1 = this.isAnimation ? 100 : -100;
128            })
129
130            animateTo({
131              duration: 1200,
132              iterations: 10,
133              playMode: PlayMode.AlternateReverse,
134              expectedFrameRateRange: { // 设置显式动画的帧率范围
135                expected: 40, // 设置动画的期望帧率为40hz
136                min: 0, // 设置帧率范围
137                max: 120, // 设置帧率范围
138              },
139            }, () => {
140              this.translateX2 = this.isAnimation ? 100 : -100;
141            })
142          })
143          .width('40%')
144          .height(40)
145          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
146      }
147      .width('100%')
148      .justifyContent(FlexAlign.Center)
149      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
150      .alignItems(VerticalAlign.Bottom)
151      .layoutWeight(1)
152    }
153    .width('100%')
154    .justifyContent(FlexAlign.Center)
155    .shadow(ShadowStyle.OUTER_DEFAULT_SM)
156    .layoutWeight(1)
157  }
158}
159```
160
161## 相关实例
162
163针对可变帧率的开发，有以下相关实例可供参考：
164
165- [DisplaySync分级管控(ArkTS)(API11)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Graphics/DisplaySync)