【鸿蒙开发】动画

最新推荐文章于 2024-08-28 13:49:53 发布

d312697510

最新推荐文章于 2024-08-28 13:49:53 发布

阅读量1.9k

点赞数 15

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/d312697510/article/details/137828396

版权

1. 属性动画

animation放在其他属性的后面才有过渡效果

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括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})

参数：

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

示例

@Entry
@Component
struct Index {
  @State widthSize: number = 100
  @State heightSize: number = 100
  @State bgColor: Color = Color.Red

  build() {
    Column({ space: 15 }) {
      Row()
        .width(this.widthSize)
        .height(this.heightSize)
        .backgroundColor(this.bgColor)
        .animation({
          // 动画时长
          duration: 1000,
          // 执行次数
          iterations: 3,
          // 动画曲线
          curve: Curve.Ease,
          // 延时时间
          delay: 1000,
          // 播放模式
          playMode: PlayMode.Normal
        })

      Button("实现动画").onClick(() => {
        this.widthSize = 200
        this.heightSize = 200
        this.bgColor = Color.Yellow
      })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2. 显式动画

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

接口：

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

AnimateParam参数：

名称	类型	描述
duration	number	动画持续时间，单位为毫秒。默认值：1000 从API version 9开始，该接口支持在ArkTS卡片中使用。说明： - 在ArkTS卡片上最大动画持续时间为1000毫秒，若超出则固定为1000毫秒。 - 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
tempo	number	动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。默认值：1.0
curve	Curve \| ICurve \| string	动画曲线。默认值：Curve.EaseInOut 从API version 9开始，该接口支持在ArkTS卡片中使用。
delay	number	单位为ms(毫秒)，默认不延时播放。默认值：0 说明： - 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
iterations	number	默认播放一次，设置为-1时表示无限次播放。默认值：1
playMode	PlayMode	设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal 从API version 9开始，该接口支持在ArkTS卡片中使用。相关使用约束请参考PlayMode说明。
onFinish	() => void	动效播放完成回调。从API version 9开始，该接口支持在ArkTS卡片中使用。

示例

@Entry
@Component
struct Index {
  @State widthSize: number = 100
  @State heightSize: number = 100
  @State bgColor: Color = Color.Red

  build() {
    Column({ space: 15 }) {
      Row()
        .width(this.widthSize)
        .height(this.heightSize)
        .backgroundColor(this.bgColor)

      Button("实现动画").onClick(() => {
        animateTo({
          // 动画时长
          duration: 1000,
          // 执行次数
          iterations: 3,
          // 动画曲线
          curve: Curve.Ease,
          // 延时时间
          delay: 1000,
          // 播放模式
          // 动画执行完成后，不回到起点,从终点再次执行
          playMode: PlayMode.Alternate
        }, () => {
          this.widthSize = 200
          this.heightSize = 200
          this.bgColor = Color.Yellow
        })
      })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

3. 路径动画

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

属性

名称	参数	描述
motionPath	{ path: string, from?: number, to?: number, rotatable?: boolean }	设置组件的运动路径。 - path：位移动画的运动路径，使用svg路径字符串。path中支持使用start和end进行起点和终点的替代，如：'Mstart.x start.y L50 50 Lend.x end.y Z'，更多说明请参考绘制路径。 - from：运动路径的起点。取值范围：[0, 1] - to：运动路径的终点。取值范围：[0, 1] - rotatable：是否跟随路径进行旋转。

名称

参数

描述

motionPath

{

path: string,

from?: number,

to?: number,

rotatable?: boolean

}

设置组件的运动路径。

- path：位移动画的运动路径，使用svg路径字符串。path中支持使用start和end进行起点和终点的替代，如：'Mstart.x start.y L50 50 Lend.x end.y Z'，更多说明请参考绘制路径。

- from：运动路径的起点。

取值范围：[0, 1]

- to：运动路径的终点。

取值范围：[0, 1]

- rotatable：是否跟随路径进行旋转。

示例

@Entry
@Component
struct Index {
  @State flag: boolean = true

  build() {
    Column() {
      Row()
        .height(100)
        .width(100)
        .backgroundColor(Color.Red)
          // 移动坐标 一般是页面的2倍  L0 400  （0，200）
        .motionPath({
          path: 'Mstart.x start.y L0 400 L400 400 Lend.x end.y',
          from: 0.0,
          to: 1.0,
          rotatable: false
        })
        .onClick(() => {
          animateTo({ duration: 3000 }, () => {
            this.flag = !this.flag
          })
        })
    }
    .width("100%")
    .height("100%")
    .alignItems(this.flag ? HorizontalAlign.Start : HorizontalAlign.End)
  }
}

4. 组件内转场动画

组件内转场主要通过transition属性配置转场参数，在组件插入和删除时显示过渡动效，需要配合animateTo才能生效。

属性：

名称	参数类型	参数描述
transition	TransitionOptions	设置组件插入显示和删除隐藏的过渡效果。默认值：不设置任何过渡效果时，默认有透明度从0到1的过渡效果。若设置了其他过渡效果，以设置的过渡效果为准。说明：所有参数均为可选参数，详细描述见TransitionOptions参数说明。

名称

参数类型

参数描述

transition

TransitionOptions

设置组件插入显示和删除隐藏的过渡效果。

默认值：不设置任何过渡效果时，默认有透明度从0到1的过渡效果。若设置了其他过渡效果，以设置的过渡效果为准。

说明：

所有参数均为可选参数，详细描述见TransitionOptions参数说明。

TransitionOptions参数：

参数名称	参数类型	必填	参数描述
type	TransitionType	否	默认包括组件新增和删除。默认值：TransitionType.All 说明：不指定Type时说明插入删除使用同一种效果。
opacity	number	否	设置组件转场时的透明度效果，为插入时起点和删除时终点的值。默认值：1 取值范围： [0, 1] 说明：设置小于0或大于1的非法值时，按1处理。
translate	{ x? : number \| string, y? : number \| string, z? : number \| string }	否	设置组件转场时的平移效果，为插入时起点和删除时终点的值。 -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时，默认的是组件的左上角。
rotate	{ x?: number, y?: number, z?: number, angle: number \| string, centerX?: number \| string, centerY?: number \| string }	否	设置组件转场时的旋转效果，为插入时起点和删除时终点的值。 -x：横向的旋转向量。 -y：纵向的旋转向量。 -z：竖向的旋转向量。 - centerX,centerY指旋转中心点，centerX和centerY默认值是"50%"。 - 中心点为（0，0）时，默认的是组件的左上角。

示例

组件转场动画

@Entry
@Component
struct Index {
  @State title: string = "显示"
  @State flag: boolean = false

  build() {
    Column() {
      Button(this.title)
        .onClick(() => {
          animateTo({ duration: 2000 }, () => {
            this.flag = !this.flag
            if (this.flag) {
              this.title = '隐藏'
            } else {
              this.title = '显示'
            }
          })
        })

      if (this.flag) {
        Row()
          .width(200)
          .height(200)
          .backgroundColor(Color.Red)
          .transition({
            type: TransitionType.Insert,
            translate: { x: 300, y: 300 }
          })
          .transition({
            type: TransitionType.Delete,
            scale: { x: 0, y: 0 }
          })
      }

    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

列表过渡动画

@Entry
@Component
struct Index {
  @State list: number[] = [1, 2, 3, 4]

  build() {
    Stack({ alignContent: Alignment.BottomEnd }) {
      Column() {
        List({ space: 3 }) {
          ForEach(this.list, (item) => {
            ListItem() {
              Text(`${item}`)
                .height(60)
                .width("100%")
                .backgroundColor(Color.Pink)
                .textAlign(TextAlign.Center)
                .fontSize(20)
            }
            .transition({
              type: TransitionType.All,
              translate: { x: 300 }
            })
            .onClick(() => {
              animateTo({ duration: 1000 }, () => {
                let delIndex = this.list.indexOf(item)
                this.list.splice(delIndex, 1)
              })
            })
          }, item => item)
        }
      }
      .width("100%")
      .height("100%")

      Button("增加")
        .margin({ right: 10, bottom: 10 })
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.list.push(Date.now())
          })
        })
    }
    .width("100%")
    .height("100%")
  }
}

弹簧动画曲线

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  @State translateX: number = 0

  build() {
    Column() {
      Row()
        .height(200)
        .width(200)
        .backgroundColor(Color.Red)
        .translate({
          x: this.translateX
        })

      Button("弹簧动画曲线")
        .margin({ top: 20 })
        .onClick(() => {
          this.translateX = -10 //起始位置
          animateTo({
            duration: 1000,
            // 初始速度(velocity) 质量(mass) 刚度(stiffness) 阻尼（damping）
            curve: curves.springCurve(10, 1, 1, 1)
          }, () => {
            this.translateX = 0
          })
        })
    }
    .width("100%")
    .height("100%")
  }
}

小球飞入购物车

@Entry
@Component
struct Index {
  @State productList: string[] = ["第一个商品", "第二个商品", "第三个商品", "第四个商品"]
  @State ScreenPX: number = 0
  @State ScreenPY: number = 0
  @State BoxOpacity: number = 0
  @State flag: boolean = true

  build() {
    Stack({
      alignContent: this.flag ? Alignment.TopEnd : Alignment.BottomStart
    }) {
      Column() {
        List({
          space: 20
        }) {
          ForEach(this.productList, (item) => {
            ListItem() {
              Row() {
                Text(item)
                Button() {
                  Text("+").fontSize(18).fontColor(Color.White)
                }
                .width(30)
                .height(30)
                .onClick((e) => {
                  this.ScreenPX = e.screenX - 15
                  this.ScreenPY = e.screenY - 15
                  this.BoxOpacity = 1;

                  animateTo({
                    duration: 500,
                    onFinish: () => {
                      this.flag = true
                      this.BoxOpacity = 0;
                    }
                  }, () => {
                    this.flag = false;
                  })
                  
                })
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
            }
          })
        }
        .padding(20)
        .divider({
          strokeWidth: 1,
          color: "#eee"
        })
      }
      .width('100%')
      .height('100%')


      Row() {
      }
      .backgroundColor(Color.Red)
      .width(30)
      .height(30)
      .borderRadius(30)
      .opacity(this.BoxOpacity)
      .motionPath({
        path: `Mstart.x start.y L${this.ScreenPX * 2 - 30} ${this.ScreenPY * 2 + 30}  Lend.x end.y`,
        from: 0.0,
        to: 1.0,
        rotatable: false
      })
      .margin({
        top: this.ScreenPY
      })

    }
  }
}

5. 共享元素转场动画

当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

5.1 修改 Index.ets

import router from '@ohos.router'

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Image("https://img1.baidu.com/it/u=4070670852,624601372&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('chocolate', {
            duration: 500,
            type: SharedTransitionEffectType.Exchange //默认 放大缩小
          })
        Text('德国进口薇莉Vivani排块烘焙黑巧克力75%99%100%纯可可脂网红零食')
          .sharedTransition('text', {
            duration: 1000,
            type: SharedTransitionEffectType.Static //淡入淡出
          })
      }
      .padding(15)
      .width('50%')
      .onClick(() => {
        router.pushUrl({
          url: 'pages/DetailPage'
        })
      })
    }
    .width('100%')
  }
}

5.2 修改 DetailPage.ets

import router from '@ohos.router'

@Entry
@Component
struct DetailPage {
  build() {
    Column() {
      Column() {
        Image("https://img1.baidu.com/it/u=4070670852,624601372&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('chocolate', {
            duration: 500,
            type: SharedTransitionEffectType.Exchange //默认
          })
        Text('德国进口薇莉Vivani排块烘焙黑巧克力75%99%100%纯可可脂网红零食')
          .fontSize(30)
          .sharedTransition('text', {
            duration: 1000,
            type: SharedTransitionEffectType.Static //淡入淡出
          })
      }
      .padding(15)
      .onClick(() => {
        router.back()
      })
    }
    .height('100%')
    .width('100%')
  }
}

6. 页面间转场动画

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

pageTransition

进入此页面或移动到其他页面时实现动画。

pageTransition?(): void

PageTransitionEnter

设置当前页面的自定义入场动效。

PageTransitionEnter(value: PageTransitionOptions)

PageTransitionExit

设置当前页面的自定义退出动效。

PageTransitionExit(value: PageTransitionOptions)

PageTransitionOptions参数：

名称	类型	必填	描述
type	RouteType	否	页面转场效果生效的路由类型。默认值：RouteType.None。
duration	number	否	动画的时长。单位：毫秒默认值：1000
curve	Curve \| string	否	动画曲线。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	number	否	动画延迟时长。单位：毫秒默认值：0 说明：没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异)，如需禁用系统默认页面转场效果，可以指定duration为0。

属性

参数名称	参数类型	必填	参数描述
slide	SlideEffect	否	设置页面转场时的滑入滑出效果。默认值：SlideEffect.Right
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缩放中心点。 - 中心点为0时，默认的是组件的左上角。
opacity	number	否	设置入场的起点透明度值或者退场的终点透明度值。默认值：1

事件

事件	功能描述
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。

功能描述

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。

示例

入场动画为淡入，退场动画为缩小

Index.ets

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Text("首页")

      Button("去其他页面")
        .onClick(() => {
          router.pushUrl({
            url: "pages/OtherPage"
          })
        })
    }
    .width('100%')
    .height('100%')
    .scale({ x: this.scale1 })
    .opacity(this.opacity1)
  }

  // 自定义方式1：完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale1 = 1
        this.opacity1 = progress
      }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale1 = 1 - progress
        this.opacity1 = 1
      }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
  }
}

OtherPage.ets

import router from '@ohos.router'

@Entry
@Component
struct OtherPage {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Text("其他页面")

      Button("去首页页面")
        .onClick(() => {
          router.pushUrl({
            url: "pages/Index"
          })
        })
    }
    .width('100%')
    .height('100%')
    .scale({ x: this.scale2 })
    .opacity(this.opacity2)
  }

  // 自定义方式1：完全自定义转场过程的效果
  pageTransition() {
    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
        this.scale2 = 1
        this.opacity2 = progress
      }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
      .onExit((type: RouteType, progress: number) => {
        this.scale2 = 1 - progress
        this.opacity2 = 1
      }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
  }
}

入场动画为从左侧滑入，退场为缩小加透明度变化

Index.ets

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State scale1: number = 1
  @State opacity1: number = 1

  build() {
    Column() {
      Text("首页")

      Button("去其他页面")
        .onClick(() => {
          router.pushUrl({
            url: "pages/OtherPage"
          })
        })
    }
    .width('100%')
    .height('100%')
    .scale({ x: this.scale1 })
    .opacity(this.opacity1)
  }

  // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}

OtherPage.ets

import router from '@ohos.router'

@Entry
@Component
struct OtherPage {
  @State scale2: number = 1
  @State opacity2: number = 1

  build() {
    Column() {
      Text("其他页面")

      Button("去首页页面")
        .onClick(() => {
          router.pushUrl({
            url: "pages/Index"
          })
        })
    }
    .width('100%')
    .height('100%')
    .scale({ x: this.scale2 })
    .opacity(this.opacity2)
  }

  // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
  pageTransition() {
    PageTransitionEnter({ duration: 1200 })
      .slide(SlideEffect.Left)
    PageTransitionExit({ delay: 100 })
      .translate({ x: 100.0, y: 100.0 })
      .opacity(0)
  }
}