HarmonyOS鸿蒙Next开发者技术支持-鸿蒙应用开发-鸿蒙过渡动画使用案例

HarmonyOS鸿蒙Next开发者技术支持-鸿蒙应用开发-鸿蒙过渡动画使用案例 鸿蒙应用开发：页面跳转过度动画生硬/不一致问题

1.1 问题说明：清晰呈现问题场景与具体表现

• 场景：在鸿蒙应用（使用ArkTS开发）中，存在多个页面间的跳转，例如从商品列表页 ListPage​ 跳转到商品详情页 DetailPage。
• 具体表现：
  1. 动画生硬：默认的页面跳转动画（侧滑）过于简单、生硬，与当前应用的整体设计风格（如清新、科技感）不符，显得应用不够精致。
  2. 体验不一致：应用内部分跳转使用了默认动画，部分跳转开发者自行定义了动画，导致用户体验不一致，显得凌乱。
  3. 缺乏品牌感：默认动画无法体现产品的独特品牌调性和交互特色。
  4. 特定场景体验不佳：例如，从列表项的缩略图放大到详情页大图的场景，使用默认的左右滑动动画会切断视觉的连续性，显得突兀。

1.2场景化应用：

• 通用转场：对于普通页面跳转，使用自定义的 pageTransition（如淡入淡出、缩放、滑动优化）替代系统默认。
• 关联性转场：对于有强烈视觉关联的组件（如图片放大），使用 sharedTransition实现共享元素转场，打造无缝体验。
• 技术实现：深入理解并应用 @CustomDialog和 @ohos.router模块的动画参数，以及在页面级使用 pageTransition装饰器。
• 组件化/工具化：将常用的动画效果封装成可复用的组件或工具函数，确保团队内使用一致。

1.3 解决方案：落地解决思路，给出可执行、可复用的具体方案

方案一：自定义通用页面转场动画（以“淡入淡出叠加缩放”为例）

在目标页面（如 DetailPage）的 .ets文件中，使用 pageTransition装饰器定义进入和退出的动画。

// DetailPage.ets
import router from '@ohos.router';

@Entry
@Component
struct DetailPage {
  // 定义页面进入动画：从屏幕中心缩放至正常大小，同时淡入
  @CustomDialog
  pageTransition() {
    PageTransitionEnter({ duration: 300, curve: Curve.Ease })
      .slide(SlideEffect.Bottom) // 可选的滑动效果，此处为底部滑入
      .opacity(0) // 初始透明度为0
      .scale({ x: 0.8, y: 0.8, centerX: ‘50%', centerY: ‘50%' }) // 从80%大小开始
      .onEnter((type: RouteType, progress: number) => {
        // 动画执行过程中的回调，可用于更精细的控制
      })
  }

  // 定义页面退出动画：缩小并淡出
  PageTransitionExit({ duration: 250, curve: Curve.EaseIn })
    .slide(SlideEffect.Bottom)
    .opacity(0)
    .scale({ x: 0.9, y: 0.9, centerX: ‘50%', centerY: ‘50%' })
  }

  build() {
    Column() {
      // 页面内容...
      Button(‘返回’)
        .onClick(() => {
          router.back();
        })
    }
  }
}

方案二：实现共享元素转场动画（关键步骤）

1. 在源页面（ListPage）和目标页面（DetailPage）中，为需要共享的组件（如图片）设置相同的 sharedTransitionID 和动画参数。

// ListPage.ets - 列表项中的图片
Image(item.imageUrl)
  .width(80)
  .height(80)
  .sharedTransition('productImage', { duration: 400, curve: Curve.Friction })

// DetailPage.ets - 详情页顶部大图
Image(this.bigImageUrl)
  .width(‘100%')
  .aspectRatio(1)
  .sharedTransition('productImage', { duration: 400, curve: Curve.Friction })

2.在源页面执行跳转时，通过 router.pushUrl的 params传递必要信息，并启用共享元素转场**。

// ListPage.ets - 列表项点击事件
let routerParams: router.RouterOptions = {
  url: ‘pages/DetailPage’,
  params: { imageUrl: item.imageUrl, id: item.id }, // 传递参数
  // 关键：启用转场动画，并指定共享元素的ID
  router.DestinationOptions.sharedTransition(‘productImage’)
};
router.pushUrl(routerParams);

方案三：统一导航工具函数封装

// utils/AppRouter.ets
import router from ‘@ohos.router’;

export class AppRouter {
  /**
   * 标准跳转，应用统一的自定义动画配置
   * @param url 目标页面对应路由
   * @param params 传递的参数
   */
  static push(url: string, params?: Object) {
    const options: router.RouterOptions = {
      url,
      params,
      // 可以在这里统一配置一些高阶路由选项，如动画模式
      // router.DestinationOptions.animation(...)
    };
    router.pushUrl(options)
      .catch((err: Error) => {
        console.error(‘Router push failed:’, err);
      });
  }

  /**
   * 带动画信息的特殊跳转（如共享元素）
   * @param url 目标页面对应路由
   * @param sharedId 共享元素ID
   * @param params 传递的参数
   */
  static pushWithSharedTransition(url: string, sharedId: string, params?: Object) {
    const options: router.RouterOptions = {
      url,
      params,
      router.DestinationOptions.sharedTransition(sharedId) // 动态指定共享ID
    };
    router.pushUrl(options)
      .catch((err: Error) => {
        console.error(‘Router push with shared transition failed:’, err);
      });
  }
}

// 使用示例：在ListPage.ets中
import { AppRouter } from ‘../utils/AppRouter’;
// ...
onItemClick(item: Product) {
  // 普通跳转
  // AppRouter.push(‘pages/DetailPage’, { id: item.id });
  // 共享元素跳转
  AppRouter.pushWithSharedTransition(‘pages/DetailPage’, ‘productImage’, { id: item.id });
}

1.4 结果展示：开发效率提升或为后续同类问题提供参考

1. 体验提升：
   • 应用内的页面跳转变得流畅、自然且富有品牌特色，例如图片的放大转场极大地提升了视觉愉悦感和功能连贯性。
   • 统一的动画规范使得整个应用的交互体验保持一致，提升了产品的专业度。
2. 开发效率与维护性提升：
   • 标准化：通过制定规范和封装工具类，新开发者在实现页面跳转时能快速、一致地应用预定义的动画方案，无需重复研究动画API。
   • 可复用性：pageTransition的代码片段和 sharedTransition的配置模式可以直接复制到其他类似场景的页面中，仅需修改ID和参数。
   • 易于维护：当需要全局调整动画时长或曲线时，只需在 工具类或设计规范中修改一处，即可影响所有相关页面，降低了维护成本。