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 router from '@ohos.router' 16 17@Entry 18@Component 19struct TraAnimationToSample { 20 @State progress: number = 0 21 @State receivedParams: object = {} 22 @State type: SlideEffect = SlideEffect.Left 23 @State color: string = '' 24 @State angle: number = 1 25 26 private aboutToAppear() { 27 this.receivedParams = router.getParams() 28 this.type = this.receivedParams['type'] 29 this.color = this.receivedParams['color'] 30 this.angle = this.receivedParams['angle'] 31 } 32 33 build() { 34 Column() { 35 Row() { 36 Text('PAGE') 37 .fontSize('50fp') 38 .opacity(0.4) 39 Text('TRANSITIONS') 40 .fontSize('50fp') 41 .fontColor('#FFFFFF') 42 } 43 44 Text('back to pageTransition') 45 .width(350) 46 .height(70) 47 .textAlign(TextAlign.Center) 48 .fontSize('30fp') 49 .fontWeight(FontWeight.Bold) 50 .fontColor('#CCCCCC') 51 .backgroundColor('#FFFFFF') 52 .onClick(() => { 53 router.back() 54 }) 55 .margin({ top: '20%' }) 56 } 57 .width('100%') 58 .height('100%') 59 .alignItems(HorizontalAlign.Center) 60 .justifyContent(FlexAlign.Center) 61 .rotate({ z: 1, angle: this.progress * this.angle }) 62 .scale({ x: this.progress, y: this.progress }) 63 .opacity(this.progress) 64 .backgroundColor(`${this.color}`) 65 } 66 67 pageTransition() { 68 PageTransitionEnter({ duration: 370, curve: Curve.Linear }) 69 .onEnter((type: RouteType, progress: number) => { 70 this.progress = progress 71 }).slide(this.type) 72 73 PageTransitionExit({ duration: 370, curve: Curve.Ease }) 74 .slide(this.type) 75 .onExit((type: RouteType, progress: number) => { 76 this.progress = progress 77 }) 78 } 79} 80 81