OpenHarmony动画详解

最新推荐文章于 2024-08-06 21:24:05 发布
最新推荐文章于 2024-08-06 21:24:05 发布
阅读量2.2k 收藏 20
点赞数 23
分类专栏： 经验分享 鸿蒙开发 移动开发 文章标签： 移动开发 Openharmony 华为 harmonyos 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71263309/article/details/137641688
版权

简介

动画是组件的基础特性之一，精心设计的动画使 UI 变化更直观，平滑的动画效果能够很好地增强差异性功能的过渡，有助于改进应用程序的外观并改善用户体验。

OpenHarmony 动画分类：

  • 属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括 width、height、backgroundColor、opacity、scale、rotate、translate 等。
  • 显示动画：提供全局 animateTo 显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
  • 转场动画
    • 页面间转场：在全局 pageTransition 方法内配置页面入场和页面退场时的自定义转场动效。
    • 组件内转场：组件内转场主要通过 transition 属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合animateTo 才能生效，动效时长、曲线、延时跟随 animateTo 中的配置）。
    • 共享元素转场：设置页面间转场时共享元素的转场动效。
  • 路径动画：设置组件进行位移动画时的运动路径。
  • 窗口动画：提供启动退出过程中控件动画和应用窗口联动动画能力。

动画详解

属性动画

通过控件的 animation 属性实现动画效果。

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

参数类型必填描述
durationnumber否设置动画时长。单位为毫秒，默认动画时长为 1000 毫秒。 默认值：1000
temponumber否动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢 值为 0 时，表示不存在动画。 默认值：1
curvestringCurveICurve9+
delaynumber否设置动画延迟执行的时长。单位为毫秒，默认不延时播放。 默认值：0
iterationsnumber否设置播放次数。默认播放一次，设置为-1 时表示无限次播放。 默认值：1
playModePlayMode否设置动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal
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, // 设置-1表示动画无限循环
            playMode: PlayMode.AlternateReverse,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.rotateAngle = 90
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}

显示动画

通过全局 animateTo 显式动画接口来定由于闭包代码导致的状态变化插入过渡动效。

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

参数类型是否必填描述
valueAnimateParam是设置动画效果相关参数。
event() => void是指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

AnimateParam 对象说明

名称类型描述
durationnumber动画持续时间，单位为毫秒。 默认值：1000
temponumber动画的播放速度，值越大动画播放越快，值越小播放越慢，为 0 时无动画效果。 默认值：1.0
curveCurveCurves
delaynumber单位为 ms(毫秒)，默认不延时播放。 默认值：0
iterationsnumber默认播放一次，设置为-1 时表示无限次播放。 默认值：1
playModePlayMode设置动画播放模式，默认播放完成后重头开始播放。 默认值：PlayMode.Normal
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, // 设置-1表示动画无限循环
            playMode: PlayMode.AlternateReverse,
            onFinish: () => {
              console.info('play end')
            }
          }, () => {
            this.rotateAngle = 90
          })
        })
    }.width('100%').margin({ top: 5 })
  }
}

注：效果和属性动画等价

转场动画

页面间转场

在全局 pageTransition 方法内配置页面入场和页面退场时的自定义转场动效。

名称参数参数描述
PageTransitionEnter{ type: RouteType, duration: number, curve:Curvestring, delay: number }
PageTransitionExit{ type: RouteType, duration: number, curve: Curvestring, delay: number }

RouteType 枚举说明

名称描述
Pop重定向指定页面。PageA 跳转到 PageB 时，PageA 为 Exit+Pop，PageB 为 Enter+Pop。
Push跳转到下一页面。PageB 返回至 PageA 时，PageA 为 Enter+Push，PageB 为 Exit+Push。
None页面未重定向。

属性

参数名称参数类型必填参数描述
slideSlideEffect否设置页面转场时的滑入滑出效果。 默认值：SlideEffect.Right
translate{ x? : numberstring, y? : numberstring, z? : number
scale{ x? : number, y? : number, z? : number, centerX? : numberstring, centerY? : numberstring }
opacitynumber否设置入场的起点透明度值或者退场的终点透明度值。 默认值：1

SlideEffect 枚举说明

名称描述
Left设置到入场时表示从左边滑入，出场时表示滑出到左边。
Right设置到入场时表示从右边滑入，出场时表示滑出到右边。
Top设置到入场时表示从上边滑入，出场时表示滑出到上边。
Bottom设置到入场时表示从下边滑入，出场时表示滑出到下边。

事件

事件功能描述
onEnter(event: (type?: RouteType, progress?: number) => void)回调入参为当前入场动画的归一化进度[0 - 1]。 - type：跳转方法。 - progress：当前进度。
onExit(event: (type?: RouteType, progress?: number) => void)回调入参为当前退场动画的归一化进度[0 - 1]。 - type：跳转方法。 - progress：当前进度。

组件内转场

组件内转场主要通过 transition 属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验（需要配合 animateTo) 才能生效，动效时长、曲线、延时跟随 animateTo 中的配置）。

属性

名称参数类型参数描述
transitionTransitionOptions所有参数均为可选参数，详细描述见 TransitionOptions 参数说明。

TransitionOptions 参数说明

参数名称参数类型必填参数描述
typeTransitionType否**默认包括组件新增和删除。 默认值：TransitionType.All****说明：**不指定 Type 时说明插入删除使用同一种效果。
opacitynumber否设置组件转场时的透明度效果，为插入时起点和删除时终点的值。 默认值：1
translate{ x? : number, y? : number, z? : number }否设置组件转场时的平移效果，为插入时起点和删除时终点的值。 -x：横向的平移距离。 -y：纵向的平移距离。 -z：竖向的平移距离。
scale{ x? : number, y? : number, z? : number, centerX? : number, centerY? : number }否设置组件转场时的缩放效果，为插入时起点和删除时终点的值。 -x：横向放大倍数（或缩小比例）。 -y：纵向放大倍数（或缩小比例）。 -z：竖向放大倍数（或缩小比例）。 - centerX、centerY 缩放中心点。 - 中心点为 0 时，默认的是组件的左上角。
rotate{ x?: number, y?: number, z?: number, angle?: Angle, centerX?: Length, centerY?: Length }否设置组件转场时的旋转效果，为插入时起点和删除时终点的值。 -x：横向的旋转向量。 -y：纵向的旋转向量。 -z：竖向的旋转向量。 - centerX,centerY 指旋转中心点。 - 中心点为（0，0）时，默认的是组件的左上角。

示例

// 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%')
  }
}

共享元素转场

设置页面间转场时共享元素的转场动效。

属性

名称参数参数描述
sharedTransitionid: string, { duration?: number, curve?: Curve**string, delay?: number, motionPath?: { path: string, form?: number, to?: number, rotatable?: boolean }, zIndex?: number, type?😗*SharedTransitionEffectType}

示例

示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。

// 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%')
  }
}

路径动画

设置组件进行位移动画时的运动路径。

属性

名称参数类型默认值描述
motionPath**{ path: string, from?: number, to?: number, rotatable?: boolean }****说明：**path 中支持使用 start 和 end 进行起点和终点的替代，如： ‘Mstart.x start.y L50 50 Lend.x end.y Z’{ ‘’, 0.0, 1.0, false }设置组件的运动路径，入参说明如下： - path：位移动画的运动路径，使用 svg 路径字符串。 - from：运动路径的起点，默认为 0.0。 - to：运动路径的终点，默认为 1.0。 - rotatable：是否跟随路径进行旋转。

示例

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

  build() {
    Column() {
      Button('click me')
        // 执行动画：从起点移动到(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)
  }
}

窗口动画

窗口动画管理器，可以监听应用启动退出时应用的动画窗口，提供启动退出过程中控件动画和应用窗口联动动画能力。

导入模块

import windowAnimationManager from '@ohos.animation.windowAnimationManager'

windowAnimationManager.setController

setController(controller: WindowAnimationController): void

设置窗口动画控制器。

在使用 windowAnimationManager 的其他接口前，需要预先调用本接口设置窗口动画控制器。

参数：

参数名类型必填说明
controllerWindowAnimationController是窗口动画的控制器。

windowAnimationManager.minimizeWindowWithAnimation

minimizeWindowWithAnimation(windowTarget: WindowAnimationTarget): Promise

最小化动画目标窗口，并返回动画完成的回调。使用 Promise 异步回调。

参数：

参数名类型必填说明
windowTargetWindowAnimationTarget是动画目标窗口。

返回值：

类型说明
PromiseWindowAnimationFinishedCallbackPromise 对象，返回动画完成的回调。

WindowAnimationController

窗口动画控制器。在创建一个 WindowAnimationController 对象时，需要实现其中的所有回调函数。

onStartAppFromLauncher

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

从桌面启动应用时的回调。

参数名类型必填说明
startingWindowTargetWindowAnimationTarget是动画目标窗口。
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onStartAppFromRecent

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

从最近任务列表启动应用时的回调。

参数名类型必填说明
startingWindowTargetWindowAnimationTarget是动画目标窗口。
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onStartAppFromOther

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

从除了桌面和最近任务列表以外其他地方启动应用时的回调。

参数名类型必填说明
startingWindowTargetWindowAnimationTarget是动画目标窗口。
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onAppTransition

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

应用转场时的回调。

参数名类型必填说明
fromWindowTargetWindowAnimationTarget是转场前的动画窗口。
toWindowTargetWindowAnimationTarget是转场后的动画窗口。
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onMinimizeWindow

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

最小化窗口时的回调。

参数名类型必填说明
minimizingWindowTargetWindowAnimationTarget是动画目标窗口。
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onCloseWindow

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

关闭窗口时的回调。

参数名类型必填说明
closingWindowTargetWindowAnimationTarget是动画目标窗口。
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onScreenUnlock

onScreenUnlock(finishCallback: WindowAnimationFinishedCallback): void

屏幕解锁时的回调。

参数名类型必填说明
finishCallbackWindowAnimationFinishedCallback是动画完成后的回调。

onWindowAnimationTargetsUpdate

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

动画目标窗口更新时的回调

参数名类型必填说明
fullScreenWindowTargetWindowAnimationTarget是全屏状态的动画目标窗口。
floatingWindowTargetsArray WindowAnimationTarget是悬浮状态的动画目标窗口

WindowAnimationFinishedCallback

动画完成后的回调。
onAnimationFinish
onAnimationFinish():void

结束本次动画。

应用层使用

OpenHarmony 中应用层的窗口动画定义在 Launcher 系统应用中，由 Launcher 应用统一规范应用的窗口动画

WindowController 的实现见 WindowAnimationControllerImpl.ts，定义了 onStartAppFromLauncher、onStartAppFromRecent、onStartAppFromOther、onAppTransition、onMinimizeWindow、onCloseWindow、onScreenUnlock 等实现方式

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 中定义了具体的窗口动画实现效果（通过 animateTo 实现具体的动画效果）

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
    })
  }
}

注：若想修改系统的窗口动画效果，可通过修改对应的动画实现

底层实现

窗口动画的底层实现具体见：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 实现具体的 napi 调用，实现具体的动画效果

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

小米椒……
关注
  • 23
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
OpenHarmony实战开发-如何实现自定义属性动画
2401_82546228的博客
04-27 405
属性动画是可动画属性的参数值发生变化时，引起UI上产生的连续视觉效果。当参数值发生连续变化，且设置到可以引起UI发生变化的属性接口上时，就可以实现属性动画。
HarmonyOS/OpenHarmony应用开发-属性动画
weixin_69135651的博客
01-03 711
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。
【鸿蒙南向开发】OpenHarmony——Graphic子系统之开机动画
最新发布
HarmonyOS_666的博客
08-06 1027
标准系统提供了图形接口能力和窗口管理接口能力， 支持应用程序框架子系统和ACE等子系统使用。故可以根据不同硬件系统选择编译不同模块，选择适配轻量系统或者标准系统。图形子系统主要包括UI组件、布局、动画、字体、输入事件、窗口管理、渲染绘制等模块。以下主要分析标准系统能力。代码版本是OpenHarmony3.1版本。开机动画是鸿蒙系统启动后，运行的第一个和图形渲染相关的进程，相关依赖相对独立便于分析，是分析图形子系统比较好的切入点。图形子系统主要依赖窗口、surface、render service。
OpenHarmony标准设备应用开发（二）——布局、动画与音乐
OpenHarmony_dev的博客
04-07 1575
（以下内容来自开发者分享，不代表 OpenHarmony 项目群工作委员会观点） 邢碌 上一章我们讲解了应用编译环境准备，设备编译环境准备，开发板烧录，将一个最简单的 OpenAtom OpenHarmony（以下简称“OpenHarmony”）程序安装到我们的标准设备上。 本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例：分布式音乐播放、传炸弹、购物车等样例，分别介绍下音乐播放、显示
OpenHarmony实战开发-如何实现静态动画和连续动画。
2401_82546228的博客
04-29 797
静态动画的核心是transform样式，主要可以实现以下三种变换类型，一次样式设置只能实现一种类型变换。
OpenHarmony实战开发-动画效果、如何实现色彩渐变效果
2401_82546228的博客
04-28 342
通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。
Android 混合动画详解及实现代码
01-04
在Android开发，我们会经常使用到动画，但是简单的一种动画（如旋转、缩放、渐变、位移等）有时候并不能满足我们项目的要求，这时候就需要运用到混合动画，那么在安卓中是如何实现一个炫酷的混合动画，下面是一个...
Android Activity切换动画详解及实例
01-04
Android Activity切换动画 Android Activity切换动画是指从Activity A 跳转至Activity B的时候，Activity A 有退出动画，Activity B 有进入动画。这个动画的实现很简单，在startActivity(intent)之后调...
Android源码解析之属性动画详解
01-04
大家在日常开发中离不开动画，属性动画更为强大，我们不仅要知道如何使用，更要知道他的原理。这样，才能得心应手。那么，今天，就从最简单的来说，了解下属性动画的原理。 ObjectAnimator .ofInt(mView,width,100...
Android编程之Animation动画详解
01-05
本文实例讲述了Android编程之Animation动画用法。分享给大家供大家参考，具体如下： Animations 一、Animations介绍 Animations是一个实现android UI界面动画效果的API，Animations提供了一系列的动画效果，可以进行...
WPF动画详解
qq_30725967的博客
09-08 4759
动画的本质就是在一个时间段内对象位置、角度、颜色、透明度等属性值的连续变化。这些属性种，有些是对象自身的单属性，有些是图形变形 的属性。WPF规定，可以用来制作动画的属性必须是依赖属性。简单的动画由一个元素来完成就可以了，就像一个演员的独角戏，WPF吧简单动画称为AnimationTimeline。复杂的动画就需要UI上的多个元素协同完成，就像电影中的一段场景。复杂动画的协同包括有哪些UI元素参与动画、每个元素的动画行为是什么、动画何时开始何时结束等。WPF把一组协同的动画也称为Storyboard。
OpenHarmony开发实战：动画样式（JS），2024年最新自学HarmonyOS鸿蒙
2401_84166396的博客
04-13 1034
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。为了能够帮助大家快速掌握**鸿蒙（HarmonyOS NEXT）**应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
OpenHarmony 启动流程优化
m0_70748458的博客
04-26 1384
openharmony支持dmesg打印kernel log和hilog 打印openharony自己的log，所以需要在开机时抓取这两种log来分析开机流程。openharony的开机流程可以参考
Harmony/OpenHarmony应用开发-转场动画页面间转场
weixin_69135651的博客
12-26 330
curve：动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。
OpenHarmony标准系统开机时长优化
OpenHarmony_dev的博客
04-10 1231
我们该如何在OpenAtom OpenHarmony（简称OpenHarmony ） 标准系统现有的能力下，完成秒级开机？
OpenHarmony实战开发-如何实现组件内转场 (transition)
m0_70749039的博客
05-27 890
组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，主要用于容器组件中的子组件插入和删除时，提升用户体验。
【鸿蒙开发】动画
d312697510的博客
04-16 1789
鸿蒙开发arkts，属性动画，显式动画，路径动画，转场动画
【HarmonyOS】【应用开发】动画-属性动画与显式动画
开发小鸽
01-07 2380
官网对于属性动画的定义如下：组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等个人理解：属性动画针对的是同一个组件的属性变化情况，如在同一个页面中触发了组件的属性变化，这个变化需要以过渡的方式体现，这就需要属性动画来承接这个过渡过程，不然变化就会显得十分突兀与生硬。因此，只要组件的指定属性有变化，那么这个变化就会通过属性动画来体现。
鸿蒙Harmony应用开发—ArkTS-属性动画
m0_64420071的博客
03-20 3190
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值