• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {
2  memo,
3  __memo_context_type,
4  __memo_id_type,
5  State,
6  StateDecoratedVariable,
7  MutableState,
8  stateOf,
9  observableProxy
10} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins
11
12import {
13  Text,
14  TextAttribute,
15  Column,
16  Row,
17  Component,
18  Button,
19  AnimateParam,
20  FinishCallbackType,
21  ButtonAttribute,
22  PlayMode,
23  Scroll,
24  Entry,
25  ClickEvent,
26  UserView,
27  animateTo,
28  ICurve,
29  ExpectedFrameRateRange,
30  Curve,
31  NavPathStack,
32  Navigation,
33  LaunchMode,
34  NavPathInfo,
35  NavDestination,
36  NavigationMode,
37  NavigationOptions,
38  NavigationTitleMode,
39  NavigationCommonTitle,
40  NavigationMenuItem,
41  NavDestinationMode,
42  LayoutSafeAreaType,
43  LayoutSafeAreaEdge,
44  Callback,
45  NavDestinationContext
46} from '@ohos.arkui.component'  // TextAttribute should be insert by ui-plugins
47
48import hilog from '@ohos.hilog'
49import { UIContext } from '@ohos.arkui.UIContext'
50import router from '@ohos.router'
51
52@Entry
53@Component
54export struct AnimationTest {
55  private TAG: string = 'testTag'
56  @State fsize:number = 14
57  @State flag: boolean = true;
58  @State duration:number = 2000
59  @State curve: Curve | string | ICurve = 'linear'
60  @State tempo: number = 1
61  @State delay: number = 500
62  @State iterations: number = 1
63  @State playMode: PlayMode = PlayMode.Normal
64  @State finishCallbackType:FinishCallbackType = FinishCallbackType.REMOVED
65
66  build() {
67    NavDestination() {
68      Column() {
69        Row() {
70          Button('delay-1').onClick((e: ClickEvent) => {
71            this.delay = -1
72          })
73          Button('delay:2000.55').onClick((e: ClickEvent) => {
74            this.delay = 2000.55
75          })
76          Button('delay:0').onClick((e: ClickEvent) => {
77            this.delay = 0
78          })
79        }
80
81        Row() {
82          Button('duration 1000.98').onClick((e: ClickEvent) => {
83            this.duration = 1000.98
84          })
85          Button('duration:0').onClick((e: ClickEvent) => {
86            this.duration = 0
87          })
88          Button('duration:-1').onClick((e: ClickEvent) => {
89            this.duration = -1
90          })
91        }
92
93        Row() {
94          Button('iterations-55').onClick((e: ClickEvent) => {
95            this.iterations = -55
96          })
97          Button('iterations:0').onClick((e: ClickEvent) => {
98            this.iterations = 0
99          })
100          Button('iterations:5.42').onClick((e: ClickEvent) => {
101            this.iterations = 5.42
102          })
103        }
104
105        Row() {
106          Button('iterations-1').onClick((e: ClickEvent) => {
107            this.iterations = -1
108          })
109          Button('tempo:0').onClick((e: ClickEvent) => {
110            this.tempo = 0
111          })
112          Button('Reverse').onClick((e: ClickEvent) => {
113            this.playMode = PlayMode.Reverse
114          })
115        }
116
117        Row() {
118          Button('Alternate').onClick((e: ClickEvent) => {
119            this.playMode = PlayMode.Alternate
120          })
121        }
122
123        Row() {
124          Button('LOGICALLY').onClick((e: ClickEvent) => {
125            this.finishCallbackType = FinishCallbackType.LOGICALLY
126          })
127          Button('Curve.EaseOut').onClick((e: ClickEvent) => {
128            this.curve = Curve.EaseOut
129          })
130        }
131
132        Button('change size')
133          .onClick((e: ClickEvent) => {
134            this.getUIContext()?.animateTo({
135              duration: this.duration,
136              curve: this.curve,
137              iterations: this.iterations,
138              tempo: this.tempo,
139              delay: this.delay,
140              playMode: this.playMode,
141              finishCallbackType: this.finishCallbackType,
142              onFinish: () => {
143                hilog.info(0x0000, 'xhq', 'play end');
144              }
145            }, () => {
146              this.fsize = 50;
147            })
148          })
149
150        Text('test api')
151          .onClick((e: ClickEvent) => {
152            hilog.info(0x0000, '===click', '222');
153            if (this.flag) {
154              this.fsize = 50;
155            } else {
156              this.fsize = 14; // 改变this.space动画不生效
157            }
158            this.flag = !this.flag;
159          })
160          .fontSize(this.fsize)
161          .animation({
162            duration: this.duration,
163            curve: this.curve,
164            delay: this.delay,
165            tempo: this.tempo,
166            iterations: this.iterations,
167            playMode: this.playMode,
168            expectedFrameRateRange: { min: 10, max: 120, expected: 30, } as ExpectedFrameRateRange,
169            onFinish: () => {
170              hilog.info(0x0000, '===onFinish', '222');
171            },
172            finishCallbackType: this.finishCallbackType
173          } as AnimateParam)
174      }
175    }
176    .title('动效测试001'  )
177  }
178}
179
180@Component
181struct Child {
182  @State stateVar: string = 'Child';
183  build() {
184    Text(this.stateVar).fontSize(50)
185  }
186}