• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 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 curves from '@ohos.curves';
17import router from '@ohos.router';
18
19@Entry
20@Component
21struct AnimationToAnimationDemo {
22  @State isAnimation: boolean = false;
23  @State translateX1: number = -100;
24  @State translateX2: number = -100;
25  @State translateX3: number = -100;
26
27  build() {
28    Column() {
29      Row() {
30        Text('30')
31          .fontWeight(FontWeight.Bold)
32          .fontSize(16)
33          .fontColor(Color.White)
34          .textAlign(TextAlign.Center)
35          .borderRadius(10)
36          .backgroundColor(0xF56C6C)
37          .width(80)
38          .height(80)
39          .translate({ x: this.translateX1 })
40      }
41      .height('20%')
42
43      Row() {
44        Text('40')
45          .fontWeight(FontWeight.Bold)
46          .fontSize(16)
47          .fontColor(Color.White)
48          .textAlign(TextAlign.Center)
49          .borderRadius(10)
50          .backgroundColor(0x2E8B57)
51          .width(80)
52          .height(80)
53          .translate({ x: this.translateX2 })
54      }
55      .height('20%')
56
57      Row() {
58        Text('60')
59          .fontWeight(FontWeight.Bold)
60          .fontSize(16)
61          .fontColor(Color.White)
62          .textAlign(TextAlign.Center)
63          .borderRadius(10)
64          .backgroundColor(0x008B8B)
65          .width(80)
66          .height(80)
67          .translate({ x: this.translateX3 })
68          .animation({
69            duration: 1200,
70            iterations: 10,
71            curve: curves.springMotion(),
72            playMode: PlayMode.AlternateReverse,
73            expectedFrameRateRange: {
74              expected: 60,
75              min: 0,
76              max: 120
77            },
78          })
79      }
80      .height('20%')
81
82      Row() {
83        Button('Start')
84          .id('PropertyAnimationStart')
85          .fontSize(14)
86          .fontWeight(500)
87          .margin({ bottom: 10, left: 5 })
88          .fontColor(Color.White)
89          .onClick(() => {
90            this.isAnimation = !this.isAnimation;
91            this.translateX3 = this.isAnimation ? 100 : -100;
92
93            animateTo({
94              duration: 1200,
95              iterations: 10,
96              curve: curves.springMotion(),
97              playMode: PlayMode.AlternateReverse,
98              expectedFrameRateRange: {
99                expected: 30,
100                min: 0,
101                max: 120,
102              },
103            }, () => {
104              this.translateX1 = this.isAnimation ? 100 : -100;
105            })
106
107            animateTo({
108              duration: 1200,
109              iterations: 10,
110              curve: curves.springMotion(),
111              playMode: PlayMode.AlternateReverse,
112              expectedFrameRateRange: {
113                expected: 40,
114                min: 0,
115                max: 120,
116              },
117            }, () => {
118              this.translateX2 = this.isAnimation ? 100 : -100;
119            })
120          })
121          .width('40%')
122          .height(40)
123          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
124
125        Button('Back')
126          .id('PropertyAnimationBack')
127          .fontSize(14)
128          .fontWeight(500)
129          .margin({ bottom: 10, left: 5 })
130          .fontColor(Color.White)
131          .onClick((): void => {
132            router.back();
133          })
134          .width('40%')
135          .height(40)
136          .shadow(ShadowStyle.OUTER_DEFAULT_LG)
137      }
138      .width('100%')
139      .justifyContent(FlexAlign.Center)
140      .shadow(ShadowStyle.OUTER_DEFAULT_SM)
141      .alignItems(VerticalAlign.Bottom)
142      .layoutWeight(1)
143    }
144    .width('100%')
145    .justifyContent(FlexAlign.Center)
146    .shadow(ShadowStyle.OUTER_DEFAULT_SM)
147    .layoutWeight(1)
148  }
149}