• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 请求动画绘制帧率
2<!--Kit: ArkGraphics 2D-->
3<!--Subsystem: Graphics-->
4<!--Owner: @hudi33-->
5<!--Designer: @hudi33-->
6<!--Tester: @zhaoxiaoguang2-->
7<!--Adviser: @ge-yafang-->
8
9在应用开发中，[属性动画](../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)，为不同的动画配置不同的期望绘制帧率。
10
11## 请求属性动画的绘制帧率
12定义文本组件的属性动画，请求绘制帧率为60，范例如下：
13
14   ```ts
15    Text()
16     .animation({
17        duration: 1200,
18        iterations: 10,
19        expectedFrameRateRange: { // 设置属性动画的帧率范围
20          expected: 60, // 设置动画的期望帧率为60hz
21          min: 0, // 设置帧率范围
22          max: 120, // 设置帧率范围
23        },
24     })
25   ```
26
27## 请求显式动画的绘制帧率
28定义按钮组件的显式动画，请求绘制帧率为30，范例如下：
29
30   ```ts
31   Button()
32    .onClick(() => {
33      // uiContext需通过getUIContext获取，具体可见下文完整示例
34      this.uiContext?.animateTo({
35        duration: 1200,
36        iterations: 10,
37        expectedFrameRateRange: { // 设置显式动画的帧率范围
38          expected: 30, // 设置动画的期望帧率为30hz
39          min: 0, // 设置帧率范围
40          max: 120, // 设置帧率范围
41        },
42      }, () => {
43      })
44    })
45   ```
46
47
48## 完整示例
49
50```ts
51@Entry
52@Component
53struct AnimationToAnimationDemo {
54  @State isAnimation: boolean = false;
55  @State translateX1: number = -100;
56  @State translateX2: number = -100;
57  @State translateX3: number = -100;
58  uiContext: UIContext | undefined = undefined;
59
60  aboutToAppear() {
61    this.uiContext = this.getUIContext();
62    if (!this.uiContext) {
63      console.warn('no uiContext');
64      return;
65    }
66  }
67
68  build() {
69    Column() {
70      Row() {
71        Text('30')
72          .fontWeight(FontWeight.Bold)
73          .fontSize(16)
74          .fontColor(Color.White)
75          .textAlign(TextAlign.Center)
76          .borderRadius(10)
77          .backgroundColor(0xF56C6C)
78          .width(80)
79          .height(80)
80          .translate({ x: this.translateX1 })
81      }
82      .height('20%')
83
84      Row() {
85        Text('40')
86          .fontWeight(FontWeight.Bold)
87          .fontSize(16)
88          .fontColor(Color.White)
89          .textAlign(TextAlign.Center)
90          .borderRadius(10)
91          .backgroundColor(0x2E8B57)
92          .width(80)
93          .height(80)
94          .translate({ x: this.translateX2 })
95      }
96      .height('20%')
97
98      Row() {
99        Text('60')
100          .fontWeight(FontWeight.Bold)
101          .fontSize(16)
102          .fontColor(Color.White)
103          .textAlign(TextAlign.Center)
104          .borderRadius(10)
105          .backgroundColor(0x008B8B)
106          .width(80)
107          .height(80)
108          .translate({ x: this.translateX3 })
109          .animation({
110            duration: 1200,
111            iterations: 10,
112            playMode: PlayMode.AlternateReverse,
113            expectedFrameRateRange: { // 设置属性动画的帧率范围
114              expected: 60, // 设置动画的期望帧率为60hz
115              min: 0, // 设置帧率范围
116              max: 120, // 设置帧率范围
117            },
118          })
119      }
120      .height('20%')
121
122      Row() {
123        Button('Start')
124          .id('PropertyAnimationStart')
125          .fontSize(14)
126          .fontWeight(500)
127          .margin({ bottom: 10, left: 5 })
128          .fontColor(Color.White)
129          .onClick(() => {
130            this.isAnimation = !this.isAnimation;
131            this.translateX3 = this.isAnimation ? 100 : -100;
132
133            this.uiContext?.animateTo({
134              duration: 1200,
135              iterations: 10,
136              playMode: PlayMode.AlternateReverse,
137              expectedFrameRateRange: { // 设置显式动画的帧率范围
138                expected: 30, // 设置动画的期望帧率为30hz
139                min: 0, // 设置帧率范围
140                max: 120, // 设置帧率范围
141              },
142            }, () => {
143              this.translateX1 = this.isAnimation ? 100 : -100;
144            })
145
146            this.uiContext?.animateTo({
147              duration: 1200,
148              iterations: 10,
149              playMode: PlayMode.AlternateReverse,
150              expectedFrameRateRange: { // 设置显式动画的帧率范围
151                expected: 40, // 设置动画的期望帧率为40hz
152                min: 0, // 设置帧率范围
153                max: 120, // 设置帧率范围
154              },
155            }, () => {
156              this.translateX2 = this.isAnimation ? 100 : -100;
157            })
158          })
159          .width('40%')
160          .height(40)
161          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
162      }
163      .width('100%')
164      .justifyContent(FlexAlign.Center)
165      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
166      .alignItems(VerticalAlign.Bottom)
167      .layoutWeight(1)
168    }
169    .width('100%')
170    .justifyContent(FlexAlign.Center)
171    .shadow(ShadowStyle.OUTER_DEFAULT_SM)
172    .layoutWeight(1)
173  }
174}
175```
176
177<!--RP1-->
178## 相关实例
179
180- [DisplaySync (API14)](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/DocsSample/graphic/DisplaySync)
181<!--RP1End-->