设置窗口动效 (ArkTS)
==============

#### 场景介绍

窗口动效是指窗口在显示、隐藏、切换过程中的过渡动画效果。为了让这些过程更加自然流畅，避免界面切换过于突兀，系统提供了过渡动画支持。同时，为满足开发者的自定义需求，系统还提供了自定义设置窗口动效的能力。

以下为支持设置自定义窗口动效的几种典型场景：

*   [设置应用内Ability跳转淡入淡出动效](#设置应用内ability跳转淡入淡出动效)
    
*   [设置主窗口销毁时的转场动画](#设置主窗口销毁时的转场动画)
    

#### 设置应用内Ability跳转淡入淡出动效

在使用[startAbility()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-inner-application-uiabilitycontext#startability-2)接口拉起同包名下的其他Ability时，可以通过[StartOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-app-ability-startoptions)中[WindowCreateParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-i#windowcreateparams20)配置窗口的启动动画。

目前支持将窗口启动动画配置为淡入淡出动效[FADE\_IN\_OUT](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-e#animationtype20)。

示例代码如下：

// Pages/Index.ets
import { Want, StartOptions, common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  private context = AppStorage.get('context') as common.UIAbilityContext;

  openAbility():void {
    let want: Want = {
      deviceId: '',
      bundleName: 'com.example.startabilitywithfadeinout',
      abilityName: 'FadeInOutAbility',
      moduleName: 'entry'
    };
    let options: StartOptions = {
      // 传入启动动效参数
      windowCreateParams: {
        animationParams : { type: window.AnimationType.FADE\_IN\_OUT },
      }
    }
    try {
      this.context.startAbility(want, options, (err: BusinessError) => {
        if (err.code) {
          console.error(\`startAbility failed, code is ${err.code}, message is ${err.message}\`);
          return;
        }
        console.info('startAbility succeed');
      });
    } catch (err) {
      let code = (err as BusinessError).code;
      let message = (err as BusinessError).message;
      console.error(\`startAbility failed, code is ${code}, message is ${message}\`);
    }
  }
  build() {
    RelativeContainer() {
      Column() {
        Button('startAbility').onClick(() => this.openAbility())
      }
      .height('100%')
      .width('100%')
      .justifyContent(FlexAlign.Center);
    }
    .height('100%')
    .width('100%')
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a0/v3/D3_0ZKI2RkGpRrGWZlDkfA/zh-cn_image_0000002594828338.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073327Z&HW-CC-Expire=86400&HW-CC-Sign=98E966300A3031C5196B419A56769D517D4BEE2FDC896647B41F02269928B349)

#### 设置主窗口销毁时的转场动画

在[自由窗口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/window-terminology#freeform-window自由窗口)状态下，应用使用[getWindowTransitionAnimation()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#getwindowtransitionanimation20)获取主窗口转场的动画配置，当前转场动画配置不符合业务诉求时，可以使用[setWindowTransitionAnimation()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowtransitionanimation20)接口配置窗口转场时的动画，当前仅支持配置窗口销毁时的转场动画。

示例代码如下：

// EntryAbility.ets
import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    let windowClass: window.Window | undefined = undefined;
    windowStage.getMainWindow((err: BusinessError, data) => {
      const errCode: number = err.code;
      if (errCode) {
        console.error(\`Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}\`);
        return;
      }
      windowClass = data;
      try {
        // 获取窗口销毁时转场动画配置
        let transitionAnimationResult = windowClass.getWindowTransitionAnimation(window.WindowTransitionType.DESTROY);
        if (!transitionAnimationResult) {
          // 动画配置
          const animationConfig: window.WindowAnimationConfig = {
            duration: 1000,
            curve: window.WindowAnimationCurve.LINEAR,
          };
          // 配置转场动画的不透明度和动画配置
          const transitionAnimation: window.TransitionAnimation = {
            opacity: 0.0,
            config: animationConfig
          };
          // 设置窗口销毁时的动画
          let promise = windowClass.setWindowTransitionAnimation(window.WindowTransitionType.DESTROY, transitionAnimation);
          promise.then((data) => {
            console.info('Succeeded in setting window transition animation. Cause: ' + JSON.stringify(data));
          }).catch((err: BusinessError) => {
            console.error(\`Failed to set window transition animation. Cause code: ${err.code}, message: ${err.message}\`);
          });
        }
      } catch (exception) {
        console.error(\`Failed to obtain the window status of window. Cause code: ${exception.code}, message: ${exception.message}\`);
      }
    })
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
    });
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/39/v3/_6_Gs-PmTwi_v-7xnM1Obw/zh-cn_image_0000002625187785.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073327Z&HW-CC-Expire=86400&HW-CC-Sign=BBA6AF8AA27A9BC5F5BBCB22DFB08F68E1A5C90A4AB70C327E8E79FEBF58AB7E)