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

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

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:开始旋转,重置旋转次数,设置 isRotatingtrue,并调用 rotate 方法。
    • stopRotation:停止旋转,设置 isRotatingfalse,并清除动画帧。
    • rotate:递归调用的方法,用于模拟旋转动画。每次调用会增加旋转次数和旋转速度,然后通过 requestAnimationFrame 请求下一帧的调用。
相关推荐
恋猫de小郭18 分钟前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v36 分钟前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍38 分钟前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_2 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒2 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风3 小时前
关于手机的设备信息
前端
ReturnTrue8683 小时前
nginx性能优化之Gzip
前端
w_y_fan4 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇4 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端