【鸿蒙实战开发】ArkTS实现抽卡效果

前言

随着科技的进步和智能设备的普及，操作系统在数字化世界中的角色变得愈发重要。鸿蒙OS（HarmonyOS），作为华为推出的全场景智慧生态操作系统，引起了广泛的关注和讨论。而鸿蒙推荐使用ArkTS进行开发。ArkTs 是一个基于 TypeScript 的轻量级 UI 框架，旨在简化前端开发过程中的组件化和状态管理。它的设计理念融合了现代前端开发的主流趋势，提供了简洁而强大的 API，使开发者能够快速构建复杂的用户界面。下面通过一个简单的抽卡应用来展示 ArkTs 的基本用法：

1. 接口定义

interface ImageCount { url: string; count: number; }

ImageCount 接口定义了一个图片的数据结构，包括 url（图片路径）和 count（计数器）属性。
接口定义在处理和传递多种类型的数据时能有效地管理和组织数据结构。

2. 组件定义和状态管理

@Entry
@Component
struct Index {
  // 状态管理
  @State randomIndex: number = -1;//表示还没开始抽
  //准备图片数据
    @State images: ImageCount[] = [
      { url: 'app.media.00', count: 0 },
      { url: 'app.media.01', count: 0 },
      { url: 'app.media.02', count: 0 },
      { url: 'app.media.03', count: 0 },
      { url: 'app.media.04', count: 0 },
      { url: 'app.media.05', count: 0 }
    ]
  //控制遮罩层
  @State maskOpacity: number = 0;
  @State maskZIndex: number = -1;
  //控制图片缩放
  @State maskImgX: number = 0;
  @State maskImgY: number = 0;
  //卡片集齐后，大奖显隐标记
  @State isShow: boolean = false;
  @State arr: string[] = ['yd', 'ed', 'td'];
  @State win: string = '';

@Entry 和 @Component 注解标记了 Index 组件，将其作为应用的入口组件。
@State 注解用于声明组件的状态。在这里，randomIndex 用于存储随机索引，images 初始化图片数据，maskOpacity 控制遮罩层的透明度，isShow 标志是否显示中奖弹窗等。

3. 页面结构和布局

build() {
  Stack() {
    Column() {
      Text('抽卡助威')
        .fontColor('#f0932b')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .margin({top:50})
      Grid() {
        ForEach(this.images, (item: ImageCount, index: number) => {
          GridItem() {
            Badge({
              count: item.count,
              position: BadgePosition.RightTop,
              style: {
                fontSize: 14,
                badgeSize: 20,
                badgeColor: '#fa2a2d'
              }
            }) {
              Image($r(item.url))
                .width(80)
            }
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .width('98%')
      .height(300)
      .margin({ top: 50 })
      .border({width:1,color:'#f0932b' })
      Button('立即抽卡')
        .width(200)
        .backgroundColor('#f0932b')
        .margin({ top: 50 })
        .onClick(() => {
          this.maskOpacity = 1
          this.maskZIndex = 99
          this.maskImgX = 1
          this.maskImgY = 1
          //随机抽取卡片
          this.randomIndex = Math.floor(Math.random() * 6)
        })
    }
    .width('100%')
    .height('100%')

build() 方法定义了页面的结构和布局。使用了 Stack、Column 和 Grid 等布局组件，分别用于创建垂直堆栈布局、列布局和网格布局。
Text 用于显示页面标题，Grid 和 ForEach 用于动态展示多个图片和徽章的组合。
Button 组件添加了点击事件处理，触发抽卡动画效果并更新相关状态变量。

4. 弹出窗口和动画效果

Column({ space: 30 }) {
  Text('获得一张卡片')
    .fontColor('#ffcd4a19')
    .fontSize(25)
    .fontWeight(FontWeight.Bold)
  // 显示抽卡结果的图片
  Image($r(`app.media.1${this.randomIndex}`))
    .width(200)
    .scale({
      x: this.maskImgX,
      y: this.maskImgY
    })
    .animation({
      duration: 500
    })
  // 确认按钮
  Button('开心收下')
    .width(200)
    .height(50)
    .backgroundColor(Color.Transparent)
    .border({ width: 2, color: '#fff9e0' })
    .onClick(() => {
      // 点击确认按钮触发的事件处理
      this.maskOpacity = 0
      this.maskZIndex = -1
      this.maskImgX = 0
      this.maskImgY = 0
      // 更新抽卡结果计数
      this.images[this.randomIndex] = {
        url: `app.media.1${this.randomIndex}`,
        count: this.images[this.randomIndex].count + 1
      }
      // 检查是否所有图片都已抽过
      let flag: boolean = true
      for (let item of this.images) {
        if (item.count == 0) {
          flag = false
          break
        }
      }
      this.isShow = flag
      // 如果所有图片都已抽过，随机抽出一个中奖礼盒
      if (flag) {
        let randomIndex: number = Math.floor(Math.random() * 3)
        this.win = this.arr[randomIndex]
      }
    })
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor('#cc000000')
.opacity(this.maskOpacity)
.zIndex(this.maskZIndex)
.animation({
  duration: 200
})

当点击 “立即抽卡” 按钮后，会弹出一个带有抽卡结果的弹窗。弹窗使用 Column 组件布局，包含抽卡结果图片、确认按钮和中奖信息。
使用 Image 组件展示抽卡结果的图片，并添加了一个动画效果，看起来效果更好。
确认按钮点击后，更新状态以关闭弹窗、更新抽卡结果的计数，并根据抽卡结果决定是否显示中奖弹窗。

5. 中奖弹窗

if (this.isShow) {
  Column({ space: 30 }) {
    Text('恭喜获得神秘大奖')
      .fontColor('#f5ebcf')
      .fontSize(25)
      .fontWeight(700)
    // 显示中奖图片
    Image($r(`app.media.${this.win}`))
      .width(300)
    // 继续抽奖按钮
    Button('确定')
      .width(200)
      .height(50)
      .backgroundColor(Color.Transparent)
      .border({ width: 2, color: '#fff9e0' })
      .onClick(() => {
        // 点击确定，关闭中奖弹窗
        this.isShow = false
        this.win = ''
        this.images = [
          { url: 'app.media.00', count: 0 },
          { url: 'app.media.01', count: 0 },
          { url: 'app.media.02', count: 0 },
          { url: 'app.media.03', count: 0 },
          { url: 'app.media.04', count: 0 },
          { url: 'app.media.05', count: 0 }
        ]
      })
  }

当 isShow 状态为 true 时，会弹出显示中奖信息的弹窗。
弹窗中包含了中奖信息的展示和一个确定按钮，点击确定按钮可以关闭弹窗并重新初始化抽卡状态。

总结

以上就是使用 ArkTs 框架开发的一个集卡功能的代码示例。ArkTS框架以其简洁自然的声明式语法、高度可组合的组件化机制和自动的数据-UI关联功能，革新了开发者的编程体验。这些特性不仅使得编码过程更加贴近自然语言，还显著提升了开发效率。

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/