• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 * http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import animator, { AnimatorResult } from '@ohos.animator';
17import router from '@ohos.router';
18
19@Entry
20@Component
21struct AnimatorTest {
22  private TAG: string = '[AnimatorTest]';
23  private backAnimator10: AnimatorResult | undefined = undefined;
24  private backAnimator30: AnimatorResult | undefined = undefined;
25  private backAnimator60: AnimatorResult | undefined = undefined;
26  private flag: boolean = false;
27  @State wid10: number = 20;
28  @State hei10: number = 20;
29  @State wid30: number = 20;
30  @State hei30: number = 20;
31  @State wid60: number = 20;
32  @State hei60: number = 20;
33
34  create() {
35    let _this = this
36    // 创建一个动画类
37    this.backAnimator10 = animator.create({
38      duration: 2000,
39      easing: "ease", // 动画开始和结束时的速度较慢
40      delay: 0,
41      fill: "forwards", // 在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）
42      direction: "normal", // 动画正向循环播放
43      iterations: 1, // 动画播放次数
44      begin: 100,
45      end: 200
46    })
47
48    let expectedFrameRate10: ExpectedFrameRateRange = {
49      min: 0,
50      max: 120,
51      expected: 10
52    }
53    // 设置期望的帧率范围，预期帧率为10hz
54    this.backAnimator10.setExpectedFrameRateRange(expectedFrameRate10);
55    // 每帧回调设置长和宽
56    this.backAnimator10.onFrame = (value: number) => {
57      _this.wid10 = value
58      _this.hei10 = value
59    }
60
61    this.backAnimator30 = animator.create({
62      duration: 2000,
63      easing: "ease", // 动画开始和结束时的速度较慢
64      delay: 0,
65      fill: "forwards", // 在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）
66      direction: "normal", // 动画正向循环播放
67      iterations: 1, // 动画播放次数
68      begin: 100,
69      end: 200
70    })
71
72    let expectedFrameRate30: ExpectedFrameRateRange = {
73      min: 0,
74      max: 120,
75      expected: 30
76    }
77    // 设置期望的帧率范围，预期帧率为30hz
78    this.backAnimator30.setExpectedFrameRateRange(expectedFrameRate30);
79    // 每帧回调设置长和宽
80    this.backAnimator30.onFrame = (value: number) => {
81      _this.wid30 = value
82      _this.hei30 = value
83    }
84
85    this.backAnimator60 = animator.create({
86      duration: 2000,
87      easing: "ease", // 动画开始和结束时的速度较慢
88      delay: 0,
89      fill: "forwards", // 在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）
90      direction: "normal", // 动画正向循环播放
91      iterations: 1, // 动画播放次数
92      begin: 100,
93      end: 200
94    })
95
96    let expectedFrameRate60: ExpectedFrameRateRange = {
97      min: 0,
98      max: 120,
99      expected: 60
100    }
101    // 设置期望的帧率范围，预期帧率为60hz
102    this.backAnimator60.setExpectedFrameRateRange(expectedFrameRate60);
103    // 每帧回调设置长和宽
104    this.backAnimator60.onFrame = (value: number) => {
105      _this.wid60 = value
106      _this.hei60 = value
107    }
108  }
109
110  aboutToDisappear() {
111    // 由于backAnimator在onFrame中引用了this, this中保存了backAnimator，
112    // 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏
113    this.backAnimator10 = undefined;
114    this.backAnimator30 = undefined;
115    this.backAnimator60 = undefined;
116  }
117
118  build() {
119    Column() {
120      Row() {
121        Text('10fps')
122          .fontWeight(FontWeight.Bold)
123          .fontSize(12)
124          .fontColor(Color.Black)
125          .textAlign(TextAlign.Start)
126          .width(40)
127          .height(150)
128        Column() {
129          Column()
130            // 设置容器的长和宽
131            .width(this.wid10)
132            .height(this.hei10)
133            .backgroundColor(Color.Red)
134        }
135        .alignItems(HorizontalAlign.Center)
136        .width('60%')
137      }.height('30%')
138
139      Row() {
140        Text('30fps')
141          .fontWeight(FontWeight.Bold)
142          .fontSize(12)
143          .fontColor(Color.Black)
144          .textAlign(TextAlign.Start)
145          .width(40)
146          .height(30)
147        Column() {
148          Column()
149            // 设置容器的长和宽
150            .width(this.wid30)
151            .height(this.hei30)
152            .backgroundColor(Color.Green)
153        }
154        .alignItems(HorizontalAlign.Center)
155        .width('60%')
156      }.height('30%')
157
158      Row() {
159        Text('60fps')
160          .fontWeight(FontWeight.Bold)
161          .fontSize(12)
162          .fontColor(Color.Black)
163          .textAlign(TextAlign.Start)
164          .width(40)
165          .height(30)
166        Column() {
167          Column()
168            // 设置容器的长和宽
169            .width(this.wid60)
170            .height(this.hei60)
171            .backgroundColor(Color.Blue)
172        }
173        .alignItems(HorizontalAlign.Center)
174        .width('60%')
175      }.height('30%')
176
177
178      Row() {
179        Button('Create')
180          .id('AnimatorCreate')
181          .fontSize(14)
182          .fontWeight(500)
183          .margin({ bottom: 10, left: 5 })
184          .fontColor(Color.White)
185          .onClick(() => {
186            this.create()
187          })
188          .width('30%')
189          .height(40)
190          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
191
192        Button('Play')
193          .id('AnimatorPlay')
194          .fontSize(14)
195          .fontWeight(500)
196          .margin({ bottom: 10, left: 5 })
197          .fontColor(Color.White)
198          .onClick(() => {
199            this.flag = false
200            // 启动动画
201            this.backAnimator10?.play()
202            this.backAnimator30?.play()
203            this.backAnimator60?.play()
204          })
205          .width('30%')
206          .height(40)
207          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
208
209        Button('Back')
210          .id('AnimatorBack')
211          .fontSize(14)
212          .fontWeight(500)
213          .margin({ bottom: 10, left: 5 })
214          .fontColor(Color.White)
215          .onClick((): void => {
216            router.back();
217          })
218          .width('30%')
219          .height(40)
220          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
221      }
222      .width('100%')
223      .justifyContent(FlexAlign.Center)
224      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
225      .alignItems(VerticalAlign.Bottom)
226      .layoutWeight(1)
227    }
228  }
229}