第6章：手势与动画

6.3 页面切换动画

6.3.1 页面动画基础概念

ArkTS通过@ohos.router模块和动画API实现页面切换效果，核心要素包括：

转场类型：水平滑动、垂直滑动、淡入淡出、缩放等
时序曲线：Curve.Linear/Curve.Ease等控制动画速度变化
动画时长：默认300ms，可自定义调节

6.3.2 基础转场动画实现

import router from '@ohos.router';

// 带右滑动画的页面跳转
router.pushUrl({
  url: 'pages/DetailPage',
  params: { id: 123 },
  animation: {
    type: 'slide',  // 滑动动画
    duration: 400   // 动画时长(ms)
  }
})

6.3.3 高级动画组合

通过transition实现复杂动画效果：

// 自定义组合动画
@Entry
@Component
struct MainPage {
  build() {
    Stack() {
      // 页面内容...
    }
    .transition({ 
      type: TransitionType.Insert,
      opacity: 0.5,
      translate: { x: 100, y: 0 },
      scale: { x: 0.8, y: 0.8 }
    })
  }
}

6.3.4 动画性能优化建议

硬件加速：优先使用transform属性
减少层级：避免动画元素嵌套过深
帧率监控：通过onFrame回调检测动画流畅度
内存管理：及时销毁未使用的动画对象

6.3.5 实战案例：电商App商品详情页切换

// 商品列表页跳转逻辑
function navigateToDetail(item: Product) {
  router.pushUrl({
    url: 'pages/ProductDetail',
    params: { productId: item.id },
    animation: {
      type: 'shared',  // 共享元素动画
      sharedElement: `product_${item.id}`,
      duration: 500
    }
  })
}

6.3.6 常见问题排查

问题现象	可能原因	解决方案
动画卡顿	主线程阻塞	使用Worker处理计算任务
元素错位	单位未统一	检查px/vp单位转换
动画失效	兼容性问题	检查设备OS版本支持

最佳实践：建议在aboutToAppear生命周期中预加载动画资源，在aboutToDisappear中执行清理操作。

扩展阅读

HarmonyOS动画开发指南
Lottie动画库集成方案
3D变换动画实现原理