华为 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)
  }
}
相关推荐
HarmonyOS_SDK19 分钟前
【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
harmonyos
青瓷看世界2 小时前
华为HarmonyOS打造开放、合规的广告生态 - 开屏广告
华为·harmonyos·广告投放
青瓷看世界5 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力3-获取设备位姿
华为·ar·harmonyos·虚拟现实
青瓷看世界7 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力4-检测环境中的平面
平面·ar·harmonyos·虚拟现实
SoraLuna7 小时前
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
macos·ui·harmonyos
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
macos·ui·harmonyos
青瓷看世界13 小时前
华为HarmonyOS打造开放、合规的广告生态 - 原生广告
华为·harmonyos·广告投放
lqj_本人17 小时前
Flutter&鸿蒙next中封装一个列表组件
flutter·华为·harmonyos