• 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 */
15import { NavigationBar } from '../../../common/components/navigationBar'
16
17@Entry
18@Component
19struct PathAnimationSample {
20  @State path: string = 'M0,0 ' +
21  'C20,100.143 40.90861,80 60,18 ' +
22  'C80.09139,119 100,-62.90861 120,66 ' +
23  'C140,110.86 160,24.54 180,-90.6 ' +
24  'C200,-100 220,10.13 240,108.15 ' +
25  'C260,79.23 280,-44.23 300,-112.43 ' +
26  'C320,-48.51 340,64.05 360,108.15 ' +
27  'C380,104.143 400.90861,86 420,36 ' +
28  'C440.09139,114 460,200,480.90861,66' +
29  'C500,110.86 520,24.54 540,-90.6 ' +
30  'C560,-100 580,10.13 600,108.15 ' +
31  'C620,-79 640,-44.23 660,-112.43 ' +
32  'C680,-48.51 700,-64.23 720,-108.43 '
33  @State toggle: boolean = true
34
35  build() {
36    Column() {
37      NavigationBar({ title: '路径动画' })
38      Column() {
39        Column() {
40          Row() {
41            Image($r('app.media.plane'))
42          }
43          .rotate({
44            x: 0,
45            y: 0,
46            z: 1,
47            centerX: '50%',
48            centerY: '70%',
49            angle: 90
50          })
51          .width(50)
52          .height(50)
53          .motionPath({ path: this.path, from: 0.0, to: 1.0, rotatable: true })
54        }.margin({ top: 100 })
55        .width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.End)
56      }
57      .width('100%')
58      .constraintSize({ minHeight: 218, maxHeight: 402 })
59      .padding({ left: 12, right: 12, top: 22, bottom: 22 })
60      .backgroundColor('#696969')
61
62      Button('play')
63        .width(120)
64        .height(60)
65        .backgroundColor('#007DFF')
66        .fontSize('24fp')
67        .fontWeight(FontWeight.Medium)
68        .fontColor('#FFFFFF')
69        .margin({ top: 120 })
70        .onClick((event: ClickEvent) => {
71          animateTo({ duration: 6000, curve: Curve.Linear }, () => {
72            this.toggle = !this.toggle;
73          })
74        })
75    }
76    .height('100%')
77    .alignItems(HorizontalAlign.Center)
78    .backgroundColor('#F1F3F5')
79    .padding({ left: '3%', right: '3%', bottom: 10 })
80  }
81
82  pageTransition() {
83    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
84      .slide(SlideEffect.Bottom)
85      .opacity(0.0)
86
87    PageTransitionExit({ duration: 370, curve: Curve.Friction })
88      .slide(SlideEffect.Bottom)
89      .opacity(0.0)
90  }
91}