了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com本文将学习如何设置OpenHarmony的转场动画主要包括转场页面的动画和组件的过渡动画。所谓过渡动画是指在两个页面之间切换或组件显示/隐藏时动画效果的显示。下图是本文案例的主界面。单击每个按钮将显示特定的过渡动画。1.底部滑动动画这个动画效果可以让A页面切换到B页面时，B页面从下往上显示。这是slide方法设置的动画效果，代码如下：pageTransition(){//Page入口组件：SlideEffect.Bottom设置为进入时从底部滑入，退出时滑出到底部。PageTransitionEnter({duration:600,curve:Curve.Smooth}).slide(SlideEffect.Bottom)//页面退出组件：SlideEffect.Bottom设置为进入时从底部滑入，退出时滑出到底部。PageTransitionExit({duration:600,curve:Curve.Smooth}).slide(SlideEffect.Bottom)}动画结束后，会显示下图所示的页面：2.页面自定义Transition1以下代码即可通过不同的特效方法自定义定义过渡动画，例如通过opacity方法设置透明动画，通过scale方法设置缩放动画。当页面开始播放时，此代码将不透明度从0.2更改为1，并将比例从0（未显示）更改为原始大小(1)。pageTransition(){//页面入口组件PageTransitionEnter({duration:600,curve:Curve.Smooth}).opacity(0.2)//入口期间不透明度从0.2到1.scale({x:0,y:0})//入市时x轴和y轴比例从0变为1//PageTransitionExit({duration:600,curve:Curve.Smooth}).translate({x:500,y:500})//当退出，x轴和y轴的偏移量为500}动画完成后，会显示下图所示的页面：3.页面自定义转场2这也是一个自定义的转场动画，用来控制透明度图像组件。进入场时，Image的透明度会从0变为1（逐渐显示），退出场时，Image的透明度会从1变为0（逐渐消失）。@Entry@ComponentstructFullCustomTransition{@StatemyProgress:number=1build(){Stack(){Image($rawfile('image1.jpg')).objectFit(ImageFit.Cover).width('100%').height('100%')}.width('100%').height('100%').opacity(this.myProgress).scale({x:this.myProgress,y:this.myProgress}).rotate({x:0,y:0,z:1,angle:360*this.myProgress})}pageTransition(){//页面入口组件：入口过程中会逐帧触发onEnter回调，以及输入参数是动画的规范化进度(0%--100%)PageTransitionEnter({duration:800,curve:Curve.Smooth}).onEnter((type:RouteType,progress:number)=>{this.myProgress=progress//页面入口样式myProgress从0变为1})//页面出口组件：入口过程中会逐帧触发onExit回调，入参为动画归一化进度（0%--100%)PageTransitionExit({duration:800,curve:Curve.Smooth}).onExit((type:RouteType,progress:number)=>{this.myProgress=1-progress//页面退出样式myProgress由1变为0})}}动画完成后会出现下图所示的页面显示：4.组件内的过渡这种动画是针对组件的，不是针对页面的既然是针对组件的，那么就需要在组件上调用transition方法。下面的代码完成了组件的插入和删除动画，即添加组件时，x轴和y轴缩放从0.5变为1，透明度从0变为1。移除组件时，它沿y轴旋转360度，x轴和y轴从1到0缩放。完整的实现代码如下：@ComponentstructComponentItem{build(){Stack({alignContent:Alignment.Center}){Image($rawfile('image3.png')).objectFit(ImageFit.Cover).width('100%').height(120).borderRadius(15)}.height(120).borderRadius(15).width('80%').padding({top:20})//x轴和y轴是添加组件时缩放从0.5变为1，透明度从0变为1.transition({type:TransitionType.Insert,scale:{x:0.5,y:0.5},opacity:0})//沿y旋转axis当组件被移除度时，x和y轴缩放比例从1变为0，.transition({type:TransitionType.Delete,rotate:{x:0,y:1,z:0,angle:360},scale:{x:0,y:0}})}}@Entry@ComponentstructComponentTransition{@StateprivateisShow:boolean=falsebuild(){Column(){if(this.isShow){ComponentItem()}ComponentItem()Button("Toggle").onClick(()=>{//执行动画，动画时长600msanimateTo({duration:600},()=>{this.isShow=!this.isShow;})}).height(45).width(200).fontColor(Color.Black).backgroundColor('rgb(181,222,224)').margin({top:20})}.padding({left:20,right:20}).backgroundColor('#FFECECEC').height('100%').width('100%')}}点击按钮后显示按钮效果如下图5.共享元素transitiontoallsharedelements，表示一个元素（组件）好像属于页面A和页面B，这个元素就变成了共享元素。一个典型的应用按钮是，分享的元素一开始显示为小图，点击后，会显示在整个页面上。下图是小图的效果。点击后全屏显示，效果如下图：这个功能由两个ets文件完成，其中ShareItem.ets是一张小图片，代码如下，转场共享元素的属性是通过sharedTransition方法设置的。从'@system.router'@Entry@ComponentstructShareItem{build(){Flex(){Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){Stack(){Image($rawfile('image2.jpg'))//设置共享元素过渡属性。sharedTransition('imageId',{duration:600,curve:Curve.Smooth,delay:100}).onClick(()=>{router.push({uri:'pages/SharePage'})}).objectFit(ImageFit.Cover).height('100%').width('100%').borderRadius(15)}.height('100%').width('100%')Text('点击查看共享元素过渡效果').fontSize(20).fontColor(Color.Black).fontWeight(FontWeight.Regular).margin({left:10,right:10})}.height(120).backgroundColor('rgb(181,222,224)').borderRadius(15).margin({top:20})}.width('100%').padding({left:16,right:16}).backgroundColor('#FFECECEC')}}另一个页面是SharePage，用于显示大图。代码如下。点击图片切换回小图(ShareItem)@Entry@ComponentstructSharePage{build(){Stack(){Image($rawfile('image2.jpg'))//设置共享元素过渡属性。sharedTransition('imageId',{duration:1000,curve:Curve.Smooth,delay:100}).objectFit(ImageFit.Cover).width('100%').height('100%')}.width('100%').height('100%')}}更多开源信息请访问：51CTO开源基础软件社区https://ost.51cto。com.
