1# Requesting Frame Rates for Animations
2
3During application development, you can use the optional parameter [ExpectedFrameRateRange](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md#expectedframeraterange11) to set an expected frame rate range for a [property animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md) or an [explicit animation](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md).
4
5## Requesting a Frame Rate for a Property Animation
6The code snippet below defines a property animation for the **Text** component and sets the frame rate to 60.
7
8   ```ts
9    Text()
10     .animation({
11        duration: 1200,
12        iterations: 10,
13        expectedFrameRateRange: { // Set the frame rate range of the property animation.
14          expected: 60, // Set the expected frame rate of the animation to 60 Hz.
15          min: 0, // Set the frame rate range.
16          max: 120, // Set the frame rate range.
17        },
18     })
19   ```
20
21## Requesting a Frame Rate for an Explicit Animation
22The code snippet below defines an explicit animation for the **Button** component and sets the frame rate to 30.
23
24   ```ts
25   Button()
26    .onClick(() => {
27      animateTo({
28        duration: 1200,
29        iterations: 10,
30        expectedFrameRateRange: { // Set the frame rate range of the explicit animation.
31          expected: 30, // Set the expected frame rate of the animation to 30 Hz.
32          min: 0, // Set the frame rate range.
33          max: 120, // Set the frame rate range.
34        },
35      }, () => {
36      })
37    })
38   ```
39
40
41## Sample Code
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: { // Set the frame rate range of the property animation.
98              expected: 60, // Set the expected frame rate of the animation to 60 Hz.
99              min: 0, // Set the frame rate range.
100              max: 120, // Set the frame rate range.
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: { // Set the frame rate range of the explicit animation.
122                expected: 30, // Set the expected frame rate of the animation to 30 Hz.
123                min: 0, // Set the frame rate range.
124                max: 120, // Set the frame rate range.
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: { // Set the frame rate range of the explicit animation.
135                expected: 40, // Set the expected frame rate of the animation to 40 Hz.
136                min: 0, // Set the frame rate range.
137                max: 120, // Set the frame rate range.
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