vue 实现跳动爱心
实现跳动爱心的 Vue 组件
以下是使用 Vue 3 实现跳动爱心的代码示例，通过 CSS 动画和动态样式实现效果。
模板部分
<template>
<div class="heart-container">
<div
class="heart"
:style="{ transform: `scale(${scale})` }"
@click="toggleBeat"
></div>
</div>
</template>脚本部分
<script>
import { ref } from 'vue';
export default {
setup() {
const scale = ref(1);
const isBeating = ref(false);
let beatInterval;
const startBeat = () => {
isBeating.value = true;
let growing = true;
beatInterval = setInterval(() => {
if (growing) {
scale.value += 0.05;
if (scale.value >= 1.2) growing = false;
} else {
scale.value -= 0.05;
if (scale.value <= 1) growing = true;
}
}, 100);
};
const stopBeat = () => {
isBeating.value = false;
clearInterval(beatInterval);
scale.value = 1;
};
const toggleBeat = () => {
isBeating.value ? stopBeat() : startBeat();
};
return { scale, toggleBeat };
}
};
</script>样式部分
<style scoped>
.heart-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.heart {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transform: rotate(45deg);
cursor: pointer;
transition: transform 0.1s ease;
}
.heart:before,
.heart:after {
content: '';
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.heart:before {
top: -50px;
left: 0;
}
.heart:after {
top: 0;
left: -50px;
}
</style>实现原理
-
爱心形状
通过 CSS 创建正方形元素并旋转 45 度，配合两个伪元素形成圆形，组合成爱心形状。
-
跳动动画
使用 JavaScript 定时器动态修改 transform 的 scale 值，在 1 到 1.2 之间循环变化，模拟心跳效果。 -
交互控制
点击爱心时触发 toggleBeat 方法，控制动画的启动和停止。 -
响应式样式
通过 Vue 的 ref 响应式变量 scale 动态绑定样式，实现平滑的缩放效果。
扩展建议
- 添加更多动画效果如颜色渐变或位置移动
- 使用 CSS @keyframes 实现更复杂的动画序列
- 通过 props 接收自定义颜色和大小参数
- 添加音效增强交互体验
该组件可以直接在 Vue 项目中导入使用，或根据需求进一步调整动画参数和样式。
