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 ComponentTransitionSample { 20 @State isShow: boolean = false 21 @State scale: { 22 x: number, 23 y: number 24 } = { x: 0, y: 0 } 25 @State opcity: number = 0 26 27 build() { 28 Column() { 29 NavigationBar({ title: '组件内转场' }) 30 Stack({ alignContent: Alignment.Center }) { 31 Button('Show Dailog') 32 .width(120) 33 .onClick(() => { 34 animateTo({ 35 duration: 1000, 36 tempo: 2, 37 curve: Curve.Friction, 38 delay: 0, 39 onFinish: () => { 40 animateTo({ 41 duration: 1000, 42 tempo: 2, 43 curve: Curve.Friction, 44 delay: 0, 45 onFinish: () => { 46 } 47 }, () => { 48 this.scale = ({ x: 1, y: 1 }) 49 this.opcity = 1 50 }) 51 } 52 }, () => { 53 this.isShow = !this.isShow 54 this.scale = ({ x: 1.25, y: 1.25 }) 55 this.opcity = 1 56 }) 57 }) 58 .backgroundColor(0x317aff) 59 .width(200) 60 .height(80) 61 ShowDialog({ isShow: $isShow, scale: $scale, opcity: $opcity }) 62 } 63 .width('100%').height('100%').backgroundColor(this.isShow ? 'rgba(0,0,0,0.1)' : 'white') 64 .onClick(() => { 65 if (this.isShow) { 66 animateTo({ 67 duration: 1000, 68 tempo: 2, 69 curve: Curve.Friction, 70 delay: 0, 71 onFinish: () => { 72 this.isShow = false 73 } 74 }, () => { 75 this.isShow = !this.isShow 76 this.opcity = 0 77 }) 78 } 79 }) 80 } 81 .height('100%') 82 .backgroundColor('#F1F3F5') 83 .padding({ left: '3%', right: '3%', bottom: 10 }) 84 } 85 86 pageTransition() { 87 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 88 .slide(SlideEffect.Bottom) 89 .opacity(0.0) 90 91 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 92 .slide(SlideEffect.Bottom) 93 .opacity(0.0) 94 } 95} 96 97@Component 98struct ShowDialog { 99 @Link isShow: boolean 100 @Link scale: { 101 x: number, 102 y: number 103 } 104 @Link opcity: number 105 106 private eixtAnimateTo() { 107 animateTo({ 108 duration: 1000, 109 tempo: 2, 110 curve: Curve.Friction, 111 delay: 0, 112 onFinish: () => { 113 this.isShow = false 114 } 115 }, () => { 116 this.isShow = !this.isShow 117 this.opcity = 0 118 }) 119 } 120 121 build() { 122 if (this.isShow) { 123 Column() { 124 Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10, left: 20 }) 125 Image($r('app.media.icon')).width(80).height(80) 126 Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 }) 127 Row({ space: 10 }) { 128 Button('cancel') 129 .onClick(() => { 130 this.eixtAnimateTo() 131 }).backgroundColor(0xffffff).fontColor(Color.Black) 132 Button('confirm') 133 .onClick(() => { 134 this.eixtAnimateTo() 135 }).backgroundColor(0xffffff).fontColor(Color.Red) 136 }.margin({ bottom: 10 }) 137 } 138 .width(300) 139 .height(200) 140 .backgroundColor(0xc1cbac) 141 .scale(this.scale) 142 .opacity(this.opcity) 143 .borderRadius(40) 144 .transition({ 145 type: TransitionType.Delete, 146 scale: { x: 1.25, y: 1.25, centerX: '0%', centerY: '50%' } 147 }) 148 .transition({ type: TransitionType.Insert, scale: { x: 0, y: 0, centerX: '50%', centerY: '50%' }, 149 rotate: { 150 x: 1, 151 y: 1, 152 z: 1, 153 centerX: '50%', 154 centerY: '50%', 155 angle: 300 156 }, 157 }) 158 } 159 } 160} 161