太极旋转的实现原理
太极图是一个非常有趣的图形，它由两个相互对称的半圆组成，一个代表阴，一个代表阳，在HTML中，我们可以使用CSS和JavaScript来实现太极图的旋转，具体实现方法如下：
1、使用CSS创建一个圆形容器，用于放置太极图。
2、使用CSS创建两个半圆形，分别表示太极图的上半部分(阴)和下半部分(阳)。
3、使用CSS设置两个半圆形的样式，使它们相互对称。
4、使用JavaScript监听鼠标事件，根据鼠标的位置改变太极图的角度，从而实现旋转效果。
5、使用CSS设置动画，使太极图以平滑的方式旋转。
具体的代码实现
我们需要在HTML文件中引入CSS和JavaScript文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太极旋转</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="taiji">
<div class="half-circle"></div>
<div class="half-circle"></div>
</div>
<script src="script.js"></script>
</body>
</html>
接下来，我们在CSS文件中设置太极图的样式：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: f0f0f0;
}
.taiji {
position: relative;
width: 200px;
height: 200px;
}
.half-circle {
position: absolute;
width: 100%;
height: 100%;
}
.half-circle:first-child {
border-radius: 100% 100% 0 0; /* 只显示上半部分 */
background-color: fff; /* 白色背景 */
transform-origin: bottom center; /* 以圆心为基准点 */
transform: rotate(90deg); /* 将上半部分顺时针旋转90度 */
}
.half-circle:last-child {
border-radius: 100% 100% 100% 0; /* 只显示下半部分 */
background-color: 333; /* 黑色背景 */
transform-origin: top center; /* 以圆心为基准点 */
transform: rotate(-90deg); /* 将下半部分逆时针旋转90度 */
}
我们在JavaScript文件中添加鼠标事件监听器和动画效果：
const taiji = document.querySelector('.taiji'); //获取太极图容器元素
const halfCircles = taiji.querySelectorAll('.half-circle'); //获取两个半圆形元素
let angle = [0, 0]; //定义一个数组用于存储两个半圆形的角度值
let timer; //定义一个定时器变量用于控制动画速度
let isMouseDown = false; //定义一个布尔变量用于判断鼠标是否按下
let startX, endX, startY, endY; //定义四个变量用于存储鼠标按下时的坐标值和松开时的坐标值，以及计算角度所需的临时变量
let rotationAngle = Math.PI * (360/2) * (360/4); //定义太极图需要旋转的角度值(360/4是因为太极图是由两个相互对称的半圆形组成的)
接下来，我们添加鼠标事件监听器和动画效果：
// 为太极图添加鼠标按下事件监听器和移动事件监听器，并计算鼠标移动的距离以及旋转的角度值，然后更新两个半圆形的角度值并执行动画效果，同时判断是否需要停止动画效果(当鼠标松开时)或者重新开始动画效果(当鼠标移动时)
function handleMouseDown(e) {
e.preventDefault(); //阻止默认行为(阻止鼠标拖动太极图)
taiji.addEventListener('mousemove', handleMouseMove); //为太极图添加鼠标移动事件监听器(当鼠标移动时)
taiji.addEventListener('mouseup', handleMouseUp); //为太极图添加鼠标松开事件监听器(当鼠标松开时) // ...省略其他代码 ...} function handleMouseMove(e) { //计算鼠标移动的距离以及旋转的角度值 if (isMouseDown) { //如果鼠标已经按下 const dx = e.clientX startX; //计算鼠标在x轴上的移动距离 const dy = e.clientY startY; //计算鼠标在y轴上的移动距离 angle[isMouseDown === true? 'y' + (isMouseDown === true? '2' + (startY > endY): '1'): 'x' + (startX > endX)] += Math.atan2(dy, dx); //计算角度值并更新两个半圆形的角度值 if (Math.abs(dx) > Math.abs(dy)) angle['y' + (isMouseDown === true? '2': '1')] += Math.atan2(dy, dx) * (isMouseDown === true? (endY > endX): (endX > endY)); else angle['x' + (startX > endX)] += Math.atan2(dy, dx) * (isMouseDown === true? (endY > endX): (endX > endY)); // ...省略其他代码 ...} else startX = e.clientX; //当鼠标没有按下时，记录鼠标按下时的坐标值 startY = e.clientY; // ...省略其他代码 ...} function handleMouseUp() { //当鼠标松开时，移除鼠标移动和鼠标松开事件监听器 isMouseDown = false; clearInterval(timer); //停止动画效果 timer = null; // ...省略其他代码 ...} function animate() { //执行动画效果 if (timer) return; for (let i = 0; i < angle.length; i++) angle[i] += rotationAngle * (isMouseDown === true? (endY > endX): (endX > endY)); halfCircles[isMouseDown === true? 'second': 'first'].style.transform = rotate(${angle[isMouseDown === true? 'y' + (isMouseDown === true? '2': '1'): 'x']}deg); halfCircles[isMouseDown === true? 'second': 'first'].style.transition = transform ${isMouseDown === true? '1s': '2s'} linear; if (!isMouseDown && Math.abs(angle['y' + (isMouseDown === true? '2': '1')]) >= Math.abs(angle['x' + (startX > endX)]) || isMouseDown && Math.abs(angle['x' + (startX > endX)]) >= Math.abs(angle['y' + (isMouseDown === true? '2': '1')])) isMouseDown = true; else isMouseDown = false; timer = setInterval(animate, isMouseDown === true? (endY > endX)? interval1: interval2: interval1);} animate(); //调用animate函数启动动画效果 animate(); //再次调用animate函数启动动画效果 animate(); //再次调用animate函数启动动画效果 animate(); //再次调用animate函数启动动画效果 animate(); //再次调用animate函数启动动画效果 animate(); </script> </head> <body> <div class="taiji"> <div class="half-circle"> </div> <div class="half-circle"> </div> </div> </body> </html>相关问题与解答Q1:如何让太极图旋转的速度更快？A1:可以通过调整interval1和interval2的值来改变太极图旋转的速度，数值越大，旋转速度越快，可以将interval1和interval2的值都设置为50改为将它们都设置为20，Q2:如何让太极图可以水平旋转？A2:只需要修改太极图的样式即可，将.half-circle类中的transform-origin属性值改为center center,然后将.half-circle类中的transform属性值改为
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/273479.html
微信扫一扫 
