CSS关键帧动画实现小球循环碰撞

马黑黑 · 发表于 2024-6-28 12:50

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

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

x

效果：

代码：

<style>

#stage { --state: running; margin: 20px auto; padding: 6px 0; width: 600px; height: 40px; border: 1px solid gray; position: relative; }

.ball { position: absolute; left: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(pink, darkgreen); cursor: pointer; animation: 2s linear forwards var(--state); }

#b1 { animation-name: move1; }

#b2 { left: 300px; background: linear-gradient(plum, navy); }

@keyframes move1 { from { transform: translate(0px); } to { transform: translate(260px); } }

@keyframes move2 { from {transform: translate(260px); } to { transform: translate(0px); } }

</style>

</div>

var running = true; //运行开关

//小球1动画结束：处理俩球的动画名称

b1.onanimationend = () => {

var name = window.getComputedStyle(b1).getPropertyValue('animation-name');

if(name === 'move1') {

b1.style.animationName = '';

b2.style.animationName = 'move1';

}else{

b1.style.animationName = 'move1';

}

};

//小球2动画结束：处理俩球的动画名称

b2.onanimationend = () => {

var name = window.getComputedStyle(b2).getPropertyValue('animation-name');

if(name === 'move1') {

b2.style.animationName = 'move2';

}else{

b1.style.animationName = '';

b1.style.animationName = 'move2';

}

};

//小球点击事件：播放、暂停切换

b1.onclick = b2.onclick = () => {

stage.style.setProperty('--state', ['running','paused'][+running]);

running = !running;

};

</script>

马黑黑 · 发表于 2024-6-28 13:10

本帖最后由马黑黑于 2024-6-28 13:11 编辑

本示例：

（一）俩小球的布局需要注意一下，球1 left 为 0，球2 left 是 300px。酱紫俩小球的运行距离设定能达到预期：球1球2都能触碰左或右边界，俩球相碰撞的状态也恰到好处——亲密接触而不越位；

（二）关键帧动画两个，move1 和 move2，凭借 transform 属性 translate 平移的特征，两个 @keyframes 的设计仅需互换一下 from 和 to 的属性值即可，大大减少编程过程中的计算开销；

（三）为方便管理，俩小球各自定义好 id 表示，b1 和 b2；

（四）在 CSS 中设定好 b1 的 animation-name，即动画名称，为 move1；

（五）JS中，设计一个变量做关键帧动画的运行开关，小球被点击时根据开关变量值决定动画暂停还是继续；

（六）基于动画，元素原生拥有 animationend 事件（还有 animationstart 和 animationiteration 事件）， animationend 事件指动画结束事件。注意，只有非循环运行的动画此属性才能生效，因此在 .ball 选择器的 animation 属性中使用了 animation-duration 缺省值，运行一次；.ball 选择器的 animation 属性还有一个奇怪的现象：没有设置动画名称！这是因为另外设置，在 CSS 中给 #b1 设置、在 JS 中动态设置；

（七）俩小球的 animationend 事件中，使用 window.getComputedStyle(element) 函数获得当前小球的动画名称，并依此做相关处理，以操控小球运动结束时下一步做什么。这是巧妙的设计，但只是简简单单的实现算法而已。