鸿蒙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
    })
  }
}
相关推荐
王佳斌1 小时前
tp报错解决
harmonyos
coooliang2 小时前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
江拥羡橙4 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
爱笑的眼睛114 小时前
HarmonyOS应用开发:深入ArkUI声明式开发范式与最佳实践
华为·harmonyos
云水木石4 小时前
开源鸿蒙+龙芯CPU,能擦出怎样的火花?
华为·开源·harmonyos
特立独行的猫a5 小时前
开源OpenHarmony润开鸿HH-SCDAYU800A开发板开箱体验
开源·harmonyos·openharmony·hh-scdayu800a
祥睿夫子7 小时前
鸿蒙 ArkTS 函数全解析:从基础定义到高级应用,新手也能轻松掌握
harmonyos
江拥羡橙9 小时前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
爱笑的眼睛1115 小时前
HarmonyOS Stage 模型深度解析:构建现代化、高性能应用
华为·harmonyos
安卓开发者19 小时前
鸿蒙NEXT自定义能力详解:从基础使用到高级技巧
华为·harmonyos