📅 我们继续 50 个小项目挑战！—— AnimatedCountdown组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/。

---

使用 Vue 3 的 Composition API 和 TailwindCSS 来构建一个引人注目的倒计时动画组件。该组件首先展示“GO”字样，随后通过一系列数字（3, 2, 1）的动画过渡，最终再次回到初始状态。这个过程不仅视觉效果出色，而且非常适合用于启动页或游戏开始前的准备阶段。

---

🎯 应用目标

• 显示“GO”字样作为起始点
• 使用数字动画进行倒计时（3, 2, 1）
• 动画过程中包括缩放、旋转和透明度变化
• 提供一个按钮来启动整个倒计时流程
• 使用 Vue 3 Composition API 管理组件的状态与行为
• 利用 TailwindCSS 实现简洁而现代的设计

---

⚙️ 技术实现点

技术点	描述
Vue 3 <script setup>	使用 ref 管理倒计时状态、当前显示的数字索引等
自定义函数 runAnimation	控制动画序列和状态切换
TailwindCSS 样式	构建美观且响应式的动画组件
动态类绑定	根据动画阶段动态调整样式
异步等待函数 wait	模拟时间延迟

---

🧱 组件实现

模板结构 <template>

<template>
    <div class="fixed inset-0 flex items-center justify-center bg-white">
        <!-- GO 文字 -->
        <div v-if="showGo" class="text-7xl font-bold text-blue-500">GO</div>

        <!-- 倒计时数字动画 -->
        <div v-else class="relative h-[200px] w-[200px]">
            <span
                v-for="(num, idx) in numbers"
                :key="idx"
                v-show="currentIndex === idx"
                :class="[
                    'absolute top-1/2 left-1/2 origin-[50%_200%] text-6xl font-bold text-blue-600 transition-all duration-500 ease-in-out',
                    stage === 'in' ? 'scale-0 rotate-[120deg] opacity-0' : '',
                    stage === 'center' ? 'scale-100 rotate-0 opacity-100' : '',
                    stage === 'out' ? 'scale-0 rotate-[-120deg] opacity-0' : '',
                ]">
                {{ num }}
            </span>
        </div>

        <!-- 开始按钮 -->
        <div v-if="!started" class="absolute bottom-20">
            <button
                @click="startCountdown"
                class="rounded bg-blue-500 px-6 py-2 text-white shadow hover:bg-blue-600">
                开始
            </button>
        </div>
    </div>
</template>

模板部分清晰地展示了如何根据不同的状态显示“GO”文字或倒计时数字，并且每个数字都有独特的动画效果。

---

脚本逻辑 <script setup>

<script setup>
import { ref } from 'vue'

const numbers = [3, 2, 1]
const currentIndex = ref(0)
const stage = ref('in') // "in", "center", "out"
const started = ref(false)
const showGo = ref(true)

const reset = () => {
    started.value = false
    showGo.value = true
    currentIndex.value = 0
}

const runAnimation = async () => {
    showGo.value = false
    for (let i = 0; i < numbers.length; i++) {
        currentIndex.value = i

        stage.value = 'in'
        await wait(100)

        stage.value = 'center'
        await wait(1000)

        stage.value = 'out'
        await wait(500)
    }

    showGo.value = true
    stage.value = ''
    await wait(1000)
    reset()
}

const startCountdown = () => {
    started.value = true
    runAnimation()
}

function wait(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))
}
</script>

脚本部分定义了倒计时动画的核心逻辑，包括状态管理、动画序列控制以及异步等待函数，确保动画流畅运行。

---

样式部分（TailwindCSS）

本组件完全依赖 TailwindCSS 来构建其设计和动画效果。以下是关键类及其作用：

🎨 TailwindCSS 样式重点讲解

类名	作用
fixed, inset-0, flex, items-center, justify-center, bg-white	创建全屏居中的白色背景容器
text-7xl, font-bold, text-blue-500	设置“GO”文字的大小、粗细和颜色
relative, h-[200px], w-[200px]	定义倒计时数字容器的尺寸
absolute, top-1/2, left-1/2, origin-[50%_200%]	将每个数字定位在容器中心并设置旋转原点
transition-all, duration-500, ease-in-out	添加平滑的动画过渡效果
scale-0, rotate-[120deg], opacity-0	“进入”阶段的动画属性
scale-100, rotate-0, opacity-100	“中间”阶段的动画属性
scale-0, rotate-[-120deg], opacity-0	“退出”阶段的动画属性
absolute, bottom-20	开始按钮的位置
rounded, bg-blue-500, px-6, py-2, shadow, hover:bg-blue-600	开始按钮的样式和悬停效果

这些 TailwindCSS 类共同构建出一个具有吸引力的倒计时动画组件。

---

🔍 关键功能解析

✅ 动画逻辑

通过 stage 变量跟踪动画的不同阶段（进入、中间、退出），并在每个阶段应用相应的 CSS 类以产生动画效果。利用 await wait() 函数控制每个阶段的时间长度，使得动画更加自然流畅。

💬 用户交互

用户点击“开始”按钮后，触发 startCountdown 方法，从而启动倒计时动画。此方法还负责初始化和重置组件状态，确保每次倒计时都能从头开始。

---

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 34,
        title: 'Animated Countdown',
        image: 'https://50projects50days.com/img/projects-img/34-animated-countdown.png',
        link: 'AnimatedCountdown',
    },

router/index.js 中添加路由选项：

{
        path: '/AnimatedCountdown',
        name: 'AnimatedCountdown',
        component: () => import('@/projects/AnimatedCountdown.vue'),
    },

---

🏁 总结

使用 Vue 3 Composition API 结合 TailwindCSS 创建一个包含丰富动画效果的倒计时组件。无论是用于网页引导页还是游戏启动界面，这样的组件都能显著提升用户体验。

你可以考虑以下方式来扩展这个基础的倒计时组件：

• ✅ 增加音效支持：在每个数字出现时播放声音。
• ✅ 自定义倒计时时间：允许用户输入或选择倒计时的具体秒数。
• ✅ 添加结束动作：例如跳转到新页面或触发其他事件。
• ✅ 多语言支持：提供不同语言的“GO”文本或其他提示信息。

---

👉 下一篇，我们将完成ImageCarousel组件，实现一个图片轮播组件。🚀

感谢阅读，欢迎点赞、收藏和分享 😊