HarmonyOS 鸿蒙Next中转场动画与页面切换效果

在HarmonyOS Next的ArkUI中，实现页面切换与组件动画主要依赖声明式UI的动画API和转场机制。以下是针对您问题的具体实现方案：

1. 页面切换转场动画

使用Navigation组件时，可通过pageTransition函数为页面配置进入/退出动画：

// 页面级转场
@Entry
@Component
struct PageTransitionExample {
  build() {
    Navigation() {
      PageTransitionPage({ title: 'PageA' })
    }
  }
}

@Component
struct PageTransitionPage {
  build() {
    Column() {
      // 页面内容
    }
    .pageTransition({
      // 进入动画
      slide: SlideEffect.Right,
      // 退出动画  
      opacity: 0.5
    })
  }
}

2. 组件出现/消失动画

使用transition和animateTo实现组件级动画：

@Component
struct ComponentAnimation {
  @State isVisible: boolean = true;
  @State opacityVal: number = 1;

  build() {
    Column() {
      if (this.isVisible) {
        Text('出现/消失动画')
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 0 } })
          .transition({ type: TransitionType.Delete, opacity: 0 })
      }
      
      Button('切换显示')
        .onClick(() => {
          animateTo({
            duration: 500,
            curve: Curve.EaseInOut
          }, () => {
            this.isVisible = !this.isVisible;
            this.opacityVal = this.isVisible ? 1 : 0;
          })
        })
    }
  }
}

3. 共享元素转场

通过sharedTransition实现元素在页面间平滑过渡：

// 页面A
@Component
struct PageA {
  build() {
    Navigation() {
      Column() {
        Image($r('app.media.icon'))
          .sharedTransition('sharedImage', {
            duration: 300,
            curve: Curve.Friction
          })
          .onClick(() => {
            router.pushUrl({ url: 'pages/PageB' });
          })
      }
    }
  }
}

// 页面B  
@Component
struct PageB {
  build() {
    Column() {
      Image($r('app.media.icon'))
        .sharedTransition('sharedImage') // 相同ID实现共享
    }
  }
}

4. 手势交互转场

结合PanGesture和动画API实现手势驱动转场：

@Component
struct GestureTransition {
  @State offsetX: number = 0;
  @State isExiting: boolean = false;
  private panGesture: PanGesture = new PanGesture();

  build() {
    Column() {
      // 可拖拽内容区域
    }
    .gesture(
      this.panGesture
        .onActionStart(() => {
          // 手势开始
        })
        .onActionUpdate((event: GestureEvent) => {
          // 更新位置
          this.offsetX = event.offsetX;
        })
        .onActionEnd(() => {
          // 判断是否触发页面切换
          if (Math.abs(this.offsetX) > 100) {
            animateTo({
              duration: 200,
              curve: Curve.EaseOut
            }, () => {
              this.isExiting = true;
              // 执行路由跳转
              router.back();
            })
          }
        })
    )
    .translate({ x: this.offsetX })
  }
}

关键要点：

• 转场类型：支持平移、缩放、旋转、透明度等多种效果
• 动画曲线：提供Ease、Spring、Friction等预置曲线，支持自定义贝塞尔曲线
• 性能优化：推荐使用animateTo的闭包批量更新状态，减少布局计算次数
• 手势协调：通过gesture修饰符与转场动画结合，实现自然交互体验

这些API共同构成了ArkUI完整的转场动画体系，能够满足从简单页面切换到复杂手势交互动画的各类场景需求。