【OpenHarmony动画】如何使用动画

最新推荐文章于 2024-05-23 20:52:25 发布
最新推荐文章于 2024-05-23 20:52:25 发布
阅读量381 收藏 1
点赞数 1
分类专栏： Openharmony 文章标签： 华为 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caigoutu/article/details/132490058
版权

OpenHarmony动画

文章目录

摘要

在应用开发时，我们常常遇到，需要添加动画效果以优化用户体验，比如常见的动画效果有转场动画，组件转场等。本文就以动画开发范例为例，来讲解OpenHarmony应用动画开发相关的技术点，帮助开发者快速学习动画。

关键字

OpenHarmony 动画 属性动画 显式动画 转场动画 ArkUI

概述

ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律（即曲线）等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。
ArkUI提供按照页面分类和按照基础能力分类的动画能力。 本文按照基础能力分类的动画能力，从使用场景出发，提供各种动画的使用方法和注意事项，使开发者快速学习动画。

通过本篇文章的学习，你将学会：
1.如何使用属性动画
2.如何使用显式动画
3.如何使用转场动画

按照页面分类的动画

ArkUI提供的动画能力按照页面的分类方式，可分为页面内的动画和页面间的动画。如下图所示，页面内的动画指在一个页面内即可发生的动画，页面间的动画指两个页面跳转时才会发生的动画。

在这里插入图片描述

按照基础能力分类的动画

如果按照基础能力分，可分为属性动画、显式动画、转场动画三部分。如下图所示。

在这里插入图片描述

属性动画

效果预览

在这里插入图片描述

实现思路

通过改变组件的某些通用属性值时，实现属性动画渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
参数说明
名称参数必填参数描述
durationnumber否设置动画时长。
默认值：1000
单位：毫秒
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
- 在ArkTS卡片上最大动画持续时间为1000毫秒。
- 设置浮点型类型的值时，向下取整；设置值为
1.2，按照1处理。
temponumber否动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。值为0时，表示不存在动画。
默认值：1
curvestring/Curve否设置动画曲线。
默认值：Curve.EaseInOut
从API version 9开始，该接口支持在ArkTS卡片中使用。
delaynumber否设置动画延迟执行的时长。
默认值：0，不延迟播放。
单位：毫秒
取值范围：[0, +∞)
说明：
设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
iterationsnumber否设置播放次数。
默认值：1
取值范围：[-1, +∞)
说明：
设置为-1时表示无限次播放。设置为0时表示无动画效果。
playModePlayMode否设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。
onFinish() => void否状态回调，动画播放完成时触发。
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。

显式动画

效果预览

在这里插入图片描述

实现思路

通过ArkUI提供的全局animateTo()显式动画接口的属性值改变，来指定由于闭包代码导致的状态变化从而插入过渡动效。

animateTo(value: AnimateParam, event: () => void): void
参数说明
名称参数参数描述
durationnumber设置动画时长。
默认值：1000
单位：毫秒
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
- 在ArkTS卡片上最大动画持续时间为1000毫秒。
- 设置浮点型类型的值时，向下取整；设置值为
1.2，按照1处理。
temponumber动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。值为0时，表示不存在动画。
默认值：1
curvestring/Curve设置动画曲线。
默认值：Curve.EaseInOut
从API version 9开始，该接口支持在ArkTS卡片中使用。
delaynumber设置动画延迟执行的时长。
默认值：0，不延迟播放。
单位：毫秒
取值范围：[0, +∞)
说明：
设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
iterationsnumber设置播放次数。
默认值：1
取值范围：[-1, +∞)
说明：
设置为-1时表示无限次播放。设置为0时表示无动画效果。
playModePlayMode设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal
从API version 9开始，该接口支持在ArkTS卡片中使用。
onFinish() => void状态回调，动画播放完成时触发。
从API version 9开始，该接口支持在ArkTS卡片中使用。
说明：
当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。

转场动画

此处以页面转场动画为例

效果预览

在这里插入图片描述

实现思路

页面转场效果写在pageTransition函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。

PageTransitionEnter的接口为：

PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})

PageTransitionExit的接口为：

PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number})

名称参数必填参数描述
PageTransitionEnter{
type?: RouteType,
duration?: number,
curve?: string,
delay?: number
}		否设置当前页面的自定义入场动效。
- type：页面转场效果生效的路由类型。
默认值：RouteType.None。
- duration：动画的时长。
单位：毫秒
默认值：1000
- 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”。
默认值：Curve.Linear
- delay：动画延迟时长。
单位：毫秒
默认值：0
说明：
没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。
PageTransitionExit{
type?: RouteType,
duration?: number,
curve?: string,
delay?: number
}		否设置当前页面的自定义退场动效。
- type：页面转场效果生效的路由类型。
默认值：RouteType.None。
- duration：动画的时长。
单位：毫秒
默认值：1000
- curve：动画曲线，string类型取值与PageTransitionEnter相同。
 默认值：Curve.Linear
- delay：动画延迟时长。
单位：毫秒
默认值：0
说明：
没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。

说明：
1、上述接口定义了PageTransitionEnter和PageTransitionExit组件，可通过slide、translate、scale、opacity属性定义不同的页面转场效果。对于PageTransitionEnter而言，这些效果表示入场时起点值，对于PageTransitionExit而言，这些效果表示退场的终点值，这一点与组件转场transition配置方法类似。此外，PageTransitionEnter提供了onEnter接口进行自定义页面入场动画的回调，PageTransitionExit提供了onExit接口进行自定义页面退场动画的回调。

2、上述接口中的参数type，表示路由生效的类型，这一点开发者容易混淆其含义。页面转场的两个页面，必定有一个页面退出，一个页面进入。如果通过router.pushUrl操作从页面A跳转到页面B，则页面A退出，做页面退场动画，页面B进入，做页面入场动画。如果通过router.back操作从页面B返回到页面A，则页面B退出，做页面退场动画，页面A进入，做页面入场动画。即页面的PageTransitionEnter既可能是由于新增页面(push，入栈)引起的新页面的入场动画，也可能是由于页面返回(back，或pop，出栈)引起的页面栈中老页面的入场动画，为了能区分这两种形式的入场动画，提供了type参数，这样开发者能完全定义所有类型的页面转场效果。

属性说明
参数名称参数类型必填参数描述
slide详见slideEffect枚举说明否设置页面转场时的滑入滑出效果。
translate{
x?  : number   string,
y?  : number   string,
z?  : number   string
}		否设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。
- x：横向的平移距离。
- y：纵向的平移距离。
- z：竖向的平移距离。
scale{
x? : number,
y? : number,
z? : number,
centerX? : number  string,
centerY? : number  string
}		否设置页面转场时的缩放效果，为入场时起点和退场时终点的值。
- x：横向放大倍数（或缩小比例）。
- y：纵向放大倍数（或缩小比例）。
- z：竖向放大倍数（或缩小比例）。
- centerX、centerY缩放中心点。centerX和centerY默认值是"50%"，即默认以页面的中心点为旋转中心点。
- 中心点为(0, 0)代表页面的左上角。
opacitynumber否设置入场的起点透明度值或者退场的终点透明度值。
RouteType枚举说明
名称描述
Pop重定向指定页面。从PageB回退到之前的页面PageA。对于PageB，指定RouteType为None或者Pop的PageTransitionExit组件样式生效，对于PageA，指定RouteType为None或者Pop的PageTransitionEnter组件样式生效。
Push跳转到下一页面。PageA跳转到下一个新的界面PageB。对于PageA，指定RouteType为None或者Push的PageTransitionExit组件样式生效，对于PageB，指定RouteType为None或者Push的PageTransitionEnter组件样式生效。
None页面未重定向。如Push和Pop描述中RouteType为None的情形，即页面进场时PageTransitionEnter的转场效果生效；退场时PageTransitionExit的转场效果生效。
SlideEffect枚举说明
名称描述
Left设置到入场时表示从左边滑入，出场时表示滑出到左边。
Right设置到入场时表示从右边滑入，出场时表示滑出到右边。
Top设置到入场时表示从上边滑入，出场时表示滑出到上边。
Bottom设置到入场时表示从下边滑入，出场时表示滑出到下边。
事件说明
事件功能描述
onEnter(event: (type?:  RouteType,  progress?:  number)  =>  void)回调入参为当前入场动画的归一化进度[0 - 1]。
- type：跳转方法。
- progress：当前进度。
触发该事件的条件：
逐帧回调，直到入场动画结束，progress从0变化到1。
onExit(event: (type?:  RouteType,  progress?:  number)  =>  void)回调入参为当前退场动画的归一化进度[0 - 1]。
- type：跳转方法。
- progress：当前进度。
触发该事件的条件：
逐帧回调，直到退场动画结束，progress从0变化到1。
type配置为RouteType.None

type为RouteType.None表示对页面栈的push、pop操作均生效，type的默认值为RouteType.None。

// page A
pageTransition() {
  // 定义页面进入时的效果，从左侧滑入，时长为1200ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionEnter({ type: RouteType.None, duration: 1200 })
    .slide(SlideEffect.Left)
  // 定义页面退出时的效果，向左侧滑出，时长为1000ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionExit({ type: RouteType.None, duration: 1000 })
    .slide(SlideEffect.Left)
}

// page B
pageTransition() {
  // 定义页面进入时的效果，从右侧滑入，时长为1000ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionEnter({ type: RouteType.None, duration: 1000 })
    .slide(SlideEffect.Right)
  // 定义页面退出时的效果，向右侧滑出，时长为1200ms，无论页面栈发生push还是pop操作均可生效
  PageTransitionExit({ type: RouteType.None, duration: 1200 })
    .slide(SlideEffect.Right)
}
type配置为RouteType.Push或RouteType.Pop

1、type为RouteType.Push表示仅对页面栈的push操作生效，type为RouteType.Pop表示仅对页面栈的pop操作生效。
2、假设页面栈为标准实例模式，即页面栈中允许存在重复的页面。可能会有4种场景，对应的页面转场效果如下表。

路由操作页面A转场效果页面B转场效果
router.pushUrl，从页面A跳转到新增的页面B页面退出，PageTransitionExit且type为RouteType.Push的转场样式生效，向左侧滑出屏幕页面进入，PageTransitionEnter且type为RouteType.Push的转场样式生效，从右侧滑入屏幕
router.back，从页面B返回到页面A页面进入，PageTransitionEnter且type为RouteType.Pop的转场样式生效，从左侧滑入屏幕页面退出，PageTransitionExit且type为RouteType.Pop的转场样式生效，向右侧滑出屏幕
router.pushUrl，从页面B跳转到新增的页面A页面进入，PageTransitionEnter且type为RouteType.Push的转场样式生效，从右侧滑入屏幕页面退出，PageTransitionExit且type为RouteType.Push的转场样式生效，向左侧滑出屏幕
router.back，从页面A返回到页面B页面退出，PageTransitionExit且type为RouteType.Pop的转场样式生效，向右侧滑出屏幕页面进入，PageTransitionEnter且type为RouteType.Pop的转场样式生效，从左侧滑入屏幕

说明：

  1. 由于每个页面的页面转场样式都可由开发者独立配置，而页面转场涉及到两个页面，开发者应考虑两个页面的页面转场效果的衔接，如时长尽量保持一致。
  2. 如果没有定义匹配的页面转场样式，则该页面使用系统默认的页面转场样式。
禁用某页面的页面转场
  pageTransition() {
  PageTransitionEnter({ type: RouteType.None, duration: 0 })
  PageTransitionExit({ type: RouteType.None, duration: 0 })
}

通过设置页面转场的时长为0，可使该页面无页面转场动画。

快速开始

属性动画

开发者可在项目中的entry目录下进行代码开发。

构建页面结构

编写页面结构

  1. 在页面添加Button组件，并设置其样式。
  2. 用变量flag控制按钮点击前后的两种状态：动画跳转前：flag=true;点击按钮后将flag状态置为false，flag=false时代表动画完成效果后状态并将flag重新置于true;

工程创建后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Button组件组成。“Index.ets”文件的示例如下：

@Entry
@Component
struct AnimationSample {
  @State widthSize: number = 160;
  @State heightSize: number = 80;
  @State rotateAngle: number = 0;
  @State flag: boolean = true;

  build() {
    Column() {
      Scroll() {
        Column() {
          Button()
            // 添加按钮，以响应用户点击
            .onClick(() => {
              if (this.flag) {
                this.heightSize = 60;
              } else {
                this.heightSize = 80;
              }
              this.flag = !this.flag;
            })
            .margin(35)
            .width(this.widthSize)
            .height(this.heightSize)

          Button()
            // 添加按钮，以响应用户点击
            .onClick(() => {})
            .width(160)
            .margin(35)
        .constraintSize({ minHeight: '100%' })
        .margin({ bottom: 20 })
      }
      .borderRadius(24)
      .backgroundColor(Color.White)
      .height('90%')
      .width('100%')
      .margin({ left: 12, right: 12 })
    }
  }
}
引用资源
  1. 定义需要被引用的文字资源：在“Project”窗口，点击“entry > src > main > resources > base > element > string.json”，打开“string.json”文件，加入文字资源，如代码展示：
{
  "string": [
    {
      "name": "attribute_animation_change_size",
      "value": "改变大小(属性动画)"
    },
    {
      "name": "attribute_animation_change_rotation",
      "value": "改变旋转角度"
    }
  ]
}

引用文字资源：在 Button() 中用 $r(‘app.string.xx’) 的方式引用文字资源。

  1. “Index.ets”文件的示例如下：
@Entry
@Component
struct AnimationSample {
  @State widthSize: number = 160;
  @State heightSize: number = 80;
  @State rotateAngle: number = 0;
  @State flag: boolean = true;

  build() {
    Column() {
      Scroll() {
        Column() {
          // 按钮引用文字资源
          Button({ title: $r('app.string.attribute_animation') })
            // 添加按钮，以响应用户点击
            .onClick(() => {
              if (this.flag) {
                this.heightSize = 60;
              } else {
                this.heightSize = 80;
              }
              this.flag = !this.flag;
            })
            .margin(35)
            .width(this.widthSize)
            .height(this.heightSize)
          // 按钮引用文字资源
          Button($r('app.string.attribute_animation_change_rotation'))
            // 添加按钮，以响应用户点击
            .onClick(() => {})
            .width(160)
            .margin(35)
        .constraintSize({ minHeight: '100%' })
        .margin({ bottom: 20 })
      }
      .borderRadius(24)
      .backgroundColor(Color.White)
      .height('90%')
      .width('100%')
      .margin({ left: 12, right: 12 })
    }
  }
}
加入属性动画

在Button()组件内的点击事件中增加属性动画.animation({})，参数详见上文。
“Index.ets”文件的示例如下：

@Entry
@Component
struct AnimationSample {
  @State widthSize: number = 160;
  @State heightSize: number = 80;
  @State rotateAngle: number = 0;
  @State flag: boolean = true;

  build() {
    Column() {
      Scroll() {
        Column() {
          // 按钮引用文字资源
          Button({ title: $r('app.string.attribute_animation') })
            // 添加按钮，以响应用户点击
            .onClick(() => {
              if (this.flag) {
                this.heightSize = 60;
              } else {
                this.heightSize = 80;
              }
              this.flag = !this.flag;
            })
            .margin(35)
            .width(this.widthSize)
            .height(this.heightSize)
            // 添加属性动画,点击按钮后，属性动画为一个持续2s，只播放1次的渐变动画
            .animation({
              duration: 2000,
              curve: Curve.EaseOut,
              iterations: 1,
              playMode: PlayMode.Normal
            })
          
          Button($r('app.string.attribute_animation_change_rotation'))
            // 添加按钮，以响应用户点击
            .onClick(() => {})
            .width(160)
            .margin(35)
            // 添加属性动画，点击按钮后，属性动画为一个持续1.2s，播放2次，结束后旋转回原位的渐变动画
            .rotate({ angle: this.rotateAngle })
            .animation({
              duration: 1200,
              curve: Curve.Friction,
              delay: 500,
              iterations: 2,
              playMode: PlayMode.Alternate,
              onFinish: () => {
                this.rotateAngle = 0;
              }
            })
        .constraintSize({ minHeight: '100%' })
        .margin({ bottom: 20 })
      }
      .borderRadius(24)
      .backgroundColor(Color.White)
      .height('90%')
      .width('100%')
      .margin({ left: 12, right: 12 })
    }
  }
}

显式动画

构建页面结构

编写页面结构

  1. 在页面添加Button组件，并设置其样式。
  2. 用变量flag控制按钮点击前后的两种状态：动画跳转前：flag=true;动画完成后：flag=false，每次点击都将flag值取反;
加入显式动画

添加显式动画属性：在 Button().animateTo()的闭包函数中改变动画属性值从而开始播放动画。关键代码如下：

// 按钮点击后，显式动画为一个持续1.2s，播放2次，第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
Button()
  .onClick(() => {
      animateTo({
        duration: 1200,
        curve: Curve.Friction,
        delay: 500,
        iterations: 2,
        playMode: PlayMode.Alternate,
        // 动效播放完成回调，表现为旋转回原位，旋转角度为0。
        onFinish: () => {
          this.rotateAngle = 0;
        }
      }, () => {
        this.rotateAngle = 90;
      });
    })

工程创建后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Button组件组成。“Index.ets”文件的示例如下：

@Entry
@Component
struct AnimationToSample {
  @State widthSize: number = 160;
  @State heightSize: number = 80;
  @State rotateAngle: number = 0;
  @State flag: boolean = true;

   build() {
    Column() {
      Scroll() {
        Column() {
          Button()
            .onClick(() => {
              if (this.flag) {
                // 显式动画接口，表现的显式动画为一个持续2s，播放1次，第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
                animateTo({
                  duration: 2000,
                  curve: Curve.EaseOut,
                  iterations: 1,
                  playMode: PlayMode.Normal,
                  onFinish: () => {}
                }, () => {
                  this.heightSize = 60;
                });
              } else {
                animateTo({}, () => {
                  this.heightSize = 80;
                });
              }
              this.flag = !this.flag;
            })
            .margin(35)
            .width(this.widthSize)
            .height(this.heightSize)
            .backgroundColor()

          Button()
            .onClick(() => {
              按钮点击后，显式动画为一个持续1.2s，播放2次，第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
              animateTo({
                duration: 1200,
                curve: Curve.Friction,
                delay: 500,
                iterations: 2,
                playMode: PlayMode.Alternate,
                onFinish: () => {
                  this.rotateAngle = 0;
                }
              }, () => {
                this.rotateAngle = 90;
              });
            })
            .width(160)
            .margin(35)
            .rotate({ angle: this.rotateAngle })
            .backgroundColor()
            }
        .constraintSize({ minHeight: '100%' })
      }
      .borderRadius(24)
      .backgroundColor(Color.White)
      .height('90%')
      .width('100%')
      .margin({ left: 12, right: 12 })
    }
  }
}
引用资源
  1. 定义需要被引用的文字资源：在“Project”窗口，点击“entry > src > main > resources > base > element > string.json”，打开“string.json”文件，加入文字资源，如代码展示：
{
  "string": [
    {
      "name": "attribute_animationTo_change_size",
      "value": "改变大小(显式动画)"
    },
    {
      "name": "attribute_animation_change_rotation",
      "value": "改变旋转角度"
    }
  ]
}

引用文字资源：在 Button() 中用 $r(‘app.string.xx’) 的方式引用文字资源。

  1. 定义需要被引用的颜色资源：在“Project”窗口，点击“entry > src > main > resources > base > element > color.json”，打开“color.json”文件，加入颜色资源，如代码展示：
{
   "color": [
   {
      "name": "app.color.background_btn",
      "value": "#e27a93"
    },
  ]
}

引用颜色资源：在 Button(){}.backgroundColor() 中用 $r(‘app.color.xx’) 的方式引用颜色资源。

  1. “Index.ets”文件的示例如下：
@Entry
@Component
struct AnimationToSample {
  @State widthSize: number = 160;
  @State heightSize: number = 80;
  @State rotateAngle: number = 0;
  @State flag: boolean = true;

   build() {
    Column() {
      Scroll() {
        Column() {
          // 按钮引用文字资源
          Button($r('app.string.attribute_animationTo_change_size'))
            .onClick(() => {
              if (this.flag) {
                // 显式动画接口，表现的显式动画为一个持续2s，播放1次，第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
                animateTo({
                  duration: 2000,
                  curve: Curve.EaseOut,
                  iterations: 1,
                  playMode: PlayMode.Normal,
                  onFinish: () => {}
                }, () => {
                  this.heightSize = 60;
                });
              } else {
                animateTo({}, () => {
                  this.heightSize = 80;
                });
              }
              this.flag = !this.flag;
            })
            .margin(35)
            .width(this.widthSize)
            .height(this.heightSize)
            // 按钮引用颜色资源
            .backgroundColor($r('app.color.background_btn'))
            
          // 按钮引用文字资源
          Button($r('app.string.attribute_animation_change_rotation'))
            .onClick(() => {
              // 按钮点击后，显式动画为一个持续1.2s，播放2次，第一轮正向播放旋转90度后停留0.5s结束后旋转回原位的渐变动画。
              animateTo({
                duration: 1200,
                curve: Curve.Friction,
                delay: 500,
                iterations: 2,
                playMode: PlayMode.Alternate,
                onFinish: () => {
                  this.rotateAngle = 0;
                }
              }, () => {
                this.rotateAngle = 90;
              });
            })
            .width(160)
            .margin(35)
            .rotate({ angle: this.rotateAngle })
            // 按钮引用颜色资源
            .backgroundColor($r('app.color.background_btn'))}
        .constraintSize({ minHeight: '100%' })
      }
      .borderRadius(24)
      .backgroundColor(Color.White)
      .height('90%')
      .width('100%')
      .margin({ left: 12, right: 12 })
    }
  }
}
注意事项

使用显性动画接口

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

时，其中需注意：

PlayMode属性说明：
1、PlayMode推荐使用PlayMode.Normal和PlayMode.Alternate，此场景下动画的第一轮是正向播放的。如使用PlayMode.Reverse和PlayMode.AlternateReverse，则动画的第一轮是逆向播放的，在动画刚开始时会跳变到终止状态，然后逆向播放动画。
2、使用PlayMode.Alternate或PlayMode.AlternateReverse时，开发者应保证动画最终状态和状态变量的取值一致，即应保证动画的最后一轮是正向播放的。使用PlayMode.Alternate时，iterations应为奇数。使用PlayMode.AlternateReverse时，iterations应为偶数。
3、不推荐使用PlayMode.Reverse，此场景下不仅会导致动画刚开始就跳变到终止状态，也会导致动画最终状态和状态变量的取值不同。

转场动画

构建第一个页面
  1. 下面介绍定义了所有的四种页面转场样式的页面转场动画示例：在第一个页面添加图片组件,按钮事件及跳转路由，并设置其样式。

工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Image，Button组件组成。“Index.ets”文件的示例如下：

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

@Entry
@Component
struct Index {

build() {
 Row() {
   Column() {
     Image($r('app.media.mountain'))
       .width('90%')
       .height('80%')
       .objectFit(ImageFit.Fill)
       .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
       .margin(30)

     Row({ space: 10 }) {
       Button("pushUrl")
         .onClick(() => {
           // 路由到下一个页面，push操作
           router.pushUrl({ url: 'pages/Second' });
         })
       Button("back")
         .onClick(() => {
           // 返回到上一页面，相当于pop操作
           router.back();
         })
     }.justifyContent(FlexAlign.Center)
   }
   .width("100%").height("100%")
   .alignItems(HorizontalAlign.Center)
 }
}
}
  1. 添加pageTransition动画跳转函数，并定义出所有的四种页面转场样式。

在默认页面基础上，我们添加一个pageTransition函数作为页面间动画跳转方法，响应用户点击，从而实现动画跳转到另一个页面。“Index.ets”文件的示例如下：

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

@Entry
@Component
struct Index {

build() {
 Row() {
   Column() {
     Image($r('app.media.mountain'))
       .width('90%')
       .height('80%')
       .objectFit(ImageFit.Fill)
       .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
       .margin(30)

     Row({ space: 10 }) {
       Button("pushUrl")
         .onClick(() => {
           // 路由到下一个页面，push操作
           router.pushUrl({ url: 'pages/Second' });
         })
       Button("back")
         .onClick(() => {
           // 返回到上一页面，相当于pop操作
           router.back();
         })
     }.justifyContent(FlexAlign.Center)
   }
   .width("100%").height("100%")
   .alignItems(HorizontalAlign.Center)
 }
}
 pageTransition() {
   // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效
   PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
     .slide(SlideEffect.Right)
   // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效
   PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
     .slide(SlideEffect.Left)
   // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效
   PageTransitionExit({ type: RouteType.Push, duration: 1000 })
     .slide(SlideEffect.Left)
   // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效
   PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
     .slide(SlideEffect.Right)
 }
}
构建第二个页面

参照第一个页面“Index.ets”文件

实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

说明：

开发者也可以在右键点击“pages”文件夹时，选择“New > Page”，则无需手动配置相关页面路由。

  1. 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：
{
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}

  1. 添加图片，按钮及跳转路由。

    参照第一个页面，在第二个页面添加图片组件，按钮事件和跳转路由等，并设置其样式。“Second.ets”文件的示例如下：

    // Second.ets
import router from '@ohos.router';
@Entry
@Component
struct Second {
  build() {
    Row() {
      Column() {
     Image($r('app.media.forest'))
       .width('90%')
       .height('80%')
       .objectFit(ImageFit.Fill)
       .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
       .margin(30)

     Row({ space: 10 }) {
       Button("pushUrl")
         .onClick(() => {
           // 路由到下一页面，push操作
           router.pushUrl({ url: 'pages/Index' });
         })
       Button("back")
         .onClick(() => {
           // 返回到上一页面，相当于pop操作
           router.back();
         })
     }.justifyContent(FlexAlign.Center)
   }
   .width("100%").height("100%")
   .alignItems(HorizontalAlign.Center)
    }
  }
}

  2. 添加pageTransition动画跳转函数，并定义出第二个页面所有的四种页面转场样式。

    参照第一个页面，我们添加一个pageTransition函数作为页面间动画跳转方法，响应用户点击，从而实现动画跳回到另一个页面。“Second.ets”文件的示例如下：

    // Second.ets
import router from '@ohos.router';
@Entry
@Component
struct Second {
  build() {
    Row() {
      Column() {
     Image($r('app.media.forest'))
       .width('90%')
       .height('80%')
       .objectFit(ImageFit.Fill)
       .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成
       .margin(30)

     Row({ space: 10 }) {
       Button("pushUrl")
         .onClick(() => {
           // 路由到下一页面，push操作
           router.pushUrl({ url: 'pages/Index' });
         })
       Button("back")
         .onClick(() => {
           // 返回到上一页面，相当于pop操作
           router.back();
         })
     }.justifyContent(FlexAlign.Center)
   }
   .width("100%").height("100%")
   .alignItems(HorizontalAlign.Center)
    }
  }
 pageTransition() {
      // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效
    PageTransitionEnter({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Right)
    // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效
    PageTransitionEnter({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效
    PageTransitionExit({ type: RouteType.Push, duration: 1000 })
      .slide(SlideEffect.Left)
    // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效
    PageTransitionExit({ type: RouteType.Pop, duration: 1000 })
      .slide(SlideEffect.Right)
 }
}
注意事项

假设页面栈为标准实例模式，即页面栈中允许存在重复的页面。可能会有4种场景，对应的页面转场效果如下表。

路由操作页面A转场效果页面B转场效果
router.pushUrl，从页面A跳转到新增的页面B页面退出，PageTransitionExit生效，向左侧滑出屏幕页面进入，PageTransitionEnter生效，从右侧滑入屏幕
router.back，从页面B返回到页面A页面进入，PageTransitionEnter生效，从左侧滑入屏幕页面退出，PageTransitionExit生效，向右侧滑出屏幕
router.pushUrl，从页面B跳转到新增的页面A页面进入，PageTransitionEnter生效，从左侧滑入屏幕页面退出，PageTransitionExit生效，向右侧滑出屏幕
router.back，从页面A返回到页面B页面退出，PageTransitionExit生效，向左侧滑出屏幕页面进入，PageTransitionEnter生效，从右侧滑入屏幕

如果希望pushUrl进入的页面总是从右侧滑入，back时退出的页面总是从右侧滑出，则上表中的第3、4种情况不满足要求，那么要完整的定义4个页面转场效果。

参考文档

1、动画组件 · OpenHarmony
2、属性动画接口 · OpenHarmony
3、显性动画接口 · OpenHarmony
4、转场动画接口(页面间转场) · OpenHarmony

兔子团
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
OpenHarmony实战开发-如何使用绘制组件实现自定义进度动画。
2401_82546228的博客
04-17 504
本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。
OpenHarmony实战开发-如何实现自定义属性动画
2401_82546228的博客
04-27 394
属性动画是可动画属性的参数值发生变化时，引起UI上产生的连续视觉效果。当参数值发生连续变化，且设置到可以引起UI发生变化的属性接口上时，就可以实现属性动画。
OpenHarmony实战开发-如何通过转场动画实现平滑过渡效果
最新发布
m0_70749039的博客
05-23 645
日常在应用时，经常需要衔接两个场景，或者两个镜头画面之间进行切换，切换时需要呈现一种平滑过渡效果。
[OpenHarmony UI实战]自定义对话框动效
m0_71263309的博客
04-10 361
安卓可以通过 setWindowAnimations 方法可以设置自定义对话框进入时的各种动效，项目中要求模拟滑入动效；本文以下图实现效果（点击按钮后从上方飞入一个模态对话框）的实现代码为例提供一种思路和方法。
【OpenHarmony 实战开发】 做一个 loading加载动画
m0_70748458的博客
05-09 1046
作为一个 OpenHarmony 南向开发者，接触北向应用开发并不多。北向开发 ArkUI 老是改来改去，对笔者这样的入门选手来说学习成本其实非常大，希望后面可以慢慢稳定下来吧。最近努力学习了一些，下面将学习经验分享如下：
OpenHarmony实战开发-左右拖动切换图片效果案例。
2401_82546228的博客
04-17 907
本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。
Lottie是一个移动库，可以解析导出为json的Adobe After Effects动画，并在移动设备上本地渲染它们
08-03
开发者可以通过研究这些内容来了解如何在OpenHarmony项目中集成和使用Lottie，从而在自己的应用中实现动态、引人入胜的动画效果。通过深入学习Lottie的工作原理和API，开发者可以充分利用这个库来提高用户体验，创造...
基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端
11-11
ArkUI的使用使得开发者能够在OpenHarmony平台上快速实现复杂的交互逻辑和美观的界面设计。 ArkUI框架的核心特点包括： 1. **声明式编程**：开发者通过描述UI元素的状态和变化，而不是直接操作UI元素，大大减少了...
OpenHarmony-material
02-24
通过这个签名的material文件，开发者可以放心地使用这些资源，确保其在OpenHarmony平台上运行时的稳定性和安全性。 总结来说，这个"OpenHarmony-material"压缩包提供了遵循Material Design规范的设计元素和资源，...
MultiWaveHeader是一个可以高度定制每个波形的ohos水波控件
08-04
OpenHarmony通过其动画框架支持开发者创建各种复杂和流畅的动画效果，包括视差滚动、平滑过渡、粒子效果等。MultiWaveHeader正是利用了这一特性，为用户提供了一种定制化的水波动画解决方案。 ### 3. ...
OH哔哩是一款基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端
08-03
"OH哔哩"作为一款基于OpenHarmony系统 ArkUI框架开发的哔哩哔哩动画第三方客户端，充分利用了OpenHarmony的跨平台特性，能够在多种设备上提供一致的用户体验。开发者通过ArkUI的声明式编程，实现了对哔哩哔哩内容的...
OpenHarmony实战开发-动画概述
m0_70749039的博客
04-27 912
UI（用户界面）中包含开发者与设备进行交互时所看到的各种组件（如时间、壁纸等）。属性作为接口，用于控制组件的行为。例如，开发者可通过位置属性调整组件在屏幕上的位置。
HarmonyOS开发案例：【视频播放器】
鸿蒙的技术博客
04-22 1869
基于video、swiper和slider组件，实现简单的视频播放器，可支持海报轮播、视频播放等功能。
OpenHarmony实战开发-image、image-animator组件的使用。
m0_70749039的博客
04-01 737
OpenHarmony提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
OpenHarmony实战开发-如何实现组件动画。
2401_82546228的博客
04-28 813
ArkUI为组件提供了通用的属性动画和转场动画能力的同时，还为一些组件提供了默认的动画效果。例如，List的滑动动效，Button的点击动效，是组件自带的默认动画效果。在组件默认动画效果的基础上，开发者还可以通过属性动画和转场动画对容器组件内的子组件动效进行定制。
【FFH】Canvas实现帧动画及封装（OpenHarmony JS UI）
weixin_61965578的博客
06-15 814
基于鸿蒙JS UI canvas组件实现帧动画播放
openHarmony的UI开发
qq_57985179的博客
02-10 1164
自适应布局、响应式布局、属性动画、显式动画、转场动画、路径动画、各类弹窗、手势处理，组合手势
OpenHarmony教程指南—ArkUI中组件、通用、动画、全局方法的集合
m0_70749039的博客
03-07 936
本示例为ArkUI中组件、通用、动画、全局方法的集合。 本示例使用 Tabs容器组件搭建整体应用框架，每个 TabContent内容视图 使用 div容器组件 嵌套布局，在每个 div 中使用 循环渲染 加载此分类下分类导航数据，底部导航菜单使用 TabContent中tabBar属性 设置自定义样式 。通过组件、通用、动画、全局方法四个大类展现了ArkUI的能力，并把四大类中的功能进行了分类，方便开发者查看，每个示例又结合了不同的展现方式，以契合实际应用场景为主生动的体现了ArkUI能力的用法。
OpenHarmony
12-27
OpenHarmony是一个开源的操作系统项目，它是由华为公司推出的，旨在构建一个全场景、全连接的智能终端操作系统。OpenHarmony的目标是提供一个统一的开发平台，使开发者能够更轻松地开发应用程序，并将其部署到各种设备上，包括手机、平板电脑、智能手表、智能电视、汽车等。 OpenHarmony的特点包括以下几个方面： 1. 分布式架构：OpenHarmony采用分布式架构，可以实现设备之间的无缝连接和协同工作。 2. 统一开发平台：OpenHarmony提供了一套统一的开发工具和框架，使开发者能够更高效地开发应用程序。 3. 多设备适配：OpenHarmony支持多种设备类型，开发者可以使用相同的代码和工具来开发不同类型的应用程序。 4. 安全可靠：OpenHarmony注重安全性和可靠性，提供了一系列的安全机制和技术，保护用户的隐私和数据安全。 如果你对OpenHarmony感兴趣，你可以通过访问OpenHarmony的项目地址（https://gitee.com/openharmony）了解更多关于OpenHarmony的信息，包括项目的进展、文档、代码等。你也可以选择参与OpenHarmony的开发，为该项目做出贡献。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值