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 ShareElementTransitionFromSample { 20 build() { 21 Column() { 22 NavigationBar({ title: '共享元素转场' }) 23 Row() { 24 Navigator({ 25 target: 'pages/animation/shareElementTransition/shareElementTransitionTo', 26 type: NavigationType.Push 27 }) { 28 Image($r('app.media.heart')) 29 .width('100%') 30 .height('100%') 31 .objectFit(ImageFit.Contain) 32 .sharedTransition('sharedImage', { duration: 370 }) 33 }.width('20%') 34 35 Text('sharedTransition') 36 .textAlign(TextAlign.Center) 37 .fontSize(20) 38 .fontColor('#000') 39 .height(40) 40 } 41 .height('11.1%') 42 .alignItems(VerticalAlign.Center) 43 .justifyContent(FlexAlign.Start) 44 .borderRadius(24) 45 .padding({ left: '3.6%', right: '5.4%', top: 12, bottom: 12 }) 46 .backgroundColor('#ffffff') 47 } 48 .height('100%') 49 .alignItems(HorizontalAlign.Center) 50 .backgroundColor('#F1F3F5') 51 .padding({ left: '3%', right: '3%', bottom: 10 }) 52 } 53 54 pageTransition() { 55 PageTransitionEnter({ duration: 370, curve: Curve.Friction }) 56 .slide(SlideEffect.Bottom) 57 .opacity(0.0) 58 59 PageTransitionExit({ duration: 370, curve: Curve.Friction }) 60 .slide(SlideEffect.Bottom) 61 .opacity(0.0) 62 } 63}