第12次课 动画-转场动画与路径动画

《鸿蒙应用安全开发》在线开放课程项目3设计闹钟程序-动画主讲：本课程团队目录Contents项目3设计闹钟程序-动画一、转场动画二、路径动画三、总结与实践一、

转场动画组件内转场动画通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。属性参数transition：参数类型为TransitionOptions，功能是设置组件插入显示和删除隐藏的过渡效果。其默认值为：不设置任何过渡效果时，默认有透明度从0到1的过渡效果。若设置了其他过渡效果，以设置的过渡效果为准。转场动画包括组件内转场动画、页面间转场动画和共享元素转场动画。1.1、组件内转场动画实例实例-通过控制页面内某个组件的显示与消失来实现//TransitionExam.ets@Entry@ComponentstructTransitionExam{@Stateflag:boolean=true@Stateshow:string='消失'build(){Column(){Button(this.show).width(80).height(30).margin(30).onClick(()=>{//点击按钮控制图片的显示和消失animateTo({duration:1000},()=>{if(this.flag){this.show='显示'}else{this.show='消失'}this.flag=!this.flag})})if(this.flag){//图片的显示和消失配置为不同的过渡效果Image($r("app.media.img30600")).width(300).height(600).transition({type:TransitionType.Insert,//指定生效场景为插入显示场景scale:{x:0,y:1.0}//设置缩放效果}).transition({type:TransitionType.Delete,//指定生效场景为删除隐藏场景rotate:{angle:180}//设置旋转效果})}}.width('100%')}}1.2、页面间转场动画实例页面间转场动画是在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。//index.etsimportrouterfrom'@ohos.router';//导入页面路由模块@Entry@ComponentstructIndex{@Statescale1:number=1@Stateopacity1:number=1build(){Column(){Image($r('app.media.img30600'))//图片存放在media文件夹下.width('100%').height('100%').onClick(()=>{router.pushUrl({url:'pages/PageTransitionExam'},router.RouterMode.Standard,(err)=>{

if(err){

console.error(`未能跳转。出错代码是${err.code},出错信息是${err.message}`);return;}('成功跳转');});})}.scale({x:this.scale1}).opacity(this.opacity1)}pageTransition(){//完全自定义转场过程的效果PageTransitionEnter({duration:1200,curve:Curve.Linear}).onEnter((_type:RouteType,progress:number)=>{this.scale1=1this.opacity1=progress})//进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0%-100%)PageTransitionExit({duration:1500,curve:Curve.Ease}).onExit((_type:RouteType,progress:number)=>{this.scale1=1-progressthis.opacity1=1})//退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0%-100%)}}实例：通过一个页面跳转到另一个页面来实现1.2、页面间转场动画实例//PageTransitionExam.etsimportrouterfrom'@ohos.router';//导入页面路由模块@Entry@ComponentstructPageTransitionExam{@Statescale2:number=1@Stateopacity2:number=1build(){Column(){Image($r('app.media.img30601'))//图片存放在media文件夹下.width('100%').height('100%').onClick(()=>{router.pushUrl({url:'pages/Index'},router.RouterMode.Standard,(err)=>{if(err){console.error(`未能跳转。出错代码是${err.code},出错信息是${err.message}`);return;}

('成功跳转');});})}.width('100%').height('100%').scale({x:this.scale2}).opacity(this.opacity2)}

pageTransition(){//完全自定义转场过程的效果PageTransitionEnter({duration:1200,curve:Curve.Linear}).onEnter((_type:RouteType,progress:number)=>{this.scale2=1this.opacity2=progress})PageTransitionExit({duration:1500,curve:Curve.Ease}).onExit((_type:RouteType,progress:number)=>{this.scale2=1-progressthis.opacity2=1})}}实例：通过一个页面跳转到另一个页面来实现1.3、共享元素转场动画实例共享元素转场动画通过设置组件的sharedTransition属性将该组件标记为共享元素并设置对应的共享元素转场动效。build(){Column(){Image($r('app.media.startIcon')).width(50).height(50).sharedTransition('sharedImage',{duration:800,curve:Curve.Linear,delay:100}).padding({left:20,top:20}).onClick(()=>{this.active=true;router.pushUrl({url:'pages/SharedTransitionExamSecond'},router.RouterMode.Standard,(err)=>{if(err){console.error(`未能跳转。出错代码是${err.code},出错信息是${err.message}`);return;}('成功跳转');});})}}}实例：通过对页面间标记为共享元素的组件设置动态效果来实现//SharedTransitionExam.etsimportrouterfrom'@ohos.router';//导入页面路由模块@Entry@ComponentstructSharedTransitionExam{@Stateactive:boolean=false1.3、共享元素转场动画实例//SharedTransitionExamSecond.ets@Entry@ComponentstructSharedTransitionExamSecond{build(){Stack(){Image($r('app.media.startIcon)).width(150).height(150).sharedTransition('sharedImage',{duration:800,curve:Curve.Linear,delay:100})}.width('100%').height('100%')}}实例：通过对页面间标记为共享元素的组件设置动态效果来实现二、

路径动画其接口如下：.motionPath({path:string,from?:number,to?:number,rotatable?:boolean})其必填参数：Path：设置位移动画的运动路径，使用svg路径字符串。path中支持使用start和end进行起点和终点的替代，如：'Mstart.xstart.yL5050Lend.xend.yZ'。from：设置运动路径的起点，其取值范围为[0,1]。to：设置运动路径的终点，其取值范围为[0,1]。rotatable：设置是否跟随路径进行旋转。路径动画通过motionPath属性配置运动路径参数而形成的位移动效，可以显著提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。2.1、路径动画实例实例-通过设置组件的运动路径而触发位移效果来实现//MotionPathExam.ets@Entry@ComponentstructMotionPathExam{@Statetoggle:boolean=truebuild(){Column(){Button('点击我').margin(50)//执行动画：从起点移动到(300,200)，再到(300,500)