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 TitleBar from '../common/TitleBar' 16 17@Component 18struct ComponentItem { 19 build() { 20 Stack({ alignContent: Alignment.Bottom }) { 21 Image($r('app.media.component_transition')) 22 .objectFit(ImageFit.Cover) 23 .width('100%') 24 .height('100%') 25 .borderRadius(15) 26 } 27 .width('100%') 28 .height('60%') 29 // 组件添加时从底部滑出，透明度从0到1.0 30 .transition({ type: TransitionType.Insert, translate: { x: 0, y: 500, z: 0 }, opacity: 1.0 }) 31 // 组件移除时沿x轴旋转180度 32 .transition({ type: TransitionType.Delete, rotate: { x: 1, y: 0, z: 0, angle: 180 } }) 33 } 34} 35 36@Entry 37@Component 38struct ComponentTransition { 39 @State isShow: boolean = false 40 41 build() { 42 Column() { 43 TitleBar({ hasBackPress: true }) 44 Button(this.isShow ? $r('app.string.hide') : $r('app.string.show')) 45 .key('show') 46 .onClick(() => { 47 // 执行动效，动效时长600ms 48 animateTo({ duration: 600 }, () => { 49 this.isShow = !this.isShow 50 }) 51 }) 52 .height(45) 53 .width(200) 54 .fontColor(Color.Black) 55 .backgroundColor('#F0FFF0') 56 .margin({ top: 20 }) 57 Stack({ alignContent: Alignment.Bottom }) { 58 if (this.isShow) { 59 ComponentItem() 60 } 61 } 62 .layoutWeight(1) 63 .padding(20) 64 } 65 .height('100%') 66 .width('100%') 67 } 68} 69 70