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

2024年11月5日 LiuJinTao

文章目录

鸿蒙中动画的使用

一、属性动画 - animation

属性动画代码示例
ts 复制代码
/**
 * 属性动画的演示
 */
@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

ts 复制代码
/**
 *  显示动画的演示
 */
@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
ts 复制代码
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
ts 复制代码
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)
  }
}
相关推荐
Random_index8 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室11 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu713 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
期待未来的男孩13 小时前
华为FusionCube 500-8.2.0SPC100 实施部署文档
华为
岳不谢15 小时前
VPN技术-VPN简介学习笔记
网络·笔记·学习·华为
zhangjr057516 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙