华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用（属性、显示、专场）动画

news2025/10/31 9:09:59

2024年11月5日 LiuJinTao

文章目录

鸿蒙中动画的使用
- - 一、属性动画 - animation
  - - - 属性动画代码示例
  - 二、显示动画 - AnimateTo
  - 三、专场动画

鸿蒙中动画的使用

一、属性动画 - animation

在这里插入图片描述

属性动画代码示例

/**
 * 属性动画的演示
 */
@Entry
@Component
struct Index {
  @State selfWidth: number = 20
  @State setId: number = 0
  build() {
    Column() {
      Text("HarmonyOS NEXT")
        .fontWeight(FontWeight.Bold)
        .fontSize(this.selfWidth)
        .textAlign(TextAlign.Center)
        .animation({
          // 动画事件
          duration: 900,
          // 动画曲线
          // curve: Curve.Linear,
          curve: "cubic-bezier(1.00, -0.18, 1.00, -0.33)",
          // 延迟时间
          delay: 500,
          // 执行次数  (-1 无限次)
          iterations: 2,
          // 播放模式
          playMode: PlayMode.Alternate
        })

      Button("放大")
        .onClick(() => {
          // 这里通过定时器实现动画效果（20毫秒动一下，产生视觉效果！）
          this.setId = setInterval(() => {
            if (this.selfWidth < 50) {
              this.selfWidth++
            } else {
              clearInterval(this.setId)  //  关闭定时器
            }
          }, 30)
        })
      Button("缩小")
        .onClick(() => {
          // 当 animation 发现该组件属性发生变化，就会执行 animation属性动画 （这里我们改变字体大小）
          this.selfWidth = 20
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

二、显示动画 - AnimateTo

在这里插入图片描述

/**
 *  显示动画的演示
 */
@Entry
@Component
struct Index {
  @State selfWidth: number = 20
  @State setId: number = 0
  build() {
    Column() {
      Text("HarmonyOS NEXT")
        .fontWeight(FontWeight.Bold)
        .fontSize(this.selfWidth)
        .textAlign(TextAlign.Center)

      Button("放大")
        .onClick(() => {
          // 这里通过定时器实现动画效果（20毫秒动一下，产生视觉效果！）
          this.setId = setInterval(() => {
            if (this.selfWidth < 50) {
              this.selfWidth++
            } else {
              clearInterval(this.setId)  //  关闭定时器
            }
          }, 30)
        })
      Button("缩小")
        .onClick(() => {
          animateTo({
            // 这里可以写  animation 中的所有配置
            duration: 900,
          } , () => {
            // 事件触发，这里执行的事件逻辑都会通过动画形式呈现
            //  和 animation比较，这个比较专一，控制字体大小就只会呈现字体大小动画
            this.selfWidth = 20
          })
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

三、专场动画

在这里插入图片描述

Index

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index  {
  build() {
    Column() {
      Column() {
        Image($r("app.media.startIcon"))
          .width(100)
          .aspectRatio(1)
          // 分别绑定该属性，且id值一样，通过路由跳转实现专场动画效果
          .sharedTransition("sharedID", {duration: 350})
        Button("跳转")
          .onClick(() => {
            router.pushUrl({
              url: "pages/Index2"
            })
          })
      }
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

Index2

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index2 {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Image($r("app.media.startIcon"))
        .width("100%")
        .height(400)
          // 分别绑定该属性，且id值一样，通过路由跳转实现专场动画效果
        .sharedTransition("sharedID", {duration: 350})
      Button("返回")
        .onClick(() => {
          router.pushUrl({
            url: "pages/Index"
          })
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}