• 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'
16import Curves from '@ohos.curves';
17
18@Entry
19@Component
20struct InterpolationSample {
21  @State positionX: string = '0%'
22  @State flag: boolean = false
23  @State width: string = '15%'
24
25  build() {
26    Column() {
27      NavigationBar({ title: '插值计算' })
28      Column() {
29        Text('Curve.Linear')
30          .fontSize('12fp')
31          .fontColor('#FFFFFF')
32          .width(this.width)
33          .height(40)
34          .textAlign(TextAlign.Center)
35          .backgroundColor('#a320bf')
36          .animation({ duration: 2000, curve: Curve.Linear })
37        Text('Curve.EaseInOut')
38          .fontSize('12fp')
39          .fontColor('#FFFFFF')
40          .width(this.width)
41          .height(40)
42          .textAlign(TextAlign.Center)
43          .backgroundColor('#17d4be')
44          .animation({ duration: 2000, curve: Curve.EaseInOut })
45          .margin({ top: 10 })
46        Text('cubicBezier')
47          .fontSize('12fp')
48          .fontColor('#FFFFFF')
49          .width(this.width)
50          .height(40)
51          .textAlign(TextAlign.Center)
52          .backgroundColor('#d20d4d')
53          .margin({ top: 10 })
54          .animation({ duration: 2000, curve: Curves.cubicBezier(0.38, 0.2, 1.0, 0.5) })
55        Text('Curve.Smooth')
56          .fontSize('12fp')
57          .fontColor('#FFFFFF')
58          .width(this.width)
59          .height(40)
60          .textAlign(TextAlign.Center)
61          .backgroundColor('#0e2d8c')
62          .animation({ duration: 2000, curve: Curve.Smooth })
63          .margin({ top: 10 })
64        Text('Curves.spring')
65          .fontSize('12fp')
66          .fontColor('#FFFFFF')
67          .width(this.width)
68          .height(40)
69          .textAlign(TextAlign.Center)
70          .backgroundColor('#d4bb19')
71          .margin({ top: 10 })
72          .animation({ duration: 2000, curve: Curves.spring(30, 20, 20, 10) })
73      }
74      .alignItems(HorizontalAlign.Start)
75      .width('100%')
76      .constraintSize({ minHeight: 218, maxHeight: 402 })
77      .padding({ left: 12, right: 12, top: 22, bottom: 22 })
78
79      Text('GO!')
80        .borderRadius(20)
81        .fontColor('#FFFFFF')
82        .fontSize('12fp')
83        .fontWeight(FontWeight.Bolder)
84        .backgroundColor('#15587c')
85        .padding(10)
86        .onClick(() => {
87            this.flag ? this.width = '15%' : this.width = '85%'
88          this.flag = !this.flag
89        })
90    }
91    .height('100%')
92    .backgroundColor('#F1F3F5')
93    .padding({ left: '3%', right: '3%' })
94  }
95
96  pageTransition() {
97    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
98      .slide(SlideEffect.Bottom)
99      .opacity(0.0)
100
101    PageTransitionExit({ duration: 370, curve: Curve.Friction })
102      .slide(SlideEffect.Bottom)
103      .opacity(0.0)
104  }
105}