鸿蒙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
    })
  }
}
相关推荐
zhanshuo11 分钟前
干掉复杂逻辑!手把手教你在鸿蒙系统中创建稳定的后台服务
harmonyos
问道飞鱼37 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG18 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证