使用vue2写一个太极图，并且点击旋转-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用vue2写一个太极图，并且点击旋转。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

下面是我自己写的一个代码，命名有些不规范，大家不要介意。文章来源地址https://www.toymoban.com/news/detail-805396.html

<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 请求下一帧的调用。