• 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      // uiContext需通过getUIContext获取，具体可见下文完整示例
28      this.uiContext?.animateTo({
29        duration: 1200,
30        iterations: 10,
31        expectedFrameRateRange: { // 设置显式动画的帧率范围
32          expected: 30, // 设置动画的期望帧率为30hz
33          min: 0, // 设置帧率范围
34          max: 120, // 设置帧率范围
35        },
36      }, () => {
37      })
38    })
39   ```
40
41
42## 完整示例
43
44```ts
45@Entry
46@Component
47struct AnimationToAnimationDemo {
48  @State isAnimation: boolean = false;
49  @State translateX1: number = -100;
50  @State translateX2: number = -100;
51  @State translateX3: number = -100;
52  uiContext: UIContext | undefined = undefined;
53
54  aboutToAppear() {
55    this.uiContext = this.getUIContext();
56    if (!this.uiContext) {
57      console.warn('no uiContext');
58      return;
59    }
60  }
61
62  build() {
63    Column() {
64      Row() {
65        Text('30')
66          .fontWeight(FontWeight.Bold)
67          .fontSize(16)
68          .fontColor(Color.White)
69          .textAlign(TextAlign.Center)
70          .borderRadius(10)
71          .backgroundColor(0xF56C6C)
72          .width(80)
73          .height(80)
74          .translate({ x: this.translateX1 })
75      }
76      .height('20%')
77
78      Row() {
79        Text('40')
80          .fontWeight(FontWeight.Bold)
81          .fontSize(16)
82          .fontColor(Color.White)
83          .textAlign(TextAlign.Center)
84          .borderRadius(10)
85          .backgroundColor(0x2E8B57)
86          .width(80)
87          .height(80)
88          .translate({ x: this.translateX2 })
89      }
90      .height('20%')
91
92      Row() {
93        Text('60')
94          .fontWeight(FontWeight.Bold)
95          .fontSize(16)
96          .fontColor(Color.White)
97          .textAlign(TextAlign.Center)
98          .borderRadius(10)
99          .backgroundColor(0x008B8B)
100          .width(80)
101          .height(80)
102          .translate({ x: this.translateX3 })
103          .animation({
104            duration: 1200,
105            iterations: 10,
106            playMode: PlayMode.AlternateReverse,
107            expectedFrameRateRange: { // 设置属性动画的帧率范围
108              expected: 60, // 设置动画的期望帧率为60hz
109              min: 0, // 设置帧率范围
110              max: 120, // 设置帧率范围
111            },
112          })
113      }
114      .height('20%')
115
116      Row() {
117        Button('Start')
118          .id('PropertyAnimationStart')
119          .fontSize(14)
120          .fontWeight(500)
121          .margin({ bottom: 10, left: 5 })
122          .fontColor(Color.White)
123          .onClick(() => {
124            this.isAnimation = !this.isAnimation;
125            this.translateX3 = this.isAnimation ? 100 : -100;
126
127            this.uiContext?.animateTo({
128              duration: 1200,
129              iterations: 10,
130              playMode: PlayMode.AlternateReverse,
131              expectedFrameRateRange: { // 设置显式动画的帧率范围
132                expected: 30, // 设置动画的期望帧率为30hz
133                min: 0, // 设置帧率范围
134                max: 120, // 设置帧率范围
135              },
136            }, () => {
137              this.translateX1 = this.isAnimation ? 100 : -100;
138            })
139
140            this.uiContext?.animateTo({
141              duration: 1200,
142              iterations: 10,
143              playMode: PlayMode.AlternateReverse,
144              expectedFrameRateRange: { // 设置显式动画的帧率范围
145                expected: 40, // 设置动画的期望帧率为40hz
146                min: 0, // 设置帧率范围
147                max: 120, // 设置帧率范围
148              },
149            }, () => {
150              this.translateX2 = this.isAnimation ? 100 : -100;
151            })
152          })
153          .width('40%')
154          .height(40)
155          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
156      }
157      .width('100%')
158      .justifyContent(FlexAlign.Center)
159      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
160      .alignItems(VerticalAlign.Bottom)
161      .layoutWeight(1)
162    }
163    .width('100%')
164    .justifyContent(FlexAlign.Center)
165    .shadow(ShadowStyle.OUTER_DEFAULT_SM)
166    .layoutWeight(1)
167  }
168}
169```
170
171## 相关实例
172
173针对可变帧率的开发，有以下相关实例可供参考：
174
175- [DisplaySync分级管控(ArkTS)(API11)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Graphics/DisplaySync)