鸿蒙Harmony(十)动画

属性动画

属性动画是通过设置组件的animation属性来给组件添加动画,当组件的width、height、Opacity、backgroundColor、scale 、rotate、translate等属性变更时,可以实现渐变过渡效果。

代码示例

javascript 复制代码
@Entry
@Component
struct AnimPage {
  @State message: string = 'Hello World'
  @State scaleX: number = 1
  @State scaleY: number = 1
  @State animChange: boolean = false

  build() {
    Row() {
      Column() {
        Button("按钮")
          .scale({ x: this.scaleX, y: this.scaleY, centerX: '50%', centerY: 0 })
          .animation({ duration: 1000, curve: Curve.Ease })
          .onClick(() => {
            if (this.animChange) {
              this.scaleX = 3
              this.scaleY = 3
            } else {
              this.scaleX = 1
              this.scaleY = 1
            }
            this.animChange = !this.animChange
          })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }
}

显式动画

显式动画是通过全局animateTo函数来修改组件属性,实现属性变化时的渐变过渡效果.

javascript 复制代码
animateTo(value: AnimateParam, event: () => void): void

代码示例

javascript 复制代码
@Entry
@Component
struct AnimPage {
  @State message: string = 'Hello World'
  @State itemAlign: HorizontalAlign = HorizontalAlign.Start
  itemAlignList: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End]
  index: number=0

  build() {
    Row() {
      Column() {
        Button("按钮")
          .onClick(() => {
            animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
              this.itemAlign = this.itemAlignList[(this.index+1)%this.itemAlignList.length]
              this.index++
            });
          })
      }
      .alignItems(this.itemAlign)
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }
}

组件转场动画

组件的插入、删除过程即为组件本身的转场过程,组件的插入、删除动画称为组件内转场动画。通过组件内转场动画,可定义组件出现、消失的效果。通过组件的transition属性来配置。
参考文档

javascript 复制代码
transition(value: TransitionOptions)

transition函数的入参为组件内转场的效果,可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果,必须和animateTo一起使用才能产生组件转场效果。

代码示例

javascript 复制代码
@Entry
@Component
struct AnimPage {
  @State message: string = 'Hello World'
  @State isBegin: boolean = false

  build() {
    Row() {
      Column() {
        Button("按钮")
          .onClick(() => {
            this.animAction()
          })
        if (this.isBegin) {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 100 })
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              rotate: { angle: -360 },
              scale: { x: 0, y: 0 },
            })
        }
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .height('100%')
  }

  animAction() {
    animateTo({ duration: 1000 }, () => {
      this.isBegin = true
    })
  }
}
相关推荐
zhanshuo7 小时前
鸿蒙应用调试与测试实战全指南:高效定位问题,性能优化必备技巧+实用代码示例
harmonyos
万少10 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
网络小白不怕黑12 小时前
华为设备 QoS 流分类与流标记深度解析及实验脚本
网络·华为
网络小白不怕黑12 小时前
华为交换机堆叠与集群技术深度解析附带脚本
网络·华为
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
万少1 天前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core1 天前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡1 天前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
jie_07541 天前
鸿蒙系统(HarmonyOS)4.2 设备上实现无线安装 APK 并调试
华为·harmonyos