论坛 › 马黑黑教程专版 › 单个粒子绕圆圈演示

马黑黑 发表于 2025-7-13 21:48

单个粒子绕圆圈演示

代码
<style>
        #wrap {
                --size: 500px; /* 容器元素尺寸 */
                margin: 100px auto;
                width: var(--size);
                height: var(--size);
                border: 1px solid skyblue;
                border-radius: 50%;
                position: relative;
        }
        li-zi {
                position: absolute;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: radial-gradient(at 20% 30%, tan 1%, skyblue);
                box-shadow: 4px 4px 8px gray;
                transform: rotate(var(--deg)) translate(var(--r));
        }
</style>

<section id="wrap" title="点击开始/暂停">
        <li-zi></li-zi>
</section>

<script>
        var lz = wrap.querySelector('li-zi'); // 获取粒子元素
        var angle = Math.floor(Math.random() * 360); // 粒子随机旋转角度
        var r = (wrap.clientWidth - lz.clientWidth) / 2 + lz.clientWidth / 2; // 粒子平移半径
        var rtime, isRun = false; // 请求关键帧id、粒子运行标识

        // 初始化粒子CSS数据
        lz.style.cssText += `
                left: calc(50% - ${lz.clientWidth / 2}px);
                top: calc(50% - ${lz.clientHeight / 2}px);
                --deg: ${angle}deg;
                --r: ${r}px;
        `;

        // 容器单击事件
        wrap.onclick = () => {
                isRun ? cancelAnimationFrame(rtime) : rtime = animate();
                isRun = !isRun;
        };

        // 循环运行动画
        function animate() {
                rtime = requestAnimationFrame(animate);
                lz.style.setProperty('--deg', angle + 'deg');
                angle = (angle + 0.5) % 360;
        }
</script> 效果在二楼

马黑黑 发表于 2025-7-13 21:49

<style>
        #wrap {
                --size: 500px; /* 容器元素尺寸 */
                margin: 100px auto;
                width: var(--size);
                height: var(--size);
                border: 1px solid skyblue;
                border-radius: 50%;
                position: relative;
        }
        li-zi {
                position: absolute;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: radial-gradient(at 20% 30%, tan 1%, skyblue);
                box-shadow: 4px 4px 8px gray;
                transform: rotate(var(--deg)) translate(var(--r));
        }
</style>

<section id="wrap" title="点击开始/暂停">
        <li-zi></li-zi>
</section>

<script>
        var lz = wrap.querySelector('li-zi'); // 获取粒子元素
        var angle = Math.floor(Math.random() * 360); // 粒子随机旋转角度
        var r = (wrap.clientWidth - lz.clientWidth) / 2 + lz.clientWidth / 2; // 粒子平移半径
        var rtime, isRun = false; // 请求关键帧id、粒子运行标识

        // 初始化粒子CSS数据
        lz.style.cssText += `
                left: calc(50% - ${lz.clientWidth / 2}px);
                top: calc(50% - ${lz.clientHeight / 2}px);
                --deg: ${angle}deg;
                --r: ${r}px;
        `;

        // 容器单击事件
        wrap.onclick = () => {
                isRun ? cancelAnimationFrame(rtime) : rtime = animate();
                isRun = !isRun;
        };

        // 循环运行动画
        function animate() {
                rtime = requestAnimationFrame(animate);
                lz.style.setProperty('--deg', angle + 'deg');
                angle = (angle + 0.5) % 360;
        }
</script>

马黑黑 发表于 2025-7-13 21:51

这个例子，使用 requestanimationframe（请求关键帧动画）API驱动数据变更，转圈效果一般而言更为流畅。

调整转圈的速度，修改 50 行代码的 0.5 为期望的数值（正负浮点数或整数都可以）。

马黑黑 发表于 2025-7-13 21:53

animate 动画函数就是不断地加角度，所加的歩幅 0.5，减去 0.5 会往相反方向绕圈

红影 发表于 2025-7-13 23:03

这个就是用增加或减少角度而旋转呢，转动很平稳{:4_187:}

马黑黑 发表于 2025-7-13 23:08

红影 发表于 2025-7-13 23:03
这个就是用增加或减少角度而旋转呢，转动很平稳

单个粒子可能更容易理解吧。理解了这个，其它的就有基础了

小文 发表于 2025-7-14 08:36

问好先生，欣赏了。{:4_191:}

杨帆 发表于 2025-7-14 15:37

讲的真好，深入浅出，栩栩如生，谢谢马老师{:4_190:}

马黑黑 发表于 2025-7-14 18:29

杨帆 发表于 2025-7-14 15:37
讲的真好，深入浅出，栩栩如生，谢谢马老师

{:4_191:}

马黑黑 发表于 2025-7-14 18:29

小文 发表于 2025-7-14 08:36
问好先生，欣赏了。

{:4_190:}

红影 发表于 2025-7-15 12:06

马黑黑 发表于 2025-7-13 23:08
单个粒子可能更容易理解吧。理解了这个，其它的就有基础了

黑黑说得太对了，单个的个容易理解呢{:4_187:}

马黑黑 发表于 2025-7-15 18:13

红影 发表于 2025-7-15 12:06
黑黑说得太对了，单个的个容易理解呢

不过单个难以构成精彩的效果

红影 发表于 2025-7-15 20:48

马黑黑 发表于 2025-7-15 18:13
不过单个难以构成精彩的效果

先学简单的，复杂的等会了简单的再说啊{:4_173:}

马黑黑 发表于 2025-7-15 20:50

红影 发表于 2025-7-15 20:48
先学简单的，复杂的等会了简单的再说啊

一般都酱紫

红影 发表于 2025-7-15 20:58

马黑黑 发表于 2025-7-15 20:50
一般都酱紫

循序渐进{:4_173:}

马黑黑 发表于 2025-7-15 20:58

红影 发表于 2025-7-15 20:58
循序渐进

这是道理

红影 发表于 2025-7-15 21:53

马黑黑 发表于 2025-7-15 20:58
这是道理

是的，这样自然进步{:4_173:}

马黑黑 发表于 2025-7-15 22:41

红影 发表于 2025-7-15 21:53
是的，这样自然进步

说得对

红影 发表于 2025-7-16 10:37

马黑黑 发表于 2025-7-15 22:41
说得对

但做得不对，学习不够认真{:4_173:}

马黑黑 发表于 2025-7-16 17:39

红影 发表于 2025-7-16 10:37
但做得不对，学习不够认真

每个人都是时间精力有限，能学多少算多少

查看完整版本: 单个粒子绕圆圈演示