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 16@Component 17export struct Show { 18 @State scale1: number = 1 19 @State opacity1: number = 1 20 @State active: boolean = false 21 private select: number 22 23 pageTransition() { 24 if (this.select === 1) { 25 PageTransitionEnter({ duration: 1200, curve: Curve.Ease }) 26 .scale({ x: 0, y: 0 }) 27 .translate({ x: 200, y: -100 }) 28 PageTransitionExit({ duration: 1000, curve: Curve.Linear }) 29 .translate({ x: 0, y: 0 }) 30 .scale({ x: 2, y: 2 }) 31 } else if (this.select === 2) { 32 PageTransitionEnter({ duration: 1200 }) 33 .slide(SlideEffect.Left) 34 .scale({ x: 0.1, y: 0.2 }) 35 PageTransitionExit({ delay: 50 }) 36 .translate({ x: 100.0, y: 100.0 }) 37 .opacity(0) 38 } else if (this.select === 3) { 39 PageTransitionEnter({ duration: 1500, curve: Curve.Friction, delay: 5 }) 40 .slide(SlideEffect.Top) 41 .scale({ x: 100, y: 100 }) 42 PageTransitionExit({ delay: 50 }) 43 .slide(SlideEffect.Bottom) 44 .scale({ x: 0.1, y: 0.2 }) 45 .opacity(0.4) 46 } else if (this.select === 4) { 47 // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) 48 PageTransitionEnter({ duration: 1500, curve: Curve.Linear }) 49 .scale({ x: this.scale1 }) 50 .opacity(this.opacity1) 51 .onEnter((type: RouteType, progress: number) => { 52 this.scale1 = 1 53 this.opacity1 = progress 54 }) 55 // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) 56 PageTransitionExit({ duration: 1000, curve: Curve.Ease }) 57 .scale({ x: 0.1, y: 0.2 }) 58 .opacity(0.4) 59 .onExit((type: RouteType, progress: number) => { 60 this.scale1 = 1 - progress 61 this.opacity1 = 1 62 }) 63 } 64 } 65 66 build() { 67 } 68}