CSS动画与JavaScript交互：实现运动会主题角色动画效果

发布时间：2026/7/21 5:25:49

CSS动画与JavaScript交互：实现运动会主题角色动画效果

最近在整理项目代码时，发现一个特别有意思的小项目——运动会主题的动画效果。这个项目用简单的代码实现了两个可爱的角色动画，一个动作"duang duang"的弹跳效果，另一个发出"pip pip"的声音特效，非常适合前端初学者学习CSS动画和JavaScript事件处理。

本文将完整拆解这个运动会动画项目的实现过程，从HTML结构搭建到CSS动画设计，再到JavaScript交互逻辑，手把手带你重现这两个可爱角色的动画效果。无论你是刚接触前端的新手，还是想学习动画实现的开发者，都能从中获得实用的代码技巧。

1. 项目背景与核心概念

1.1 什么是CSS动画

CSS动画是现代网页开发中创建流畅视觉效果的重要技术。通过@keyframes规则和animation属性，我们可以定义元素从一种样式逐渐变为另一种样式的动画效果，无需使用JavaScript就能实现复杂的动画序列。

1.2 项目特色

这个运动会动画项目的亮点在于：

  • 物理感十足的弹跳效果：通过贝塞尔曲线模拟真实物体的弹跳运动
  • 交互式音效触发：点击角色时播放对应的音效反馈
  • 响应式设计：适配不同屏幕尺寸的设备
  • 代码简洁易懂：适合学习动画原理和事件处理

1.3 技术栈选择

  • HTML5：页面结构搭建
  • CSS3：动画效果实现
  • JavaScript：交互逻辑处理
  • Web Audio API：音效播放

2. 环境准备与开发工具

2.1 开发环境要求

  • 现代浏览器（Chrome 70+、Firefox 65+、Safari 12+）
  • 代码编辑器（VS Code、Sublime Text等）
  • 本地服务器（Live Server、http-server等）

2.2 项目文件结构

在开始编码前，我们先规划好项目目录结构：

sports-animation/ ├── index.html # 主页面文件 ├── css/ │ └── style.css # 样式文件 ├── js/ │ └── script.js # 脚本文件 └── audio/ ├── duang.mp3 # 弹跳音效 └── pip.mp3 # 提示音效

2.3 音效文件准备

由于版权考虑，我们可以使用免费音效资源网站下载合适的音效文件，或者使用在线音效生成工具创建简单的音效。

3. HTML结构设计与语义化

3.1 基础页面结构

首先创建基本的HTML5文档结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>运动会可爱动画角色</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <h1>运动会可爱角色动画</h1> <div class="characters-container"> <!-- Duang角色 --> <div class="character duang-character" id="duangChar"> <div class="character-body"></div> <div class="character-face"> <div class="eyes"> <div class="eye left-eye"></div> <div class="eye right-eye"></div> </div> <div class="mouth"></div> </div> <div class="bounce-effect"></div> </div> <!-- Pip角色 --> <div class="character pip-character" id="pipChar"> <div class="character-body"></div> <div class="character-face"> <div class="eyes"> <div class="eye left-eye"></div> <div class="eye right-eye"></div> </div> <div class="mouth"></div> </div> <div class="sparkle-effect"></div> </div> </div> <div class="controls"> <button id="resetBtn">重置动画</button> <button id="toggleSound">音效开关</button> </div> </div> <script src="js/script.js"></script> </body> </html>

3.2 语义化设计要点

  • 使用有意义的class名称，便于理解和维护
  • 为交互元素添加ID，方便JavaScript操作
  • 采用容器嵌套结构，确保布局灵活性

4. CSS动画效果实现

4.1 基础样式设置

先设置全局样式和容器布局：

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; } .container { text-align: center; padding: 20px; } h1 { color: white; margin-bottom: 40px; font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

4.2 角色容器布局

设计角色容器的响应式布局：

.characters-container { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 60px; margin-bottom: 40px; } .character { position: relative; width: 200px; height: 250px; cursor: pointer; transition: transform 0.3s ease; } .character:hover { transform: scale(1.05); }

4.3 Duang角色弹跳动画

实现duang duang的弹跳效果：

.duang-character .character-body { width: 120px; height: 120px; background: #ff6b6b; border-radius: 50%; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); animation: duangBounce 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); } @keyframes duangBounce { 0%, 100% { transform: translateX(-50%) translateY(0) scaleY(1); } 25% { transform: translateX(-50%) translateY(-80px) scaleY(0.9); } 50% { transform: translateX(-50%) translateY(0) scaleY(1.1); } 75% { transform: translateX(-50%) translateY(-40px) scaleY(0.95); } } .bounce-effect { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 60px; height: 10px; background: rgba(255,255,255,0.3); border-radius: 50%; animation: bounceShadow 2s infinite; } @keyframes bounceShadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.3; } 25% { transform: translateX(-50%) scale(0.8); opacity: 0.5; } 50% { transform: translateX(-50%) scale(1.2); opacity: 0.2; } }

4.4 Pip角色闪烁动画

实现pip pip的闪烁效果：

.pip-character .character-body { width: 100px; height: 100px; background: #4ecdc4; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); animation: pipFloat 3s infinite ease-in-out; } @keyframes pipFloat { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 33% { transform: translateX(-50%) translateY(-20px) rotate(5deg); } 66% { transform: translateX(-50%) translateY(-10px) rotate(-5deg); } } .sparkle-effect { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 24px; animation: sparkle 1.5s infinite; } @keyframes sparkle { 0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5); } 50% { opacity: 1; transform: translateX(-50%) scale(1.2); } } .sparkle-effect::before { content: "✨"; }

4.5 面部特征设计

为两个角色添加可爱的面部特征：

.character-face { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); } .eyes { display: flex; gap: 30px; margin-bottom: 15px; } .eye { width: 20px; height: 20px; background: #2c3e50; border-radius: 50%; position: relative; } .eye::after { content: ''; position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; top: 3px; left: 3px; } .mouth { width: 30px; height: 10px; background: #2c3e50; border-radius: 0 0 15px 15px; margin: 0 auto; } /* Duang角色特殊面部表情 */ .duang-character .mouth { width: 25px; height: 15px; border-radius: 50%; animation: mouthMove 2s infinite; } @keyframes mouthMove { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.7); } } /* Pip角色特殊面部表情 */ .pip-character .eyes { animation: blink 4s infinite; } @keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(0.1); } }

5. JavaScript交互逻辑实现

5.1 音效管理系统

创建音效管理类，处理音频的加载和播放：

class SoundManager { constructor() { this.sounds = {}; this.enabled = true; this.loadSounds(); } loadSounds() { // 在实际项目中这里应该加载真实的音频文件 // 由于演示目的，我们使用模拟音效 this.sounds = { duang: this.createOscillatorSound(200, 0.3), pip: this.createOscillatorSound(800, 0.2) }; } createOscillatorSound(frequency, duration) { return { play: () => { if (!this.enabled) return; const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const oscillator = audioContext.createOscillator(); const gainNode = audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContext.destination); oscillator.frequency.value = frequency; oscillator.type = 'sine'; gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration); oscillator.start(audioContext.currentTime); oscillator.stop(audioContext.currentTime + duration); } }; } playSound(name) { if (this.sounds[name] && this.enabled) { this.sounds[name].play(); } } toggleSound() { this.enabled = !this.enabled; return this.enabled; } }

5.2 动画控制系统

实现动画的控制和交互逻辑：

class AnimationController { constructor() { this.soundManager = new SoundManager(); this.initEventListeners(); } initEventListeners() { // 角色点击事件 const duangChar = document.getElementById('duangChar'); const pipChar = document.getElementById('pipChar'); duangChar.addEventListener('click', () => this.handleDuangClick()); pipChar.addEventListener('click', () => this.handlePipClick()); // 控制按钮事件 const resetBtn = document.getElementById('resetBtn'); const toggleSound = document.getElementById('toggleSound'); resetBtn.addEventListener('click', () => this.resetAnimations()); toggleSound.addEventListener('click', () => this.toggleSound()); } handleDuangClick() { this.soundManager.playSound('duang'); this.enhanceBounceAnimation('duangChar'); } handlePipClick() { this.soundManager.playSound('pip'); this.enhanceSparkleAnimation('pipChar'); } enhanceBounceAnimation(characterId) { const character = document.getElementById(characterId); const body = character.querySelector('.character-body'); // 添加点击反馈动画 body.style.animation = 'none'; setTimeout(() => { body.style.animation = 'duangBounce 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55)'; }, 10); // 添加点击效果 this.createClickEffect(character, '#ff6b6b'); } enhanceSparkleAnimation(characterId) { const character = document.getElementById(characterId); const sparkle = character.querySelector('.sparkle-effect'); // 增强闪烁效果 sparkle.style.animation = 'none'; setTimeout(() => { sparkle.style.animation = 'sparkle 0.5s ease-in-out 3'; }, 10); this.createClickEffect(character, '#4ecdc4'); } createClickEffect(element, color) { const effect = document.createElement('div'); effect.style.cssText = ` position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; background: radial-gradient(circle, ${color}40 0%, transparent 70%); animation: clickEffect 0.6s ease-out; pointer-events: none; `; const style = document.createElement('style'); style.textContent = ` @keyframes clickEffect { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } } `; document.head.appendChild(style); element.appendChild(effect); setTimeout(() => effect.remove(), 600); } resetAnimations() { const characters = document.querySelectorAll('.character'); characters.forEach(char => { const body = char.querySelector('.character-body'); const sparkle = char.querySelector('.sparkle-effect'); if (body) { body.style.animation = ''; } if (sparkle) { sparkle.style.animation = ''; } }); } toggleSound() { const enabled = this.soundManager.toggleSound(); const button = document.getElementById('toggleSound'); button.textContent = enabled ? '音效开关' : '开启音效'; } }

5.3 页面初始化

在页面加载完成后初始化动画控制器：

// 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', () => { new AnimationController(); // 添加加载完成动画 setTimeout(() => { document.body.classList.add('loaded'); }, 100); });

添加加载动画样式：

body { opacity: 0; transition: opacity 0.5s ease-in-out; } body.loaded { opacity: 1; } .character { opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; } body.loaded .character { opacity: 1; transform: translateY(0); } .duang-character { transition-delay: 0.2s; } .pip-character { transition-delay: 0.4s; }

6. 响应式设计与移动端适配

6.1 媒体查询适配

确保在不同设备上都有良好的显示效果：

/* 平板设备适配 */ @media (max-width: 768px) { .characters-container { gap: 40px; } .character { width: 160px; height: 200px; } h1 { font-size: 2rem; } } /* 手机设备适配 */ @media (max-width: 480px) { .characters-container { flex-direction: column; gap: 30px; } .character { width: 140px; height: 180px; } h1 { font-size: 1.5rem; margin-bottom: 20px; } .controls { flex-direction: column; gap: 10px; } }

6.2 触摸交互优化

针对移动设备优化触摸交互：

// 在AnimationController中添加触摸事件支持 class AnimationController { constructor() { this.soundManager = new SoundManager(); this.initEventListeners(); this.addTouchSupport(); } addTouchSupport() { // 防止触摸时的浏览器默认行为 document.addEventListener('touchstart', (e) => { if (e.target.closest('.character')) { e.preventDefault(); } }, { passive: false }); // 添加触摸反馈 const characters = document.querySelectorAll('.character'); characters.forEach(char => { char.addEventListener('touchstart', () => { char.style.transform = 'scale(0.95)'; }); char.addEventListener('touchend', () => { char.style.transform = 'scale(1)'; }); }); } }

7. 性能优化与最佳实践

7.1 动画性能优化

使用transform和opacity属性实现高性能动画：

/* 启用GPU加速 */ .character { will-change: transform, opacity; } /* 使用transform代替top/left */ .character-body { transform: translate3d(-50%, 0, 0); backface-visibility: hidden; }

7.2 代码优化建议

  • 使用CSS变量统一管理颜色和尺寸
  • 避免频繁的DOM操作
  • 使用事件委托减少事件监听器数量
  • 合理使用requestAnimationFrame

7.3 可访问性改进

添加ARIA属性支持屏幕阅读器：

<div class="character duang-character" id="duangChar" role="button" aria-label="弹跳角色，点击播放duang音效" tabindex="0"> </div>

8. 常见问题与解决方案

8.1 动画卡顿问题

问题现象：动画运行不流畅，有卡顿感

解决方案：

  • 检查是否使用了性能较差的CSS属性（如box-shadow）
  • 减少同时运行的动画数量
  • 使用transform和opacity代替其他属性
/* 优化前 */ .character { top: 100px; /* 性能较差 */ } /* 优化后 */ .character { transform: translateY(100px); /* 性能更好 */ }

8.2 音效播放延迟

问题现象：点击后音效有明显延迟

解决方案：

  • 预加载音频资源
  • 使用Web Audio API代替HTML5 Audio
  • 减少音频文件大小

8.3 移动端兼容性问题

问题现象：在部分安卓设备上动画异常

解决方案：

  • 添加浏览器前缀
  • 使用特性检测
  • 提供降级方案

9. 项目扩展思路

9.1 功能扩展建议

  • 添加更多动画角色和效果
  • 实现角色之间的交互动画
  • 添加背景音乐和音效设置面板
  • 支持自定义角色颜色和样式

9.2 技术深度拓展

  • 使用Canvas或WebGL实现更复杂的动画
  • 集成物理引擎实现更真实的运动效果
  • 添加PWA支持，支持离线使用
  • 使用WebRTC实现多用户互动

这个运动会动画项目虽然看似简单，但涵盖了现代前端开发的核心技术点。通过实现这两个可爱角色的动画效果，我们学习了CSS动画、JavaScript事件处理、音效管理和响应式设计等重要概念。

在实际项目中，这种类型的动画效果可以应用于游戏开发、教育应用、营销页面等多个场景。掌握这些技术后，你可以创建出更加生动有趣的用户界面，提升用户体验。

相关新闻

深入解析SoC电源管理：从PRCM寄存器到低功耗实战

深入解析SoC电源管理：从PRCM寄存器到低功耗实战

1. 从寄存器手册到实战&#xff1a;SoC电源管理的核心逻辑 干了这么多年嵌入式底层开发&#xff0c;我越来越觉得&#xff0c;看芯片手册就像是在读一本武功秘籍。里面每个寄存器、每个比特位都藏着设计者的巧思&#xff0c;但如果你只停留在“这个位写1是开&#xff0c;写0是关…

2026/7/21 5:25:51
AI助力跨平台开发：解决Android与鸿蒙编译难题

AI助力跨平台开发：解决Android与鸿蒙编译难题

1. 当AI成为你的编译助手&#xff1a;一次真实的开发历险 上周五晚上11点&#xff0c;我的Android Studio突然弹出一个鲜红的错误提示——第37次编译失败。作为一个有五年移动端开发经验的程序员&#xff0c;我早已习惯了与Gradle斗智斗勇的日常。但这次不同&#xff0c;四个AI…

2026/7/21 5:25:51
浏览器中运行Claude Code：前端工程化重构实践

浏览器中运行Claude Code：前端工程化重构实践

1. 为什么“把 Claude Code 装进浏览器”不是伪命题&#xff0c;而是真实可行的工程重构 “把 Claude Code 装进浏览器”——这个标题乍看像一句营销话术&#xff0c;甚至带点玄学色彩。毕竟 Claude Code 是一个命令行驱动、依赖 Node.js 运行时的 CLI 工具&#xff0c;而浏览…

2026/7/21 5:25:51

最新新闻

终极指南：使用EvilClippy快速清理Office文档敏感元数据

终极指南：使用EvilClippy快速清理Office文档敏感元数据

终极指南&#xff1a;使用EvilClippy快速清理Office文档敏感元数据 【免费下载链接】EvilClippy A cross-platform assistant for creating malicious MS Office documents. Can hide VBA macros, stomp VBA code (via P-Code) and confuse macro analysis tools. Runs on Linu…

2026/7/21 15:46:47
GPIO边沿中断寄存器深度解析：从SET_RIS_TRIG到实战应用

GPIO边沿中断寄存器深度解析：从SET_RIS_TRIG到实战应用

1. GPIO中断机制的设计哲学与核心价值 在嵌入式系统开发中&#xff0c;实时性往往不是一种“锦上添花”的特性&#xff0c;而是决定系统成败的基石。想象一下&#xff0c;一个工业机械臂的紧急停止按钮被按下&#xff0c;或者一个医疗监护设备检测到患者心率骤变&#xff0c;系…

2026/7/21 15:46:28
TMS320F2837xD时钟与中断深度解析：构建高可靠嵌入式系统

TMS320F2837xD时钟与中断深度解析：构建高可靠嵌入式系统

1. 项目概述与核心价值在工业电机驱动、数字电源或者多轴运动控制这类对实时性和可靠性要求近乎苛刻的嵌入式系统中&#xff0c;我们手里的那颗MCU&#xff0c;其“心跳”和“神经反射”机制的设计水平&#xff0c;直接决定了整个系统的性能天花板和长期运行的稳定度。这里的“…

2026/7/21 15:46:28
数据结构中树的应用与优化实践

数据结构中树的应用与优化实践

1. 从家族树到数据结构&#xff1a;树的本质理解 第一次接触"树"这个概念是在大学的数据结构课上。教授用家族谱系作类比——最年长的祖先在顶端&#xff0c;向下分支出子女&#xff0c;子女再分支出孙辈&#xff0c;这种层级关系完美诠释了树结构的核心特征。这种直…

2026/7/21 15:46:28
TI AM335x ADPLL寄存器配置全解析：从原理到实战避坑指南

TI AM335x ADPLL寄存器配置全解析：从原理到实战避坑指南

1. 项目概述与核心价值在嵌入式系统开发&#xff0c;尤其是基于复杂SoC&#xff08;片上系统&#xff09;的设计中&#xff0c;时钟管理是决定系统稳定性、性能和功耗的基石。想象一下&#xff0c;一个SoC内部集成了CPU核心、图形处理器、各类高速总线和数十个外设&#xff0c;…

2026/7/21 15:46:28
VPDMA中断掩码寄存器配置：嵌入式视频处理系统性能优化关键

VPDMA中断掩码寄存器配置：嵌入式视频处理系统性能优化关键

1. 项目概述与中断机制核心价值在嵌入式视频处理系统的开发中&#xff0c;尤其是面对德州仪器&#xff08;TI&#xff09;这类高性能多媒体处理器时&#xff0c;如何高效、精准地管理数据流是决定系统性能上限的关键。其中&#xff0c;中断机制扮演着“神经系统”的角色&#x…

2026/7/21 15:46:28

日新闻

多维聚合中的数据操作：超越GROUP BY的语义建模

多维聚合中的数据操作：超越GROUP BY的语义建模

1. 项目概述&#xff1a;为什么多维聚合中的数据操作不是“加个GROUP BY”就能搞定的“Part 20: Data Manipulation in Multi-Dimensional Aggregation”——这个标题乍看像教科书里一个平平无奇的章节编号&#xff0c;但在我带过三十多个BI系统重构、数据中台搭建和实时报表优…

2026/7/21 0:00:06
Python开发内部工具：7大核心库实战解析

Python开发内部工具：7大核心库实战解析

1. 为什么Python是开发内部工具的首选在当今快节奏的企业环境中&#xff0c;开发高效的内部工具对于提升团队生产力至关重要。Python凭借其丰富的生态系统和易用性&#xff0c;成为构建内部工具的不二之选。我曾在多个项目中用Python快速搭建过库存管理系统、数据报表工具和自动…

2026/7/21 0:00:06
Octane Render与C4D汉化版安装与优化指南

Octane Render与C4D汉化版安装与优化指南

1. Octane Render与C4D的黄金组合&#xff1a;为什么选择这个方案&#xff1f;在三维创作领域&#xff0c;渲染器的选择往往决定了作品的最终呈现质量和工作效率。作为Cinema 4D&#xff08;C4D&#xff09;用户&#xff0c;Octane Render的GPU加速特性与实时预览功能&#xff…

2026/7/21 0:00:33

周新闻

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

2026年7月最新太原百达翡丽官方售后客服电话及服务网点地址查询 - 百达翡丽官方售后中心

2026年7月，百达翡丽在太原的官方售后服务体系完成更新，客户可通过全国统一客服热线与服务网点获得直接、合规的腕表养护与维修支持。所有售后服务均遵循品牌直营标准，覆盖全国范围，客户可选择到店或邮寄方式，但需…

2026/7/21 1:06:07
【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

【JVM调优实战】16-可视化利器-JConsole-VisualVM-JMC

可视化利器：JConsole、VisualVM、JMC 实战 本文是《JVM调优实战》专栏第 16 讲。 引言 上一讲我们介绍了 JDK 命令行工具箱，它们轻量、快速，但有一个明显的短板：不直观。面对 jstat -gcutil 输出的一行行数字，你能感知 GC 频率，却难以一眼看出内存泄漏的趋势；你能用 js…

2026/7/21 1:31:40
什么是PCTFE？医药高端包装的“防潮王牌“材料

什么是PCTFE？医药高端包装的“防潮王牌“材料

——日氟荣高分子材料&#xff08;上海&#xff09;有限公司 专业深耕氟材料领域很多人好奇&#xff0c;高端药品包装为什么比普通包装更防潮、更稳定、保质期更长&#xff1f;核心秘密&#xff0c;就藏在一种特种氟材料——PCTFE聚三氟氯乙烯里&#xff01;作为国内领先的氟材…

2026/7/21 1:33:17

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/20 23:56:25
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/21 14:53:32
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/20 16:05:08