更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com前言好久不见，怀念最近的学习上网有点忙，搁置了一个半月，但我回来了！好好学习，天天向上(??_?)?最近看了官方文档中“转场动画(eTS)的使用”的案例，照做了一段时间，顺便做点笔记O(∩)O_∩)O概览效果图如下：文1.新项目DevEcoStudio下载安装成功后，打开DevEcoStudio，点击左上角的File，点击New，然后选择NewProject，选择EmptyAbility，然后点击Next，将项目命名为Animation，选择设备类型Phone，选择语言类型ets，选择APIVersion7，最后点击Finish。初始目录下各个文件夹和文件的作用：index.ets：用于描述UI布局、样式、事件交互、页面逻辑。app.ets：用于全局应用程序逻辑和应用程序生命周期管理。pages：用于存放所有组件页面。java：用于存放Java代码，比如Ability。resources：用于存放资源配置文件，如：国际化字符串、资源限制相关资源、rawfile资源等。2.构建主界面从上面的效果图可以看出，主界面主要由5个相同风格的功能菜单组成。我们可以将这些菜单提取到一个子组件Item中。1.添加图片将需要的图片添加到resources>rawfile目录下。2.新建子组件在index.ets中新建一个名为Item的子组件，声明子组件Item的UI布局并添加样式。创建一个包含图片和文字的Stack组件，然后添加文字信息和页面跳转事件，定义变量text和uri。其中text用于为Text组件设置文本信息，uri用于设置页面路由的地址。代码如下：@ComponentstructItem{privatetext:stringprivateuri:stringbuild(){Stack({alignContent:Alignment.Center}){Image($rawfile('image1.jfif')).objectFit(ImageFit.Cover).width('100%').height(100).borderRadius(15)Text(this.text).fontSize(20).fontWeight(FontWeight.Bold).fontColor(Color.Black)}.onClick(()=>{router.push({uri:this.uri})}).height(100).borderRadius(15).width('80%').margin({bottom:20})}}3.添加子组件Index组件在Index组件中添加Item组件，并向Item传递参数text和uri。由于尚未创建要重定向的页面，因此这里的uri暂时传递一个空字符串。@Entry@ComponentstructIndex{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Item({text:'页面之间的过渡：在底部滑入',uri:''})Item({text:'页面之间的过渡：自定义1',uri:''})Item({text:'页面之间的过渡：自定义2',uri:''})Item({text:'内部组件转换',uri:''})Item({text:'共享元素转换',uri:''})}.width('100%').height('100%').backgroundColor('#FFECECEC')}}三、实现页面间的转场1、文件结构在pages目录下新建一个包page，然后在page目录下鼠标右键新建一个包，名称为BottomTransition、CustomTransition和三个etsFullCustomTransition的文件。其中，BottomTransition用于实现“页面之间的过渡：在底部滑入”的动态效果；CustomTransition用于实现“页面之间的过渡：自定义1”的动态效果；FullCustomTransition用于实现“页面之间的过渡：自定义2”效果的动态效果。新建好后，打开config.json文件，会看到pages标签下自动添加了BottomTransition、CustomTransition、FullCustomTransition的路由地址。如果没有，请手动添加它们。tips：1、页面文件名不能使用组件名，如：Text.ets、Button.ets等。2、每个页面文件必须包含一个入口组件。3.页面列表中的第一页是应用程序的首页入口。2、实现页面跳转在主界面index.ets的Index组件中，将BottomTransition、CustomTransition、FullCustomTransition的路由地址赋值给对应Item的uri。importrouterfrom'@system.router';@Entry@ComponentstructIndex{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Item({text:'页面之间的过渡：底部滑动',uri:'pages/page/BottomTransition'})Item({text:'页面之间的过渡:自定义1',uri:'pages/page/CustomTransition'})Item({text:'页面之间的过渡:Custom2',uri:'pages/page/FullCustomTransition'})Item({text:'Transitionwithincomponent',uri:''})Item({text:'Sharedelementtransition',uri:''})}.width('100%').height('100%').backgroundColor('#FFECECEC')}}3.实现“底部滑入”动态效果，在BottomTransitionTransition参数中声明pageTransition方法配置，其中PageTransitionEnter用于自定义当前页面的进入效果，PageTransitionExit用于自定义当前页面的退出效果。这里我们将PageTransitionEnter和PageTransitionExit的slide属性设置为SlideEffect.Bottom，实现BottomTransition进入时从底部滑入，退出时从底部滑出。@Entry@ComponentstructBottomTransition{build(){Stack(){Image($rawfile('image2.jfif')).objectFit(ImageFit.Cover).width('100%').height('100%')}。width('100%').height('100%')}pageTransition(){PageTransitionEnter({duration:600,curve:Curve.Smooth}).slide(SlideEffect.Bottom)PageTransitionExit({duration:600,curve:Curve.Smooth}).slide(SlideEffect.Bottom)}}效果如下：4、实现“页面过渡：自定义1”动画效果。在CustomTransition.ets的CustomTransition组件中添加Stack组件和Image组件，并定义pageTransition方法。我实现的效果是淡入淡出。代码如下：@Entry@ComponentstructCustomTransition{build(){Stack(){Image($rawfile('image3.jfif')).objectFit(ImageFit.Cover).width('100%').height('100%')}.width('100%').height('100%')}pageTransition(){PageTransitionEnter({duration:1500,curve:Curve.Smooth}).opacity(0.2)PageTransitionExit({duration:1000,curve:Curve.Smooth}).opacity(0)}}效果如下：5.实现“页面过渡：自定义2”动画效果效果：页面进入域时淡入放大，同时顺时针旋转；退出场时淡出，逆时针旋转时缩小。在FullCustomTransition.ets的FullCustomTransition组件中添加Stack组件和Image组件，并定义pageTransition方法。为Stack组件添加opacity、scale、rotate属性，定义变量myProgress控制Stack组件的动画，在PageTransitionEnter和PageTransitionExit组件中动态改变myProgress的值。代码如下：@Entry@ComponentstructFullCustomTransition{@StatemyProgress:number=1build(){Stack(){Image($rawfile('image2.jfif')).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(){PageTransitionEnter({duration:1000,curve:Curve.Smooth}).onEnter((type:RouteType,progress:number)=>{this.myProgress=progress})PageTransitionExit({duration:1000,curve:Curve.Smooth}).onExit((type:RouteType,progress:number)=>{this.myProgress=1-progress})}}效果如下：4.实现组件内转场实现组件内转场，通过一个按钮控制组件的添加和移除，呈现动态效果。添加和删??除容器组件。组件转场主要是通过transition属性方法配置转场参数，添加或移除组件时会执行转场动画，需要animteTo才能生效。动画时长、曲线、延迟按照animateTo中的配置。1.在pages目录下新建一个文件，新建一个ets文件，命名为ComponentTransition2.新建一个子组件在ComponentTransition.ets文件中，新建一个ComponentItem子组件，并添加一个Stack组件和一个Image组件。在Stack中添加两个transition属性，分别用于定义组件的添加动画和移除动画。@ComponentstructComponentItem{build(){Stack({alignContent:Alignment.Center}){Image($rawfile('image1.jfif')).objectFit(ImageFit.Cover).width('100%').height(120).borderRadius(15)}.height(120).borderRadius(15).width('80%').margin({top:20}).transition({type:TransitionType.Insert,scale:{x:0.5,y:0.5},opacity:0}).transition({type:TransitionType.Delete,rotate:{x:0,y:1,z:0,angle:360},scale:{x:0,y:0}})}}3。添加子组件在ComponentTransition组件中定义一个变量来控制ComponentItems的添加和移除，在Button组件的onClick事件中添加animateTo方法使ComponentItem子组件的动画生效。@Entry@ComponentstructComponentTransition{@StateprivateisShow:boolean=falsebuild(){Column(){if(this.isShow){ComponentItem()}ComponentItem()Button("Toggle").onClick(()=>{animateTo({duration:600},()=>{this.isShow=!this.isShow;})}).height(45).width(200).fontColor(Color.Black).backgroundColor('rgb(203,155,192)').margin({top:20})}.padding({left:20,right:20}).backgroundColor('#FFECECEC').height('100%').width('100%')}}渲染为如下：五、实现元素共享过渡共享元素过渡是通过为组件设置sharedTransition属性来实现的。如果两个页面的组件配置了相同的id，则在转场过程中会执行共享元素转场。sharedTransition可以设置动画的持续时间、动画曲线和延迟。1.首先在pages目录下新建一个名为share的包，然后在share目录下创建名为ShareItem和SharePage的ets文件。其中ShareItem.ets用于显示小图，SharePage.ets用于显示大图。2.在ShareItem.ets中为Image组件设置sharedTransition属性，并将组件transitionid设置为“imageId”。importrouterfrom'@system.router'@Entry@ComponentstructShareItem{build(){Flex(){Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){Stack(){Image($rawfile('image3.jfif'))//设置共享元素过渡属性.sharedTransition('imageId',{duration:600,curve:Curve.Smooth,delay:100}).onClick(()=>{router.push({uri:'pages/share/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')}}3.在SharePage.ets中为Image组件设置sharedTransition属性，并将组件transitionid设置为“imageId”。@Entry@ComponentstructSharePage{build(){Stack(){Image($rawfile('image3.jfif'))//设置共享元素过渡properties.sharedTransition('imageId',{duration:1000,curve:Curve.Smooth,delay:100}).objectFit(ImageFit.Cover).width('100%').height('100%')}.width('100%').height('100%')}}4.最后别忘了在主界面添加相应的路由地址。importrouterfrom'@system.router';@Entry@ComponentstructIndex{build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Item({text:'页面之间的过渡：底部滑动',uri:'pages/page/BottomTransition'})Item({text:'页面之间的过渡:自定义1',uri:'pages/page/CustomTransition'})Item({text:'页面之间的过渡:Custom2',uri:'pages/page/FullCustomTransition'})Item({text:'Transitionwithinacomponent',uri:'pages/ComponentTransition'})Item({text:'SharedelementTransition',uri:'pages/share/ShareItem'})}.width('100%').height('100%').backgroundColor('#FFECECEC')}}效果图如下：tips:1.如果两个页面的组件都配置了相同的id，则在转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。2、在config.json文件中，在"launchType":"standard"后面添加如下代码，去掉左上角的标签栏。"icon":"$media:icon","description":"$string:mainability_description","label":"$string:entry_MainAbility","type":"page","launchType":"standard","metaData":{"customizeData":[{"name":"hwc-theme","value":"androidhwext:style/Theme.Emui.Light.NoTitleBar","extra":""}]}结论以上这次是我的小分享??！文章相关附件可点击下方链接下载原文https://harmonyos.51cto.com/resource/1600更多信息请访问：与华为官方鸿蒙科技共建社区https：//harmonyos.51cto.com
