本系列是windows系统下、采用ArkTS语言、ArkUI框架、deveco studio编译器学习纯鸿蒙软件研发，采用API version 9进行。本小节主要包括页面路由和动画相关，其中页面路由包括路由的配置，页面栈、通过路由配置参数控制页面栈页面数量、解决页面栈满溢、页面路由跳转、返回、传参以及离开页面的弹窗确认等使用方式。动画包括分类、属性动画、显示动画、组件转场动画、页面间共享元素转场动画、页面间转场动画的使用方式。纯小白，一步步学习，记录一下过程便于查询。

1 页面路由

1.1页面路由的配置

页面路由是指在应用程序中实现不同页面之间的跳转和数据传递。通过路由无论是实现页面跳转还是参数传递均需要进行路由配置。

（1）新建Page：会自动配置路由。

（2）新建ArkTS文件：需要手动配置路由。

新建ArkTS文件

手动配置路由：首先找到src>main>resources>base>profile>main_pages.json文件，写入新建ArckTS文件的相对路径。

1.2 页面栈+路由使用模式

页面栈：鸿蒙保存页面的栈结构空间。

1.2.1 页面栈实现各种页面切换场景

（栈的特点：先进后出：谁在栈顶就显示哪个界面）。便于界面切换的功能实现（返回当上一个页面——移出栈顶界面，页面跳转——创建页面并压入栈顶。）

页面栈：根据栈的特性，先进后出，此时显示的是位于栈顶的页面n。

返回上一个页面：一般是使用了router.back()接口，会将当前显示页面移除栈，页面跳转，将上一个页面变成栈顶显示。

页面跳转：一般使用router.PushUrl()接口不带Mode参数：会创建新页面并压入栈顶。

1.2.2 页面跳转模式控制页面栈存储页面数量

鸿蒙页面栈的最大容量上限为32个页面，开发人员在不需要页面存入页面栈时可以使用router.clear()方法清空页面栈，释放内存。

控制页面栈的页面数量的方式：在页面跳转时使用不同的模式，页面跳转有两种模式：

router.pushUrl()：目标页不会替换当前页面，而是新建页面并将页面压入页面栈，可以使用router.back()返回当前页。

router.replaceUrl()：目标页替换当前页，当前页会被销毁并释放资源，无法使用router.back()不带参数直接返回。

★★★★★Tip：开发过程中可以根据实际情况选择使用，确保页面栈不要达到上限报错，而不是达到上限使用clear清空。clear要慎用！

★★★★★★Tip：注意无论是pushUrl还是replaceUrl，有返回值的写法时返回的是一个Promise对象，无返回值的写法时具有异步回调函数作为参数，在异步回调中可以得到结果，所以无论是pushUrl还是replaceUrl本质上都是异步的。可以使用.then方法实现跳转或替换页面后想要执行的业务。

1.2.3 页面创建模式解决在两个页面来回横跳导致页面栈满溢

按照上述方式如果使用replaceUrl接口将可能出现无法返回上一个界面的问题，而如果使用PushUrl则可能会导致页面栈满溢，例如在两个页面之间来回横跳，使用PushUrl则会不断创建这两个页面来回压入页面栈，最终导致页面栈满溢。

解决办法为在创建页面时，通过创建模式参数，控制跳转时是否判断页面栈中已有目标页面，而非直接新建目标页压入栈顶。因此在使用PashUrl接口中具有参数RouterMode，值为router.RouterMode枚举类，具有以下两种值：

Standard：标准实例模式，每次跳转都会新建一个页面压入栈顶，默认为该模式。

Single：单实例模式，如果目标页已经在栈中，则离栈顶最近的同Url页面会被移动到栈顶并重新加载。

★★★★★★Tip：按照上述的描述：除了不需要存储入页面栈的页面可以使用replacrUrl替换，节省页面栈空间外，其他页面跳转建议适合场景下尽量使用PushUrl+Single方式，确保页面可以返回的同时，防止创建重复界面，导致页面栈满溢。

1.3 页面路由使用

使用页面路由可以实现页面的创建、销毁、跳转、切换、返回以及页面栈的清空等功能。使用步骤和实例如下。

1.3.1 页面路由的引入

使用页面路由第一步必须为导入HarmonyOS提供的Router模块。引入示例如下：

import router from '@ohos.router';

1.3.2 利用router实现跳转、返回

利用router实现页面跳转

（1）不需要存储入栈直接跳转的场景（例如软件的注册、登录等界面）


router.replaceUrl(//跳转后当前页面会被销毁，不会存入栈中
    {
        url:页面路由
        params:路由传递的参数（可选）
    },
    router.RouterMode.Single,//创建页面的模式，不写则默认为standard模式
    err=>{
        if(err){
            //路由跳转失败的操作
        }
    }
)

（2）需要存储入栈可返回的场景

初始页面未被创建过时可以使用Standard模式，也可以使用Single模式，该模式下判断发现页面未被创建过（页面栈中不存在），也会去创建页面不会抛出异常。使用方式如下：


router.pushUrl(
    {
        url:页面路由
        params:路由传递的参数（可选）
    },
    router.RouterMode.Single,//创建页面的模式，不写则默认为standard模式
    err=>{//路由异常响应回调函数
        if(err){
            //路由跳转失败的操作
            //路由失败的原因可能有：
                --100001：内部错误，可能是新页面渲染失败
                --100002：路由地址错误
                --100003：路由栈中页面数量超过32，满溢
        }
    }
)

利用router返回界面

（1）直接返回：路由返回可以不带参数，直接router.back()，会返回到跳转到该页面的页面。

（2）带参数返回：返回到指定页，并携带参数。


router.back({
    url:指定页面得路由
    params:传递的参数
})

1.4 利用router传参

路由传参是在页面跳转时，进行参数传递。传递方式为在调用Router模块的方法时，添加一个params参数，并指定一个对象作为参数。并在跳转目标页面使用Router模块指定传递参数的键值接收参数。传递和接收参数示例如下：

1.5 利用路由实现离开页面的弹窗确认

在应用中，会有离开页面时提示“离开页面将不会对您的数据做任何保存，是否离开”的应用场景，这种场景乐意通过路由来实现。

实现方式为使用router的showAlertBeforeBackPage()接口。传递的参数为一个对象，包含message参数用于填写提示信息，会自动生成取消和确定两个按钮，如果用户选择取消，则不会执行后面的back()及其他代码，点击确定则继续顺序执行。

测试代码：


Image($r('app.media.back')).width(24).height(24).margin({right:5})
        .onClick(() => {
          router.showAlertBeforeBackPage({
            message:"返回界面将不会保存您的任何操作，是否返回？"//提示消息
          })
          //如果点击取消，则不会执行该函数内之后的任何代码，如果点确定则会继续执行
          router.back()
        })

实现效果：

2 动画

在ArkUI中，比较常见的动画有属性动画、显示动画、组件转场动画。ArkUI中实现动画的

方式是改变属性值且指定动画参数，当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。其关键在于组件初始状态、结束状态以及动画播放的关键信息如时长、速度等。

2.1 动画的分类

2.1.1 按页面分类

2.1.2 按基础能力分类

2.2 属性动画

属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width、height、Opacity、backgroundColor、scale、rotate、translate等属性变更时，可以实现渐变过渡效果。animation属性会监控组件的样式变化，一旦发现变化就会根据，起始状态+结束状态+animation中设置的动画参数，去自动填充起始到结束的每一帧画面，从而实现动画的渐变过渡效果。

2.2.1 参数解析

animation属性具有一个对象作为参数，通过这个参数来控制动画效果，这个对象类型的参数具有以下属性，均为可选项：

duration：设置动画时长，默认值1000，单位ms，数据类型为number。
tempo：动画播放速度，数值越大，速度越快，默认值1，数据类型为number。
curve：设置动画曲线，默认值为Curve.EaseInout（平滑开始和结束），数据类型为string或Curve枚举类或ICurve枚举类。Curve具有以下值：
Linear：动画从头到尾速度相同，匀速
Ease：动画以低速开始，然后加快，在结束前变慢。
EaseIn：动画以低速开始
EaseOut：动画以低速结束。
EaseInOut：动画以低速开始和结束。
FastOutSlowIn：标准曲线
LinearOutSlowIn：减速曲线
FastOutLinearIn：加速曲线
ExtremeDeceleration：急缓曲线
Sharp：锐利曲线
Rhythm：节奏曲线
Smooth：平滑曲线
Friction：阻尼曲线。
delay：设置动画延迟执行的时长。默认值为0，单位：ms，数据类型为number。
iterations：设置播放次数，取值范围[-1,+∞]，默认值为1，值为-1时无限次播放（值为-1时时在显示动画中永远不会触发onFinsh函数），数据类型为number。（可以实现多次播放，如果不配合playMode参数播放，回退到初始位置时是没有动画的并且回退不会被计数为动画播放次数）。
playMode：设置动画播放模式，默认值为PlayMode.Normal，播放完成后从头开始播放，数据类型为PlayMode枚举类。
Normal：动画正常播放
Reverse：动画反向播放
Alternate：动画在奇数次正向播放，偶数次反向播放（多次播放起始到终点，终点回退到起始均有动画，但是终点回退到起始也会被计数为播放了一次）。
AlternateReverse：动画在奇数次反向播放，偶数次正向播放。
onFinish：状态回调，动画播放完成时触发，数据类型为无返回值的函数：{}=>void。

2.2.2 测试代码

对Curve枚举类取值不同效果不同，测试代码如下：


//一个自定义的标题组件
import router from '@ohos.router'
@Component
export default struct PageTitle{
  title:string
  build(){
    Row(){
      Image($r('app.media.back')).width(24).height(24).margin({right:5})
        .onClick(() => {
          router.showAlertBeforeBackPage({
            message:"返回界面将不会保存您的任何操作，是否返回？"//提示消息
          })
          //如果点击取消，则不会执行该函数内注释后的任何代码，如果点确定则会继续执行
          router.back()
        })
      Text(this.title).fontSize(26).fontColor(Color.White)
    }.width('100%')
    .padding({left:20,top:10,bottom:10})
    .justifyContent(FlexAlign.Start)
    .backgroundColor("#044444")
  }
}
//属性动画测试效果
import PageTitle from '../view/PageTitle'
@Entry
@Component
struct CommonAnimation{
  curvea:Curve[]=[Curve.Linear,Curve.Ease,Curve.EaseIn,Curve.EaseOut,Curve.EaseInOut,
 Curve.FastOutSlowIn,Curve.LinearOutSlowIn,Curve.ExtremeDeceleration,
  Curve.Sharp,Curve.Rhythm,Curve.Smooth,Curve.Friction]
  @State positionTest:number=20;
  build() {
    Row() {
      Column({space:4}) {
        //1.测试curve值不同的区别，根据值的不同动画效果不同。
        PageTitle({title:"属性动画"})
        Button('播放').onClick(() => {
          this.positionTest=300
        })
        Column({space:4}){
          Text().position({x:0,y:0})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Linear}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:30})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Ease}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:60})
            .width(this.positionTest).animation({duration:7500,curve:Curve.EaseIn}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:90})
            .width(this.positionTest).animation({duration:7500,curve:Curve.EaseOut}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:120})
            .width(this.positionTest).animation({duration:7500,curve:Curve.EaseInOut}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:150})
            .width(this.positionTest).animation({duration:7500,curve:Curve.FastOutSlowIn}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:180})
            .width(this.positionTest).animation({duration:7500,curve:Curve.FastOutLinearIn}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:210})
            .width(this.positionTest).animation({duration:7500,curve:Curve.LinearOutSlowIn}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:240})
            .width(this.positionTest).animation({duration:7500,curve:Curve.ExtremeDeceleration}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:270})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Sharp}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:300})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Rhythm}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:330})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Smooth}).height(20).backgroundColor("#FF0000")
          Text().position({x:0,y:360})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Friction}).height(20).backgroundColor("#FF0000")
          //使用onFinsh更改变量值，可以实现类似动画回退的效果
          Text().position({x:0,y:390})
            .width(this.positionTest).animation({duration:7500,curve:Curve.Friction,onFinish:()=>{this.positionTest=20}}).height(20).backgroundColor("#FF0000")
        }.width('100%')
        .layoutWeight(1)
      }
    }
  }
}

2.2.3 实现效果

实现效果：

其中一个动画使用onFinsh修改变量值可以实现类似于动画回退的效果：

★★★★★★Tip：animation属性必须要放在需要监控实现动画的属性之后，否则无效。

★★★★★★Tip：animation属性并不是对所有属性都有效果。

2.3 显示动画

2.3.1 基础语法

显示动画是通过全局animateTo函数来修改组件属性，实现属性变化时的渐变过渡效果。

显示动画和属性动画虽然实现方式不同，但是原理均为通过监控组件的样式变化，当样式变更后填充样式起终之间的每一帧画面，从而实现渐变过渡效果。

animateTo函数语法结构如下：


animateTo(
    {duration:1000,……}//用于编写动画播放参数，和属性动画相同
    ()=>{//箭头函数：修改组件属性关联的状态变量。
    }
)

2.3.2 测试代码


import PageTitle from '../view/PageTitle'
@Entry
@Component
struct CommonAnimation{
  curvea:Curve[]=[Curve.Linear,Curve.Ease,Curve.EaseIn,Curve.EaseOut,Curve.EaseInOut,
 Curve.FastOutSlowIn,Curve.LinearOutSlowIn,Curve.ExtremeDeceleration,
  Curve.Sharp,Curve.Rhythm,Curve.Smooth,Curve.Friction]
  @State positionTest:number=20;
  build() {
    Row() {
      Column({space:4}) {
        //1.测试curve值不同的区别，根据值的不同动画效果不同。
        PageTitle({title:"属性动画"})
        Row({space:10}){
          Button('播放').onClick(() => {
            //全局通用函数，调用即可。
            animateTo({
              //存在缺陷：对于同一个组件、修改同一个变量、控制多个组件的动画，动画播放参数不同时该方法无法适用。
              //优势：更加灵活，对于不同组件、控制同一个组件可以添加不同的播放参数实现不同的播放效果
              duration:7500,
              curve:Curve.Linear
            },
              ()=>{
                this.positionTest=300
              })
          })
          Button('回退').onClick(() => {
            //全局通用函数，调用即可。
            animateTo({
              //存在缺陷：对于同一个组件、修改同一个变量、控制多个组件的动画，动画播放参数不同时该方法无法适用。
              //优势：更加灵活，对于不同组件、控制同一个组件可以添加不同的播放参数实现不同的播放效果
              duration:7500,
              curve:Curve.FastOutSlowIn
            },
              ()=>{
                this.positionTest=20
              })
          })
        }
 
        //属性动画
        // Column({space:4}){
        //   Text().position({x:0,y:0})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Linear}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:30})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Ease}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:60})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.EaseIn}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:90})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.EaseOut}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:120})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.EaseInOut}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:150})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.FastOutSlowIn}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:180})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.FastOutLinearIn}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:210})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.LinearOutSlowIn}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:240})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.ExtremeDeceleration}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:270})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Sharp}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:300})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Rhythm}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:330})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Smooth}).height(20).backgroundColor("#FF0000")
        //   Text().position({x:0,y:360})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Friction}).height(20).backgroundColor("#FF0000")
        //   //使用onFinsh更改变量值，可以实现类似动画回退的效果
        //   Text().position({x:0,y:390})
        //     .width(this.positionTest).animation({duration:7500,curve:Curve.Friction,onFinish:()=>{this.positionTest=20}}).height(20).backgroundColor("#FF0000")
        // }.width('100%')
        // .layoutWeight(1)
 
        //显示动画
        Text().position({x:0,y:100})
            .width(this.positionTest).height(20).backgroundColor("#FF0000")
      }
    }
  }
}

2.3.3 实现效果

根据代码可以看出：

属性动画可以实现同一个组件修改同一个变量实现多个组件不同动画参数的动画效果。

显示动画可以通过多个组件修改同一个变量实现同一个组件不同动画参数的动画效果。

★★★★★★★Tip：属性动画animation必须设置在需要监听改变得属性之后，否则不生效。

2.4 组件转场动画

组件转场动画是组件在插入或移除时得过渡动画，通过组件得transition属性来配置。

2.4.1 参数解析

transition和animation属性一样，具有一个对象作为参数，通过这个参数来控制组件转场得动画小效果，这个对象类型的参数具有以下属性，均为可选项：

type：类型，默认包括组件的新增和删除，默认是ALL，数据类型为TransitionType枚举类。包括以下值：
Insert：新增
Delete：删除
ALL：新增和删除
opacity：不透明度，为插入时起点和删除时终点得值，默认值：1，取值范围：[0,1]，数据类型为number。
translate：平移效果，为插入时起点和删除时终点得值，参数为一个对象，包括x，y，z，分别为横向、纵向、竖向得平移距离。距离是相对于组件左上角的距离。
scale：缩放效果，为插入时起点和删除时终点得值。参数为一个都对象，包括x，y，z，centerX，centerY，分别表示横向、纵向、竖向得放大倍数（或缩小比例）以及缩放中心点，缩放中心点默认为“50%”，为0时是组件得左上角。
rotate：旋转效果，参数为一个对象，包括x，y，z，angle，centerX，centerY，起终angle是旋转角度。

★★★★★★Tip：为插入时起点和删除时终点得值的意思是：例如透明度为0，当组件插入的时候初始透明度为0（“所谓的插入时起点”），逐渐变为不透明，透明度为1，当组件移除的时候时候初始透明度为1，逐渐变为透明，透明度为0（“所谓的删除时终点”）

★★★★★★Tip：组件转场动画并须通过显示动画的animateTo函数控制条件渲染的boolean类型变量改变才会生效。

2.4.2 测试代码及代码解析


import PageTitle from '../view/PageTitle'
@Entry
@Component
struct CommonAnimation{
  curvea:Curve[]=[Curve.Linear,Curve.Ease,Curve.EaseIn,Curve.EaseOut,Curve.EaseInOut,
 Curve.FastOutSlowIn,Curve.LinearOutSlowIn,Curve.ExtremeDeceleration,
  Curve.Sharp,Curve.Rhythm,Curve.Smooth,Curve.Friction]
  @State positionTest:number=20;
  @State isShow:boolean=false;
  build() {
    Row() {
      Column({space:4}) {
        //1.测试curve值不同的区别，根据值的不同动画效果不同。
        PageTitle({title:"属性动画"})
        Row({space:10}){
          Button('播放').onClick(() => {
            //全局通用函数，调用即可。
            animateTo({
              //存在缺陷：对于同一个组件、修改同一个变量、控制多个组件的动画，动画播放参数不同时该方法无法适用。
              //优势：更加灵活，对于不同组件、控制同一个组件可以添加不同的播放参数实现不同的播放效果
              duration:7500,
              curve:Curve.Linear
            },
              ()=>{
                this.positionTest=300
                //组件插入
                this.isShow=true
              })
          })
          Button('回退').onClick(() => {
            //全局通用函数，调用即可。
            animateTo({
              //存在缺陷：对于同一个组件、修改同一个变量、控制多个组件的动画，动画播放参数不同时该方法无法适用。
              //优势：更加灵活，对于不同组件、控制同一个组件可以添加不同的播放参数实现不同的播放效果
              duration:7500,
              curve:Curve.FastOutSlowIn,
            },
              ()=>{
                this.positionTest=20
                //组件移除
                this.isShow=false
              })
          })
        }
 
        //显示动画
        Text().position({x:0,y:100})
            .width(this.positionTest).height(20).backgroundColor("#FF0000")
 
        //组件转场动画
        if(this.isShow){
          Text().position({x:100,y:200})
            .width(200).height(200).backgroundColor("#FF0000")
            .transition({
              //该动画的效果是：
              // 在组件插入时从透明逐渐变为不透明，从-360逐渐转为0，从看不见缩放比0，0逐渐放大到缩放比1，1。
              //在组件删除时从不透明逐渐变为透明，从0逐渐旋转到-360，从1，1逐渐缩小到看不见0，0
              opacity:0,
              rotate:{angle:-360},
              scale:{x:0,y:0}
            })
        }
      }
    }
  }
}

代码解析：只有1+2或者3+2才会触发组件插入或移除的动画，也就是说组件转场动画需要配合显示动画才能生效。

2.4.3 实现效果

播放实现组件插入，回退实现组件移除。

2.5 页面间共享元素转场动画

2.5.1 基础语法

共享元素：在多个页面中共同拥有的元素。页面间共享元素转场动画通过sharedTransition属性实现。语法结构如下：


.sharedTransition(
//id
"",
//页面转场动画参数，包括动画时长、动画曲线等。
{
 
})

2.5.2 参数解析

sharedTransition属性具有两个参数：参数一id是转场时两个界面之间的共享元素确定并对应的标志，在另一个页面如果具有该元素，设置转场时，id必须相同；参数二是页面转场的动画参数，包括动画时长、动画曲线等。且参数二中具有type参数，其值为SharedTransitionEffectType枚举类，具有以下两个值：

Static：静态的，当跳转的两个页面其中一个具有元素，另一个不具有该元素时，可采用该类型实现元素的动画效果，并且此时的id由于另一个页面不存在该元素，所以无需和谁相同，只需要避免与其他动画冲突即可。
Exchange：两个页面中具有共同元素时，配置该类型，页面的两个共享元素通过相同的id实现一一对应，实现共享元素的转场动画效果。

2.5.3 测试代码及代码解析


//初始页面1：
build(){
    Column({space:30}) {
//页面一存在该元素，页面二不存在，可以通过设置type为Static模式实现页面跳转时该元素逐渐消失得动画
      Text("页面间共享元素转场消失")
        .opacity(1)
        .fontSize(20)
        .sharedTransition("shared3",{
          duration:2000,
          curve:Curve.Linear,
          type:SharedTransitionEffectType.Static
        })
//页面一和页面二共享的元素
      Image($r('app.media.blueberry'))
        .width(50)
        .height(50)
        .opacity(0.2)
        .borderRadius(25)
      //页面转场动画:两个参数，参数一为一个id，参数二为动画效果
        .sharedTransition(
          //确定页面转场时共享元素得对应是通过参数一，也就是id确定的
          'shared1',//并且转场得两个界面之间的共享元素的id必须相同
          {
            duration:2000,
            curve:Curve.Linear,
            //当两个页面具有共享元素时，配置Exchange类型的共享元素转场
            type:SharedTransitionEffectType.Exchange
        })
    }
    .width("100%")
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .padding(30)
    .onClick(() => {
      router.pushUrl({
        url:"common/ShardTranslationDest"
      })
    })
}
//跳转页面二
build(){
    Column({space:30}) {
      页面二存在该元素，页面一不存在，可以通过设置type为Static模式实现页面跳转时该元素逐渐显示得动画
      Text("页面间共享元素转场显示")
        .opacity(1)
        .fontSize(20)
        .sharedTransition("shared2",{
          duration:2000,
          curve:Curve.Linear,
          type:SharedTransitionEffectType.Static
      })
//页面一和页面二共享的元素
      Image($r('app.media.blueberry'))
        .width(150)
        .height(150)
        .opacity(1)
        .borderRadius(75)
        .sharedTransition(
          //确定页面转场时共享元素得对应是通过参数一，也就是id确定的
          'shared1',//并且转场得两个界面之间的共享元素的id必须相同
          {
            duration:2000,
            curve:Curve.Linear,
            //当两个页面具有共享元素时，配置Exchange类型的共享元素转场
            type:SharedTransitionEffectType.Exchange
          })
    }.width("100%")
    .height('100%')
    .padding(30)
    .onClick(() => {
      router.back()
    })
}

2.5.4 实现效果

2.6 页面间转场动画

2.6.1 基础语法

页面间转场动画主要是指两个页面间跳转，一个页面消失，另一个页面出现，可以通过配置两个页面各自的转场参数实现自定义的页面转场效果。页面转场效果写在PageTransition函数中，函数中具有PageTransitionEnter和PageTransitionExit分别指定页面进入和退出的动画效果。语法结构如下：


PageTransition(){
//进场效果
    PageTransitionEnter({
        //动画参数
    }).onEnter((type:RouteType,progress:number)=>{
        //实现动画的效果，例如通过控制状态变量改变UI等
    })
//退场效果
    PageTransitionExit({
        //动画参数
    }).onExit((type:RouteType,progress:number)=>{
        //实现动画的效果，例如通过控制状态变量改变UI等
    })
}

2.6.2 参数解析

进场退场的动画中包含type和progress两个参数，其中type是指路由跳转的类型，包括None、Push、Pop三种，progress是指动画归一参数，本质是一个从0逐渐变化到1的数值。可以用于修改状态变量驱动UI刷新实现动画效果。

2.6.3 测试代码及代码解析


//初始页面1：
  @State scale1:number=1
  @State opicty1:number=1
build(){
    //页面间转场动画：页面1退场页面2进场得动画
    //两个页面间发生跳转，一个页面消失，另一个页面出现，
    //这时可以配置各自页面的页面转场参数实现自定义的页面转场效果，
    //页面转场效果写在pageTransition函数中，
    //通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。
    Column({space:30}) {
      Text("页面间共享元素转场消失")
        .opacity(this.opicty1)
        .fontSize(20)
      Image($r('app.media.blueberry'))
        .width('100%')
        .height('90%')
        .borderRadius(25)
        .scale({x:this.scale1})
        .opacity(this.opicty1)
    }
    .width("100%")
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .padding(30)
    .onClick(() => {
      router.pushUrl({
        url:"common/ShardTranslationDest"
      })
    })
  }
}
  //页面跳转函数的动画，具有两个方法：分别处理进场和退场的动画
  pageTransition(){
    //进场效果
    PageTransitionEnter({
      duration:2000,
      curve:Curve.Linear
    }).onEnter((type:RouteType,progress:number)=>{
      //type：路由跳转类型，progress:动画归一数据 0-----1
      this.scale1=progress
      this.opicty1=progress
    })
    //退场效果
    PageTransitionExit({
      duration:2000,
      curve:Curve.Linear
    }).onExit((type:RouteType,progress:number)=>{
      //progress是从0逐渐变为1，所以1-progress为从1逐渐变为0，所以退场时会逐渐缩小退场
      this.scale1=1-progress
      this.opicty1=1-progress
    })
  }
//跳转页面2：
  @State scale1:number=1
  @State opicty1:number=1
build(){
 Column({space:30}) {
      Text("页面间共享元素转场显示")
        .opacity(this.opicty1)
        .fontSize(20)
      Image($r('app.media.blueberry'))
        .width(50)
        .height(50)
        .borderRadius(25)
        .scale({y:this.scale1})
        .opacity(this.opicty1)
    }
    .width("100%")
    .height('100%')
    .alignItems(HorizontalAlign.Start)
    .padding(30)
    .onClick(() => {
      router.back()
    })
  }
}
//页面跳转函数的动画，具有两个方法：分别处理进场和退场的动画
  pageTransition(){
    //进场效果
    PageTransitionEnter({
      duration:2000,
      curve:Curve.Linear
    }).onEnter((type:RouteType,progress:number)=>{
      //type：路由跳转类型，progress:动画归一数据 0-----1
      //进场逐渐从0到1
      this.scale1=progress
      this.opicty1=progress
    })
    //退场效果
    PageTransitionExit({
      duration:2000,
      curve:Curve.Linear
    }).onExit((type:RouteType,progress:number)=>{
      this.scale1=1-progress
      this.opicty1=1-progress
    })
  }

2.6.4 实现效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/304286