• 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 matrix4 from '@ohos.matrix4';
17
18@Component
19struct Card {
20  @State angle: number = 0
21  private startY: number = 0
22  @State rotateX: number = 0
23  @State rotateZ: number = 1
24
25  build() {
26    Row() {
27      Text('1')
28        .fontWeight(FontWeight.Bold)
29        .backgroundColor('black')
30        .fontColor('white')
31        .fontSize(200)
32        .width(200)
33        .height(200)
34        .lineHeight(200)
35        .textAlign(TextAlign.Center)
36    }
37    .clip(true)
38    .width(200)
39    .height(200)
40    .borderRadius(20)
41    .transform(matrix4.init(
42      [1, 0, 0, 0,
43      0, 1, 0, 0,
44      0, 0, 1, 1 / 1000,
45      0, 0, 0, 1]))
46    .rotate({
47      x: this.rotateX,
48      y: 0,
49      z: this.rotateZ,
50      angle: this.angle,
51      centerX: '50%',
52      centerY: '50%',
53    })
54    .onTouch((event: TouchEvent) => {
55      console.log(JSON.stringify(event.touches))
56      if (event.type == TouchType.Down) {
57        this.startY = event.touches[0].screenY
58      } else if (event.type == TouchType.Move) {
59        if (event.touches[0].x >= 200 || event.touches[0].x <= -200) {
60          this.rotateZ = 1, this.rotateX = 0
61          let x = event.touches[0].screenX
62          this.angle = 180 * (x - this.startY) / 100
63        } else if (event.touches[0].y >= 200 || event.touches[0].y <= -200) {
64          this.rotateZ = 0, this.rotateX = 1
65          let y = event.touches[0].screenY
66          this.angle = 180 * (y - this.startY) / 100
67        }
68      }
69    })
70  }
71}
72
73@Entry
74@Component
75struct MatrixTransitionSample {
76  build() {
77    Column() {
78      NavigationBar({ title: '矩阵变换' })
79      Row() {
80        Card()
81      }
82      .justifyContent(FlexAlign.Center)
83      .flexGrow(1)
84      .backgroundColor('#FFFFFF')
85      .width('100%')
86    }
87    .height('100%')
88    .backgroundColor('#F1F3F5')
89  }
90
91  pageTransition() {
92    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
93      .slide(SlideEffect.Bottom)
94      .opacity(0.0)
95
96    PageTransitionExit({ duration: 370, curve: Curve.Friction })
97      .slide(SlideEffect.Bottom)
98      .opacity(0.0)
99  }
100}