• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 router from '@ohos.router';
17import { NavigationBar } from '../../../common/components/navigationBar'
18
19@Entry
20@Component
21struct ImageAnimatorSample {
22  @State state: AnimationStatus = AnimationStatus.Initial
23  @State fillMode: FillMode = FillMode.None
24  @State reverse: boolean = false
25  @State fixedSize: boolean = false
26  @State iterations: number = 1
27
28  build() {
29    Column() {
30      NavigationBar({ title: 'ImageAnimator' })
31      Column() {
32        Row() {
33          ImageAnimator()
34            .images([
35              {
36                src: '/common/animator/animator1.png',
37                duration: 120,
38                width: 200,
39                height: 270,
40                top: 0,
41                left: 0
42              },
43              {
44                src: '/common/animator/animator2.png',
45                duration: 120,
46                width: 200,
47                height: 270,
48                top: 0,
49                left: 0
50              },
51              {
52                src: '/common/animator/animator3.png',
53                duration: 120,
54                width: 200,
55                height: 270,
56                top: 0,
57                left: 0
58              },
59              {
60                src: '/common/animator/animator4.png',
61                duration: 120,
62                width: 200,
63                height: 270,
64                top: 0,
65                left: 0
66              },
67              {
68                src: '/common/animator/animator5.png',
69                duration: 120,
70                width: 200,
71                height: 270,
72                top: 0,
73                left: 0
74              },
75              {
76                src: '/common/animator/animator6.png',
77                duration: 120,
78                width: 200,
79                height: 270,
80                top: 0,
81                left: 0
82              },
83              {
84                src: '/common/animator/animator7.png',
85                duration: 120,
86                width: 200,
87                height: 270,
88                top: 0,
89                left: 0
90              },
91              {
92                src: '/common/animator/animator8.png',
93                duration: 120,
94                width: 200,
95                height: 270,
96                top: 0,
97                left: 0
98              },
99              {
100                src: '/common/animator/animator9.png',
101                duration: 120,
102                width: 200,
103                height: 270,
104                top: 0,
105                left: 0
106              },
107              {
108                src: '/common/animator/animator10.png',
109                duration: 120,
110                width: 200,
111                height: 270,
112                top: 0,
113                left: 0
114              }
115            ])
116            .state(this.state)
117            .reverse(this.reverse)
118            .fixedSize(this.fixedSize)
119            .preDecode(0)
120            .fillMode(this.fillMode)
121            .iterations(this.iterations)
122            .width(230)
123            .height(320)
124            .onStart(() => {
125              console.info('Start')
126            })
127            .onPause(() => {
128              console.info('Pause')
129            })
130            .onRepeat(() => {
131              console.info('Repeat')
132            })
133            .onCancel(() => {
134              console.info('Cancel')
135            })
136            .onFinish(() => {
137              console.info('Finish')
138            })
139        }.width('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)
140        .margin({ left: '10%' })
141      }
142      .width('100%')
143      .constraintSize({ minHeight: 218, maxHeight: 402 })
144      .padding({ left: 12, right: 12, top: 12, bottom: 22 })
145      .margin({ bottom: 14 })
146      .backgroundColor('#000000')
147
148      Scroll() {
149        Column() {
150          Row({ space: FlexAlign.SpaceBetween }) {
151            Text('state')
152              .fontSize('16fp')
153              .opacity(0.5)
154              .fontColor('#182431')
155              .fontWeight(FontWeight.Medium)
156
157            Blank()
158
159            Column() {
160              Text(`${this.state == 0 ? 'Initial' : this.state == 1 ? 'Running' :
161                                                        this.state == 2 ? 'Paused' : 'Stopped'}`)
162                .fontSize('16fp')
163                .fontColor('#182431')
164                .fontWeight(FontWeight.Medium)
165                .width('50%')
166                .textAlign(TextAlign.End)
167            }
168            .bindMenu([
169              {
170                value: 'Initial',
171                action: () => {
172                  this.state = AnimationStatus.Initial
173                }
174              },
175              {
176                value: 'Running',
177                action: () => {
178                  this.state = AnimationStatus.Running
179                }
180              },
181              {
182                value: 'Paused',
183                action: () => {
184                  this.state = AnimationStatus.Paused
185                }
186              },
187              {
188                value: 'Stopped',
189                action: () => {
190                  this.state = AnimationStatus.Stopped
191                }
192              },
193            ])
194          }
195          .alignItems(VerticalAlign.Center)
196          .width('100%')
197          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
198          .borderRadius(24)
199          .backgroundColor('#FFFFFF')
200          .margin({ top: 8 })
201
202          Row({ space: FlexAlign.SpaceBetween }) {
203            Text('reverse')
204              .fontSize('16fp')
205              .opacity(0.5)
206              .fontColor('#182431')
207              .fontWeight(FontWeight.Medium)
208
209            Blank()
210
211            Column() {
212              Text(`${this.reverse}`)
213                .fontSize('16fp')
214                .fontColor('#182431')
215                .fontWeight(FontWeight.Medium)
216                .width('50%')
217                .textAlign(TextAlign.End)
218            }
219            .bindMenu([
220              {
221                value: 'false',
222                action: () => {
223                  this.reverse = false
224                }
225              },
226              {
227                value: 'true',
228                action: () => {
229                  this.reverse = true
230                }
231              },
232            ])
233          }
234          .width('100%')
235          .alignItems(VerticalAlign.Center)
236          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
237          .borderRadius(24)
238          .backgroundColor('#FFFFFF')
239          .margin({ top: 8 })
240
241          Row({ space: FlexAlign.SpaceBetween }) {
242            Text('fixedSize')
243              .fontSize('16fp')
244              .opacity(0.5)
245              .fontColor('#182431')
246              .fontWeight(FontWeight.Medium)
247
248            Blank()
249
250            Column() {
251              Text(`${this.fixedSize}`)
252                .fontSize('16fp')
253                .fontColor('#182431')
254                .fontWeight(FontWeight.Medium)
255                .width('50%')
256                .textAlign(TextAlign.End)
257            }
258            .bindMenu([
259              {
260                value: 'false',
261                action: () => {
262                  this.fixedSize = false
263                }
264              },
265              {
266                value: 'true',
267                action: () => {
268                  this.fixedSize = true
269                }
270              }
271            ])
272          }
273          .width('100%')
274          .alignItems(VerticalAlign.Center)
275          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
276          .borderRadius(24)
277          .backgroundColor('#FFFFFF')
278          .margin({ top: 8 })
279
280          Row({ space: FlexAlign.SpaceBetween }) {
281            Text('fillMode')
282              .fontSize('16fp')
283              .opacity(0.5)
284              .fontColor('#182431')
285              .fontWeight(FontWeight.Medium)
286
287            Blank()
288
289            Column() {
290              Text(`${this.fillMode == 0 ? 'None' : 'Forwards'}`)
291                .fontSize('16fp')
292                .fontColor('#182431')
293                .fontWeight(FontWeight.Medium)
294                .width('50%')
295                .textAlign(TextAlign.End)
296            }
297            .bindMenu([
298              {
299                value: 'None',
300                action: () => {
301                  this.fillMode = FillMode.None
302                }
303              },
304              {
305                value: 'Forwards',
306                action: () => {
307                  this.fillMode = FillMode.Forwards
308                }
309              }
310            ])
311          }
312          .width('100%')
313          .alignItems(VerticalAlign.Center)
314          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
315          .borderRadius(24)
316          .backgroundColor('#FFFFFF')
317          .margin({ top: 8 })
318
319          Row({ space: FlexAlign.SpaceBetween }) {
320            Text('iterations')
321              .fontSize('16fp')
322              .opacity(0.5)
323              .fontColor('#182431')
324              .fontWeight(FontWeight.Medium)
325
326            Blank()
327
328            Column() {
329              Text(`${this.iterations}`)
330                .fontSize('16fp')
331                .fontColor('#182431')
332                .fontWeight(FontWeight.Medium)
333                .width('50%')
334                .textAlign(TextAlign.End)
335            }
336            .bindMenu([
337              {
338                value: '1',
339                action: () => {
340                  this.iterations = 1
341                }
342              },
343              {
344                value: '-1',
345                action: () => {
346                  this.iterations = -1
347                }
348              }
349            ])
350          }
351          .width('100%')
352          .alignItems(VerticalAlign.Center)
353          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
354          .borderRadius(24)
355          .backgroundColor('#FFFFFF')
356          .margin({ top: 8, bottom: 8 })
357        }.width('100%')
358      }
359    }
360    .width('100%')
361    .height('100%')
362    .alignItems(HorizontalAlign.Center)
363    .justifyContent(FlexAlign.Start)
364    .backgroundColor('#F1F3F5')
365    .padding({ left: '3%', right: '3%', bottom: 10 })
366  }
367
368  pageTransition() {
369    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
370      .slide(SlideEffect.Bottom)
371      .opacity(0.0)
372
373    PageTransitionExit({ duration: 370, curve: Curve.Friction })
374      .slide(SlideEffect.Bottom)
375      .opacity(0.0)
376  }
377}