使用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 请求下一帧的调用。
相关推荐
IT_陈寒23 分钟前
Python 3.12 的这5个新特性,让我的代码性能提升了40%!
前端·人工智能·后端
方安乐39 分钟前
vite+vue+js项目使用ts报错
前端·javascript·vue.js
韩立233342 分钟前
Vue 3.5 升级指南
前端·vue.js
njsgcs43 分钟前
网页连接摄像头
javascript·css·html
子兮曰1 小时前
🚀别再乱写package.json了!这些隐藏技巧让项目管理效率提升300%
前端·javascript·npm
我叫汪枫1 小时前
Spring Boot图片验证码功能实现详解 - 从零开始到完美运行
java·前端·javascript·css·算法·html
小桥风满袖1 小时前
极简三分钟ES6 - ES8中async,await
前端·javascript
一直在学习的小白~2 小时前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
前端小超超2 小时前
如何配置capacitor 打包的ios app固定竖屏展示?
前端·ios·web app
nightunderblackcat2 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui