实现抛硬币功能的简单应用

【1】引言（完整代码在最后面）

本项目的目标是实现一个简单的“抛硬币”功能，用户可以通过点击屏幕上的地鼠图标来模拟抛硬币的过程。应用会记录并显示硬币正面（地鼠面）和反面（数字100面）出现的次数。为了增强用户体验，我们还添加了动画效果，使抛硬币的过程更加生动有趣。

【2】环境准备

电脑系统：Windows 10

开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

工程版本：API 12

真机：Mate60 Pro

语言：ArkTS、ArkUI

【3】应用结构

应用主要由两个部分组成：地鼠组件（Hamster）和主页面组件（CoinTossPage）。

地鼠组件（Hamster）

地鼠组件是应用的核心视觉元素之一，负责展示地鼠的形象。该组件通过@Component装饰器定义，并接收一个属性cellWidth，用于控制组件的大小。

主页面组件（CoinTossPage）

主页面组件是整个应用的入口点，负责组织和管理各个UI元素。该组件同样通过@Component装饰器定义，并包含多个状态变量用于跟踪硬币的状态和动画进度。

【4】功能解析

1. 地鼠组件：

• 通过Stack布局组合多个图形元素，创建了一个地鼠的形象。

• 每个图形元素都设置了具体的尺寸、颜色、边框等样式，并通过margin属性调整位置。

2. 主页面组件：

• 顶部有一个“抛硬币”的标题，下方是一个行布局，用于展示地鼠组件及正反两面出现的次数。

• 地鼠组件被放置在一个圆形区域内，背景采用线性渐变色。

• 点击地鼠时，会触发一系列动画效果，模拟硬币抛起再落下的过程。

• 通过计算最终的角度，判断是正面还是反面朝上，并更新相应的计数。

【完整代码】