在HarmonyOS中如何修改不同AbilitySlice间切换的转场动画？

一、实现类似Android overridePendingTransition 的返回动画效果 #

你要的从次级页面返回主页时左滑入主页、右滑出次级页的效果，根据使用的路由场景分两种实现方式：

场景1：同一应用内ArkUI页面路由（使用router接口） #

在次级页面的onBackPress生命周期（监听物理返回键）或者自定义返回按钮的点击逻辑中，调用router.back时指定转场参数即可，示例代码如下：

import router from '@ohos.router';
import { Curve, PlayMode } from '@ohos.curves';

@Entry
@Component
struct SecondPage {
  // 监听物理返回键触发
  onBackPress(): boolean {
    router.back({
      transition: {
        // 进入页（主页）动画：从左侧滑入
        enter: {
          translate: { x: '-100%', y: 0 },
          opacity: 0,
          duration: 300,
          curve: Curve.EaseOut,
          playMode: PlayMode.Normal
        },
        // 退出页（当前次级页）动画：向右侧滑出
        exit: {
          translate: { x: '100%', y: 0 },
          opacity: 1,
          duration: 300,
          curve: Curve.EaseIn
        }
      }
    })
    // 返回true拦截默认返回逻辑，使用自定义动画
    return true;
  }

  build() {
    // 页面布局实现
  }
}

场景2：不同UIAbility之间的跳转返回 #

如果是跨Ability的页面切换，可以在UIAbility的onWindowStageCreate生命周期中配置全局窗口转场动画，示例代码如下：

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';
import { Curve } from '@ohos.curves';

export default class MainAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.getMainWindow().then(win => {
      // 配置窗口切换的全局转场动画
      win.setWindowTransitionAnimation({
        enter: {
          duration: 300,
          curve: Curve.EaseOut,
          translate: { x: '-100%', y: 0 }
        },
        exit: {
          duration: 300,
          curve: Curve.EaseIn,
          translate: { x: '100%', y: 0 }
        }
      })
    })
  }
}

二、HarmonyOS 可用的转场动画类型 #

HarmonyOS 提供系统预置转场和完全自定义转场两类能力：

• 系统预置转场：官方封装好的开箱即用效果，包含：
  • 滑动类：左右/上下四个方向的滑入滑出，对应页面导航、底部弹窗等常见场景
  • 渐变类：淡入淡出，适用于浮层、弹窗切换场景
  • 缩放类：放大进入/缩小退出，适用于列表跳详情的共享元素类场景
• 自定义转场：可自由组合以下属性实现任意转场效果：
  • 基础变换属性：位移、缩放、透明度、旋转
  • 动画配置项：自定义时长、插值曲线、播放模式（正向/反向/循环）

内容的提问来源于stack exchange，提问作者OxO