HarmonyOS鸿蒙Next线上Codelabs挑战赛多米诺骨牌动效加载条

HarmonyOS鸿蒙Next线上Codelabs挑战赛多米诺骨牌动效加载条 介绍
利用ArkUI组件动画实现多米诺骨牌效果加载条。效果如图所示：

相关概念

• 显式动画：提供全局animateTo显式动画接口来指定有闭包代码导致的状态变化插入过渡动画效果。
• 属性动画：组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。

完整示例

gitee源码地址

环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如图步骤进行。

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Canary1及以上版本。
• HarmonyOS SDK版本：API version 9及以上版本。

硬件要求

• 设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。
• HarmonyOS系统：3.1.0 Developer Canary1及以上版本。

环境搭建

1. 安装DevEco Studio，详情请参考下载和安装软件。
2. 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
   • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
   • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
3. 开发者可以参考以下链接，完成设备调试的相关配置：
   • 使用真机进行调试
   • 使用模拟器进行调试

代码结构解读

├──entry/src/main/ets 
// 代码区│ ├──entryability│ │ └──EntryAbility.ts // 程序入口类│ ├──pages│ │ └──Index.ets // 动效页面入口│ ├──view│ │ └──DominoLoading.ets // 多米诺骨牌动效组件└──entry/src/main/resources // 资源文件

页面入口

import { DominoLoading } from '../view/DominoLoading';
@Entry
@Component
struct Index {
  @State dominoLoadingColor: Color = Color.White // 多米诺骨牌颜色
  build() {
    Stack() {
      DominoLoading({ color: $dominoLoadingColor }) // 多米诺骨牌动效加载条
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#333') // 背景颜色
  }
}

显示动画&属性动画

/**
 * 多米诺骨牌动效加载条
 */
@Component
export struct DominoLoading {
  NUM = 10 // 骨牌数量
  H = 20 // 骨牌高度
  W = this.H * 0.2 // 骨牌宽度
  GAP = this.H * 0.6 // 骨牌间隙
  ANIMATE_PARAM = { // 动画参数
    duration: 300,
    curve: Curve.Linear,
    iterations: -1,
  }
  @Link color: ResourceColor // 骨牌颜色
  @State translateX: number = 0 // 动画使用，X方向位移
  @State angles: number[] = [] // 动画使用，所有骨牌的倾斜角
  
  /**
   * 获取左边倚靠着的骨牌的倾斜角
   * @param centerDominoAngle 当前骨牌倾斜角
   */
  getLeftRelyDominoAngle(currentDominoAngle: number) {
    /* 复杂的公式，请忽略推理过程 */
    return Math.asin(Math.sin(Math.PI - currentDominoAngle + Math.asin(Math.sin(Math.PI - currentDominoAngle) * (this.GAP + this.W - this.W / Math.sin(currentDominoAngle)) / (this.H - this.W))))
  }
  
  /**
   * 设置所有骨牌的倾斜角
   * @param centerDominoAngle 中间骨牌的倾斜角
   */
  setAllDominoAngle(centerDominoAngle: number) {
    this.angles = []
    let centerIndex = this.NUM / 2 // 中间骨牌的索引
    for (var i = 0; i < this.NUM; i++) {
      let angle
      if (i < centerIndex) { // 右边的骨牌
        angle = Math.PI / 2 // 都是90度正立着
      } else if (i == centerIndex) { // 中间的骨牌
        angle = centerDominoAngle // 指定的角度
      } else { // 左边的骨牌
        angle = this.getLeftRelyDominoAngle(this.angles[0]) // 根据被倚靠骨牌的倾斜角算出角度
      }
      this.angles = [angle].concat(this.angles)
    }
  }
  build() {
    Stack() {
      Row() {
        ForEach(this.angles, (angle, index) => {
          // 骨牌
          Rect()
            .width(this.W)
            .height(this.H)
            .radius(this.W / 2)
            .fill(this.color)
            .rotate({
              z: 1,
              centerX: this.W / 2,
              centerY: this.H - this.W / 2,
              angle: (90 - angle * 180 / Math.PI)
            })
            .margin({ right: index == this.NUM - 1 ? 0 : this.GAP })
        })
      }
      .translate({ x: this.translateX })
      .animation(this.ANIMATE_PARAM) // 属性动画参数
    }
    .clip(true)
    .onAppear(() => { // 控件显示即开始动画
      this.startDominoTranslateAnimation()
      this.startDominoRotateAnimation()
    })
  }
  
  /**
   * 开始骨牌的位移动画（属性动画）
   */
  startDominoTranslateAnimation() {
    this.translateX = -(this.W + this.GAP)
  }
  
  /**
   * 开始骨牌的旋转动画（显式动画）
   */
  startDominoRotateAnimation() {
    this.setAllDominoAngle(Math.PI / 2)
    animateTo(this.ANIMATE_PARAM, () => {
      this.setAllDominoAngle(this.getLeftRelyDominoAngle(Math.PI / 2))
    })
  }
}

总结

您已经完成了本次的学习，并了解到以下知识点：

• 如何使用animateTo实现显式动画。
• 如何使用animation为组件添加属性动画。