CSS关键帧动画之圆周运动演示

马黑黑 · 发表于 2024-6-27 12:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

元素的 transform 属性，若 rotate 与 translate 配合使用，rotate(deg) 在前、translate(distance) 随后，则会令元素以自己为中心、以 distance 为半径，在旋转 deg 个角度的同时做圆周运动。以下，彩球初始位置在银色圆球处，现在它在虚线方框的正下方，因为它旋转了0度、沿Y轴平移了200px，即 transform: rotate(0deg) translateY(200px)。可以改变彩球的旋转角度和平移半径，也可以让小球执行关键帧动画，以便查看和感受 transform 属性旋转与平移配套使用的效果：

transform: rotate(0) translateY(0);

旋转角度： 0deg

移动半径： 200px

运行关键帧动画

马黑黑 · 发表于 2024-6-27 12:42

一楼的演示，都是基于 rotate + translateY 进行，其实呢，平移可以是X轴方向的，感兴趣的朋友可以试一下，我将在下层楼提供一楼的完整代码。

马黑黑 · 发表于 2024-6-27 12:42

一楼演示完整代码：

<style>
#mydiv {
margin: 30px auto;
width: 400px;
height: 400px;
border: 2px dotted lightblue;
position: relative;
}
#mydiv::after {
position: absolute;
content: '';
inset: 0;
border: 1px dashed plum;
border-radius: 50%;
}
.ball {
position: absolute;
box-sizing: border-box;
left: calc(50% - 20px);
top: calc(50% - 20px);
width: 40px;
height: 40px;
background: linear-gradient(lightgreen, purple);
border-radius: 50%;
}
.ball:nth-of-type(1) {
background: silver;
}
.ball:nth-of-type(2) {
transition: .4s;
transform: rotate(var(--deg)) translateY(var(--distance));
--deg: 0deg;
--distance: 200px;
}
.wrap { margin: 30px auto; width: 400px; }
.msg { font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
@keyframes move { to { transform: rotate(calc(var(--deg) + 360deg)) translateY(var(--distance)); } }
</style>
<p>元素的 transform 属性，若 rotate 与 translate 配合使用，rotate(deg) 在前、translate(distance) 随后，则会令元素以自己为中心、以 distance 为半径，在旋转 deg 个角度的同时做圆周运动。以下，彩球初始位置在银色圆球处，现在它在虚线方框的正下方，因为它旋转了0度、沿Y轴平移了200px，即 transform: rotate(0deg) translateY(200px)。可以改变彩球的旋转角度和平移半径，也可以让小球执行关键帧动画，以便查看和感受 transform 属性旋转与平移配套使用的效果：</p>
<div id="mydiv">
<div class="ball"></div>
<div id="ball" class="ball"></div>
</div>
<div class="wrap">
<p><output id="msg1" class="msg">transform: rotate(0) translateY(0);</output></p>
<p>
<label for="rDeg">旋转角度：</label>
<input id="rDeg" type="range" max="360" min="-360" value="0" />
<output id="sDeg">0deg</output>
</p>
<p>
<label for="rDistance">移动半径：</label>
<input id="rDistance" type="range" max="200" min="0" value="200" />
<output id="sDistance">200px</output>
</p>
<p>
<label for="rAuto">运行关键帧动画</label>
<input id="rAuto" type="checkbox" />
</p>
<pre id="msg2" class="msg"></pre>
</div>
<script>
rDeg.oninput = rDistance.oninput = () => {
sDeg.value = rDeg.value + 'deg';
sDistance.value = rDistance.value + 'px';
ball.style.setProperty('--deg', rDeg.value + 'deg');
ball.style.setProperty('--distance', rDistance.value + 'px');
msg1.value = `transform: rotate(${sDeg.value}) translateY(${sDistance.value});`;
};
rAuto.onclick = () => {
if(!rAuto.checked) return;
rDeg.disabled = rDistance.disabled = true;
ball.style.animation = 'move 6s forwards';
msg2.textContent = `
@keframes move {
from { transform: rotate(${sDeg.value}) translateY(${sDistance.value}); }
to { transform: rotate(${parseInt(sDeg.value) + 360}deg) translateY(${sDistance.value}); }
}`;
};
ball.onanimationend = () => {
rDeg.disabled = rDistance.disabled = false;
rAuto.checked = false;
ball.style.animation = '';
};
</script>