簡介

動畫是組件的基礎(chǔ)特性之一，精心設(shè)計的動畫使 UI 變化更直觀，平滑的動畫效果能夠很好地增強差異性功能的過渡鳖孤，有助于改進應(yīng)用程序的外觀并改善用戶體驗。

OpenHarmony 動畫分類：

• 屬性動畫：組件的某些通用屬性變化時抡笼，可以通過屬性動畫實現(xiàn)漸變過渡效果苏揣，提升用戶體驗。支持的屬性包括 width推姻、height平匈、backgroundColor、opacity藏古、scale增炭、rotate、translate 等校翔。
• 顯示動畫：提供全局 animateTo 顯式動畫接口來指定由于閉包代碼導(dǎo)致的狀態(tài)變化插入過渡動效弟跑。
• 轉(zhuǎn)場動畫
  • 頁面間轉(zhuǎn)場：在全局 pageTransition 方法內(nèi)配置頁面入場和頁面退場時的自定義轉(zhuǎn)場動效。
  • 組件內(nèi)轉(zhuǎn)場：組件內(nèi)轉(zhuǎn)場主要通過 transition 屬性配置轉(zhuǎn)場參數(shù)防症，在組件插入和刪除時顯示過渡動效孟辑，主要用于容器組件中的子組件插入和刪除時，提升用戶體驗（需要配合animateTo 才能生效蔫敲，動效時長饲嗽、曲線、延時跟隨 animateTo 中的配置）奈嘿。
  • 共享元素轉(zhuǎn)場：設(shè)置頁面間轉(zhuǎn)場時共享元素的轉(zhuǎn)場動效貌虾。
• 路徑動畫：設(shè)置組件進行位移動畫時的運動路徑。
• 窗口動畫：提供啟動退出過程中控件動畫和應(yīng)用窗口聯(lián)動動畫能力裙犹。

動畫詳解

屬性動畫

通過控件的 animation 屬性實現(xiàn)動畫效果尽狠。

animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})

示例

// xxx.ets
@Entry
@Component
struct AnimateToExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  private flag: boolean = true

  build() {
    Column() {
      Button('change width and height')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 100
              this.heightSize = 50
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
      Button('change rotate angle')
        .margin(50)
        .rotate({ angle: this.rotateAngle })
        .onClick(() => {
          animateTo({
            duration: 1200,
            curve: Curve.Friction,
            delay: 500,
            iterations: -1, // 設(shè)置-1表示動畫無限循環(huán)
            playMode: PlayMode.AlternateReverse,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.rotateAngle = 90
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}

顯示動畫

通過全局 animateTo 顯式動畫接口來定由于閉包代碼導(dǎo)致的狀態(tài)變化插入過渡動效有咨。

animateTo(value: AnimateParam, event: () => void): void

AnimateParam 對象說明

示例

// xxx.ets
@Entry
@Component
struct AnimateToExample {
  @State widthSize: number = 250
  @State heightSize: number = 100
  @State rotateAngle: number = 0
  private flag: boolean = true

  build() {
    Column() {
      Button('change width and height')
        .width(this.widthSize)
        .height(this.heightSize)
        .margin(30)
        .onClick(() => {
          if (this.flag) {
            animateTo({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 3,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.widthSize = 100
              this.heightSize = 50
            })
          } else {
            animateTo({}, () => {
              this.widthSize = 250
              this.heightSize = 100
            })
          }
          this.flag = !this.flag
        })
      Button('change rotate angle')
        .margin(50)
        .rotate({ angle: this.rotateAngle })
        .onClick(() => {
          animateTo({
            duration: 1200,
            curve: Curve.Friction,
            delay: 500,
            iterations: -1, // 設(shè)置-1表示動畫無限循環(huán)
            playMode: PlayMode.AlternateReverse,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.rotateAngle = 90
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}

注：效果和屬性動畫等價

轉(zhuǎn)場動畫

頁面間轉(zhuǎn)場

在全局 pageTransition 方法內(nèi)配置頁面入場和頁面退場時的自定義轉(zhuǎn)場動效。

RouteType 枚舉說明

屬性

SlideEffect 枚舉說明

事件

組件內(nèi)轉(zhuǎn)場

組件內(nèi)轉(zhuǎn)場主要通過 transition 屬性配置轉(zhuǎn)場參數(shù)词顾，在組件插入和刪除時顯示過渡動效八秃，主要用于容器組件中的子組件插入和刪除時，提升用戶體驗（需要配合 animateTo) 才能生效肉盹，動效時長昔驱、曲線、延時跟隨 animateTo 中的配置）上忍。

屬性

TransitionOptions 參數(shù)說明

示例

// xxx.ets
@Entry
@Component
struct TransitionExample {
  @State flag: boolean = true
  @State show: string = 'show'

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          // 點擊Button控制Image的顯示和消失
          animateTo({ duration: 1000 }, () => {
            if (this.flag) {
              this.show = 'hide'
            } else {
              this.show = 'show'
            }
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        // Image的顯示和消失配置為不同的過渡效果
        Image($r('app.media.testImg')).width(300).height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }.width('100%')
  }
}

共享元素轉(zhuǎn)場

設(shè)置頁面間轉(zhuǎn)場時共享元素的轉(zhuǎn)場動效。

屬性

示例

示例代碼為點擊圖片跳轉(zhuǎn)頁面時喻犁，顯示共享元素圖片的自定義轉(zhuǎn)場動效槽片。

// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
  @State active: boolean = false

  build() {
    Column() {
      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
        Image($r('app.media.ic_health_heart')).width(50).height(50)
          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
      }.padding({ left: 20, top: 20 })
      .onClick(() => {
        this.active = true
      })
    }
  }
}

// PageB.ets
@Entry
@Component
struct pageBExample {
  build() {
    Stack() {
      Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage')
    }.width('100%').height('100%')
  }
}

路徑動畫

設(shè)置組件進行位移動畫時的運動路徑。

屬性

示例

// xxx.ets
@Entry
@Component
struct MotionPathExample {
  @State toggle: boolean = true

  build() {
    Column() {
      Button('click me')
        // 執(zhí)行動畫：從起點移動到(300,200)期贫，再到(300,500)，再到終點
        .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
        .onClick(() => {
          animateTo({ duration: 4000, curve: Curve.Linear }, () => {
            this.toggle = !this.toggle // 通過this.toggle變化組件的位置
          })
        })
    }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
  }
}

窗口動畫

窗口動畫管理器异袄，可以監(jiān)聽?wèi)?yīng)用啟動退出時應(yīng)用的動畫窗口通砍，提供啟動退出過程中控件動畫和應(yīng)用窗口聯(lián)動動畫能力。

導(dǎo)入模塊

import windowAnimationManager from '@ohos.animation.windowAnimationManager'

windowAnimationManager.setController

setController(controller: WindowAnimationController): void

設(shè)置窗口動畫控制器烤蜕。

在使用 windowAnimationManager 的其他接口前封孙，需要預(yù)先調(diào)用本接口設(shè)置窗口動畫控制器。

參數(shù)：

windowAnimationManager.minimizeWindowWithAnimation

minimizeWindowWithAnimation(windowTarget: WindowAnimationTarget): Promise

最小化動畫目標窗口虎忌，并返回動畫完成的回調(diào)。使用 Promise 異步回調(diào)橱鹏。

參數(shù)：

返回值：

WindowAnimationController

窗口動畫控制器挑围。在創(chuàng)建一個 WindowAnimationController 對象時礁竞，需要實現(xiàn)其中的所有回調(diào)函數(shù)。

onStartAppFromLauncher

onStartAppFromLauncher(startingWindowTarget: WindowAnimationTarget,finishCallback: WindowAnimationFinishedCallback): void

從桌面啟動應(yīng)用時的回調(diào)贪惹。

onStartAppFromRecent

onStartAppFromRecent(startingWindowTarget: WindowAnimationTarget,finishCallback:WindowAnimationFinishedCallback): void

從最近任務(wù)列表啟動應(yīng)用時的回調(diào)奏瞬。

onStartAppFromOther

onStartAppFromOther(startingWindowTarget: WindowAnimationTarget,finishCallback: WindowAnimationFinishedCallback): void

從除了桌面和最近任務(wù)列表以外其他地方啟動應(yīng)用時的回調(diào)硼端。

onAppTransition

onAppTransition(fromWindowTarget: WindowAnimationTarget, toWindowTarget: WindowAnimationTarget,finishCallback: WindowAnimationFinishedCallback): void

應(yīng)用轉(zhuǎn)場時的回調(diào)珍昨。

onMinimizeWindow

onMinimizeWindow(minimizingWindowTarget: WindowAnimationTarget,finishCallback: WindowAnimationFinishedCallback): void

最小化窗口時的回調(diào)兔毙。

onCloseWindow

onCloseWindow(closingWindowTarget: WindowAnimationTarget,finishCallback: WindowAnimationFinishedCallback): void

關(guān)閉窗口時的回調(diào)澎剥。

onScreenUnlock

onScreenUnlock(finishCallback: WindowAnimationFinishedCallback): void

屏幕解鎖時的回調(diào)哑姚。

onWindowAnimationTargetsUpdate

onWindowAnimationTargetsUpdate(fullScreenWindowTarget: WindowAnimationTarget, floatingWindowTargets: Array): void

動畫目標窗口更新時的回調(diào)

WindowAnimationFinishedCallback

動畫完成后的回調(diào)叙量。
onAnimationFinish
onAnimationFinish():void

結(jié)束本次動畫。

應(yīng)用層使用

OpenHarmony 中應(yīng)用層的窗口動畫定義在 Launcher 系統(tǒng)應(yīng)用中九串，由 Launcher 應(yīng)用統(tǒng)一規(guī)范應(yīng)用的窗口動畫

WindowController 的實現(xiàn)見 WindowAnimationControllerImpl.ts绞佩，定義了 onStartAppFromLauncher、onStartAppFromRecent蒸辆、onStartAppFromOther征炼、onAppTransition、onMinimizeWindow躬贡、onCloseWindow谆奥、onScreenUnlock 等實現(xiàn)方式

import Prompt from '@ohos.prompt';
import windowAnimationManager from '@ohos.animation.windowAnimationManager';
import { CheckEmptyUtils } from '@ohos/common';
import { Log } from '@ohos/common';
import RemoteConstants from '../../constants/RemoteConstants';

const TAG = 'WindowAnimationControllerImpl';

class WindowAnimationControllerImpl implements windowAnimationManager.WindowAnimationController {
  onStartAppFromLauncher(startingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                         finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void
  {
    Log.showInfo(TAG, `remote window animaion onStartAppFromLauncher`);
    this.setRemoteAnimation(startingWindowTarget, null, finishCallback, RemoteConstants.TYPE_START_APP_FROM_LAUNCHER);
    this.printfTarget(startingWindowTarget);
    finishCallback.onAnimationFinish();
  }

  onStartAppFromRecent(startingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                       finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void {
    Log.showInfo(TAG, `remote window animaion onStartAppFromRecent`);
    this.setRemoteAnimation(startingWindowTarget, null, finishCallback, RemoteConstants.TYPE_START_APP_FROM_RECENT);
    this.printfTarget(startingWindowTarget);
    finishCallback.onAnimationFinish();
  }

  onStartAppFromOther(startingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                      finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void {
    Log.showInfo(TAG, `remote window animaion onStartAppFromOther`);
    this.setRemoteAnimation(startingWindowTarget, null, finishCallback, RemoteConstants.TYPE_START_APP_FROM_OTHER);
    this.printfTarget(startingWindowTarget);
    finishCallback.onAnimationFinish();
  }

  onAppTransition(fromWindowTarget: windowAnimationManager.WindowAnimationTarget,
                  toWindowTarget: windowAnimationManager.WindowAnimationTarget,
                  finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void{
    Log.showInfo(TAG, `remote window animaion onAppTransition`);
    this.setRemoteAnimation(toWindowTarget, fromWindowTarget, finishCallback, RemoteConstants.TYPE_APP_TRANSITION);
    this.printfTarget(fromWindowTarget);
    this.printfTarget(toWindowTarget);
    finishCallback.onAnimationFinish();
  }

  onMinimizeWindow(minimizingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                   finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void {
    Log.showInfo(TAG, `remote window animaion onMinimizeWindow`);
    this.setRemoteAnimation(null, minimizingWindowTarget, finishCallback, RemoteConstants.TYPE_MINIMIZE_WINDOW);
    this.printfTarget(minimizingWindowTarget);
    finishCallback.onAnimationFinish();
  }

  onCloseWindow(closingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void {
    Log.showInfo(TAG, `remote window animaion onCloseWindow`);
    this.setRemoteAnimation(null, closingWindowTarget, finishCallback, RemoteConstants.TYPE_CLOSE_WINDOW);
    this.printfTarget(closingWindowTarget);
    finishCallback.onAnimationFinish();
  }

  onScreenUnlock(finishCallback: windowAnimationManager.WindowAnimationFinishedCallback): void {
    Log.showInfo(TAG, `remote window animaion onScreenUnlock`);
    this.setRemoteAnimation(null, null, finishCallback, RemoteConstants.TYPE_SCREEN_UNLOCK);
    finishCallback.onAnimationFinish();
  }

  onWindowAnimationTargetsUpdate(fullScreenWindowTarget: windowAnimationManager.WindowAnimationTarget, floatingWindowTargets: Array<windowAnimationManager.WindowAnimationTarget>): void {}

  printfTarget(target: windowAnimationManager.WindowAnimationTarget): void {
    if (CheckEmptyUtils.isEmpty(target) || CheckEmptyUtils.isEmpty(target.windowBounds)) {
      Log.showInfo(TAG, `remote window animaion with invalid target`);
      return;
    }
    Log.showInfo(TAG, `remote window animaion bundleName: ${target.bundleName} abilityName: ${target.abilityName}`);
    Log.showInfo(TAG, `remote window animaion windowBounds left: ${target.windowBounds.left} top: ${target.windowBounds.top}
      width: ${target.windowBounds.width} height: ${target.windowBounds.height} radius: ${target.windowBounds.radius}`);
  }

  private setRemoteAnimation(startingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                             closingWindowTarget: windowAnimationManager.WindowAnimationTarget,
                             finishCallback: windowAnimationManager.WindowAnimationFinishedCallback,
                             remoteAnimationType: number): void {
    if (!CheckEmptyUtils.isEmpty(startingWindowTarget)) {
      AppStorage.SetOrCreate('startingWindowTarget', startingWindowTarget);
    }

    if (!CheckEmptyUtils.isEmpty(closingWindowTarget)) {
      AppStorage.SetOrCreate('closingWindowTarget', closingWindowTarget);
    }

    if (!CheckEmptyUtils.isEmpty(finishCallback)) {
      AppStorage.SetOrCreate('remoteAnimationFinishCallback', finishCallback);
    }

    AppStorage.SetOrCreate('remoteAnimationType', remoteAnimationType);
  }
}

export default WindowAnimationControllerImpl

RemoteWindowWrapper.ets 中定義了具體的窗口動畫實現(xiàn)效果（通過 animateTo 實現(xiàn)具體的動畫效果）

calculateAppProperty(remoteVo: RemoteVo, finishCallback: windowAnimationManager.WindowAnimationFinishedCallback) {
  Log.showDebug(TAG, `calculateAppProperty ${remoteVo.remoteAnimationType}`);
  if (remoteVo.remoteAnimationType == RemoteConstants.TYPE_START_APP_FROM_LAUNCHER) {
    Trace.start(Trace.CORE_METHOD_START_APP_ANIMATION);
    const callback = Object.assign(finishCallback);
    const count = remoteVo.count;
    localEventManager.sendLocalEventSticky(EventConstants.EVENT_ANIMATION_START_APPLICATION, null);
    animateTo({
      duration: 180,
      delay: 100,
      curve: Curve.Friction,
      onFinish: () => {
      }
    }, () => {
      remoteVo.startAppIconWindowAlpha = 0.0;
      remoteVo.remoteWindowWindowAlpha = 1.0;
    })

    animateTo({
      duration: 500,
      // @ts-ignore
      curve: curves.springMotion(0.32, 0.99, 0),
      onFinish: () => {
        callback.onAnimationFinish();
        Trace.end(Trace.CORE_METHOD_START_APP_ANIMATION);
        const startCount: number = AppStorage.Get(remoteVo.remoteWindowKey);
        Log.showDebug(TAG, `calculateAppProperty ${remoteVo.remoteAnimationType}, count: ${count}, startCount: ${startCount}`);
        if (startCount === count || count == 0) {
          this.removeRemoteWindowFromList(remoteVo.remoteWindowKey);
          AppStorage.SetOrCreate(remoteVo.remoteWindowKey, 0);
        }
      }
    }, () => {
      remoteVo.remoteWindowScaleX = 1.0;
      remoteVo.remoteWindowScaleY = 1.0;
      remoteVo.remoteWindowTranslateX = 0.0;
      remoteVo.remoteWindowTranslateY = 0.0;
      remoteVo.startAppIconScaleX = remoteVo.mScreenWidth / remoteVo.iconInfo?.appIconSize;
      remoteVo.startAppIconTranslateX = remoteVo.mScreenWidth / 2 - remoteVo.iconInfo?.appIconPositionX - remoteVo.iconInfo?.appIconSize / 2;
      remoteVo.remoteWindowRadius = 0;
      if (remoteVo.startAppTypeFromPageDesktop === CommonConstants.OVERLAY_TYPE_CARD) {
        remoteVo.startAppIconScaleY = remoteVo.mScreenHeight / remoteVo.iconInfo?.appIconHeight;
        remoteVo.startAppIconTranslateY = remoteVo.mScreenHeight / 2 + px2vp(remoteVo.target.windowBounds.top) - remoteVo.iconInfo?.appIconPositionY - remoteVo.iconInfo?.appIconHeight / 2;
      } else {
        remoteVo.startAppIconScaleY = remoteVo.mScreenHeight / remoteVo.iconInfo?.appIconSize;
        remoteVo.startAppIconTranslateY = remoteVo.mScreenHeight / 2 + px2vp(remoteVo.target.windowBounds.top) - remoteVo.iconInfo?.appIconPositionY - remoteVo.iconInfo?.appIconSize / 2;
      }
    })
  } else if (remoteVo.remoteAnimationType  == RemoteConstants.TYPE_MINIMIZE_WINDOW) {
    Trace.start(Trace.CORE_METHOD_CLOSE_APP_ANIMATION);
    const res = remoteVo.calculateCloseAppProperty();
    const callback = Object.assign(finishCallback);
    const count = remoteVo.count;
    localEventManager.sendLocalEventSticky(EventConstants.EVENT_ANIMATION_CLOSE_APPLICATION, null);
    animateTo({
      duration: 700,
      // @ts-ignore
      curve: curves.springMotion(0.40, 0.99, 0),
      onFinish: () => {
        callback.onAnimationFinish();
        Trace.end(Trace.CORE_METHOD_CLOSE_APP_ANIMATION);
        const startCount: number = AppStorage.Get(remoteVo.remoteWindowKey);
        Log.showDebug(TAG, `calculateAppProperty ${remoteVo.remoteAnimationType}, count: ${count}, startCount: ${startCount}`);
        if (startCount === count || count == 0) {
          this.removeRemoteWindowFromList(remoteVo.remoteWindowKey);
          AppStorage.SetOrCreate(remoteVo.remoteWindowKey, 0);
        }
      }
    }, () => {
      remoteVo.remoteWindowScaleX = 1 / res.closeAppCalculateScaleX;
      remoteVo.remoteWindowScaleY = 1 / res.closeAppCalculateScaleY;
      remoteVo.remoteWindowTranslateX = res.closeAppCalculateTranslateX;
      remoteVo.remoteWindowTranslateY = res.closeAppCalculateTranslateY;

      remoteVo.startAppIconScaleX = 1.0;
      remoteVo.startAppIconScaleY = 1.0;
      remoteVo.startAppIconTranslateX = 0.0;
      remoteVo.startAppIconTranslateY = 0.0;
      remoteVo.remoteWindowRadius = 96;
    })

    animateTo({
      duration: 140,
      delay: 350,
      curve: Curve.Friction,
      onFinish: () => {
      }
    }, () => {
      remoteVo.startAppIconWindowAlpha = 1.0;
      remoteVo.remoteWindowWindowAlpha = 0;
    })
  } else if (remoteVo.remoteAnimationType  == RemoteConstants.TYPE_CLOSE_WINDOW) {
  } else if (remoteVo.remoteAnimationType  == RemoteConstants.TYPE_APP_TRANSITION) {
    const callback = Object.assign(finishCallback);
    animateTo({
      duration: 500,
      curve: Curve.Friction,
      onFinish: () => {
        callback.onAnimationFinish();
        this.removeRemoteWindowFromList(remoteVo.remoteWindowKey);
      }
    }, () => {
      remoteVo.remoteWindowRadius = 0;
      remoteVo.remoteWindowTranslateX = 0;
      remoteVo.fromRemoteWindowTranslateX = px2vp(remoteVo.fromWindowTarget?.windowBounds.left - remoteVo.fromWindowTarget?.windowBounds.width);
    })

    animateTo({
      duration: 150,
      curve: Curve.Friction,
      onFinish: () => {
        callback.onAnimationFinish();
        this.removeRemoteWindowFromList(remoteVo.remoteWindowKey);
      }
    }, () => {
      remoteVo.remoteWindowScaleX = 0.9
      remoteVo.remoteWindowScaleY = 0.9
      remoteVo.fromRemoteWindowScaleX = 0.9
      remoteVo.fromRemoteWindowScaleY = 0.9
    })

    animateTo({
      duration: 350,
      delay: 150,
      curve: Curve.Friction,
      onFinish: () => {
        callback.onAnimationFinish();
        this.removeRemoteWindowFromList(remoteVo.remoteWindowKey);
      }
    }, () => {
      remoteVo.remoteWindowScaleX = 1.0
      remoteVo.remoteWindowScaleY = 1.0
      remoteVo.fromRemoteWindowScaleX = 1.0
      remoteVo.fromRemoteWindowScaleY = 1.0
    })
  }
}

注：若想修改系統(tǒng)的窗口動畫效果，可通過修改對應(yīng)的動畫實現(xiàn)

底層實現(xiàn)

窗口動畫的底層實現(xiàn)具體見：foundation\window\window_manager\wmserver\src\remote_animation.cpp

WMError RemoteAnimation::SetWindowAnimationController(const sptr<RSIWindowAnimationController>& controller)
{
    WLOGFI("RSWindowAnimation: set window animation controller!");
    if (!isRemoteAnimationEnable_) {
        WLOGE("RSWindowAnimation: failed to set window animation controller, remote animation is not enabled");
        return WMError::WM_ERROR_NO_REMOTE_ANIMATION;
    }
    if (controller == nullptr) {
        WLOGFE("RSWindowAnimation: failed to set window animation controller, controller is null!");
        return WMError::WM_ERROR_NULLPTR;
    }

    if (windowAnimationController_ != nullptr) {
        WLOGFI("RSWindowAnimation: maybe user switch!");
    }

    windowAnimationController_ = controller;
    return WMError::WM_OK;
}

RSIWindowAnimationController 具體定義見：foundation\graphic\graphic_2d\interfaces\kits\napi\graphic\animation\window_animation_manager\rs_window_animation_controller.cpp

void RSWindowAnimationController::HandleOnStartApp(StartingAppType type,
    const sptr<RSWindowAnimationTarget>& startingWindowTarget,
    const sptr<RSIWindowAnimationFinishedCallback>& finishedCallback)
{
    WALOGD("Handle on start app.");
    NativeValue* argv[] = {
        RSWindowAnimationUtils::CreateJsWindowAnimationTarget(engine_, startingWindowTarget),
        RSWindowAnimationUtils::CreateJsWindowAnimationFinishedCallback(engine_, finishedCallback),
    };

    switch (type) {
        case StartingAppType::FROM_LAUNCHER:
            CallJsFunction("onStartAppFromLauncher", argv, ARGC_TWO);
            break;
        case StartingAppType::FROM_RECENT:
            CallJsFunction("onStartAppFromRecent", argv, ARGC_TWO);
            break;
        case StartingAppType::FROM_OTHER:
            CallJsFunction("onStartAppFromOther", argv, ARGC_TWO);
            break;
        default:
            WALOGE("Unknow starting app type.");
            break;
    }
}

void RSWindowAnimationController::HandleOnAppTransition(const sptr<RSWindowAnimationTarget>& fromWindowTarget,
    const sptr<RSWindowAnimationTarget>& toWindowTarget,
    const sptr<RSIWindowAnimationFinishedCallback>& finishedCallback)
{
    WALOGD("Handle on app transition.");
    NativeValue* argv[] = {
        RSWindowAnimationUtils::CreateJsWindowAnimationTarget(engine_, fromWindowTarget),
        RSWindowAnimationUtils::CreateJsWindowAnimationTarget(engine_, toWindowTarget),
        RSWindowAnimationUtils::CreateJsWindowAnimationFinishedCallback(engine_, finishedCallback),
    };
    CallJsFunction("onAppTransition", argv, ARGC_THREE);
}
...

通過 CallJsFunction 實現(xiàn)具體的 napi 調(diào)用拂玻，實現(xiàn)具體的動畫效果

寫在最后

如果你覺得這篇內(nèi)容對你還蠻有幫助酸些，我想邀請你幫我三個小忙：

• 點贊宰译，轉(zhuǎn)發(fā)，有你們的 『點贊和評論』魄懂，才是我創(chuàng)造的動力沿侈。
• 關(guān)注小編，同時可以期待后續(xù)文章ing??市栗，不定期分享原創(chuàng)知識缀拭。
• 想要獲取更多完整鴻蒙最新學(xué)習(xí)知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu