当前位置：首页 > news >正文

使用vue2写一个太极图，并且点击旋转

news 2025/7/14 2:01:27

下面是我自己写的一个代码，命名有些不规范，大家不要介意。

<template><div class="qq"><div class="app" :style="{ transform: rotateStyle }"><div class="app1"><div class="app3"><div class="app5"></div></div></div><div class="app2"><div class="app4"><div class="app6"></div></div></div></div><!-- 点击按钮 --><button class="app7" @click="toggleRotation">点击开始/停止旋转</button></div>
</template><script>
export default {data() {return {rotationSpeed: 1, // 初始旋转速度rotationCount: 0, // 旋转次数isRotating: false, // 是否正在旋转animationFrameId: null // 用于保存 requestAnimationFrame 返回的 ID};},computed: {rotateStyle() {return `rotate(-${this.rotationCount * this.rotationSpeed}deg)`;}},methods: {toggleRotation() {if (this.isRotating) {this.stopRotation();} else {this.startRotation();}},startRotation() {this.rotationCount = 0; // 重置旋转次数this.isRotating = true; // 开始旋转this.rotate();},stopRotation() {this.isRotating = false; // 停止旋转cancelAnimationFrame(this.animationFrameId); // 清除动画帧},rotate() {if (this.isRotating) {this.rotationCount++;this.rotationSpeed *= 1.002; // 加速旋转this.animationFrameId = requestAnimationFrame(this.rotate);}}}
};
</script><style>
.qq {width: 800px;height: 800px;background-color: gray;display: flex;align-items: center;justify-content: center;
}.app {display: flex;width: 310px;height: 310px;align-items: center;justify-content: center;
}.app1 {width: 150px;height: 300px;background-color: black;border-radius: 150px 0 0 150px;
}.app2 {width: 150px;height: 300px;background-color: white;border-radius: 0 150px 150px 0;
}.app3 {width: 150px;height: 150px;background-color: black;border-radius: 50%;position: absolute;margin-left: 75px;display: flex;align-items: center;justify-content: center;
}.app4 {width: 150px;height: 150px;background-color: white;border-radius: 50%;position: absolute;margin-top: 150px;margin-left: -75px;display: flex;align-items: center;justify-content: center;
}.app5 {width: 50px;height: 50px;background-color: white;border-radius: 50%;}.app6 {width: 50px;height: 50px;background-color: black;border-radius: 50%;
}.app7 {margin-left: 100px;
}
</style>

在 Vue.js 组件的 data 部分，定义了一些数据属性，包括 rotationSpeed（旋转速度）、rotationCount（旋转次数）、isRotating（是否正在旋转）和 animationFrameId（保存 requestAnimationFrame 返回的 ID）。
通过 computed 属性 rotateStyle 计算样式，用于控制旋转的角度。
定义了三个方法：
- toggleRotation：切换旋转状态，如果正在旋转，则停止；如果未旋转，则开始。
- startRotation：开始旋转，重置旋转次数，设置 isRotating 为 true，并调用 rotate 方法。
- stopRotation：停止旋转，设置 isRotating 为 false，并清除动画帧。
- rotate：递归调用的方法，用于模拟旋转动画。每次调用会增加旋转次数和旋转速度，然后通过 requestAnimationFrame 请求下一帧的调用。