论坛 › 马黑黑教程专版 › 多个例子绕圈圈演示

马黑黑 发表于 2025-7-14 20:16

多个例子绕圈圈演示

<style>
        /* 多个粒子绕圆圈演示 */
    #wrap {
      --size: 500px; /* 容器元素尺寸 */
      margin: 100px auto;
      width: var(--size);
      height: var(--size);
      border: 4px dotted gray;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
    }
    #wrap::before {
      position: absolute;
      content: '点击开始/暂停';
      cursor: pointer;
    }
    li-zi {
      position: absolute;
      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"></section>

<script>
        // 声明粒子数、粒子数组、粒子尺寸、请求关键帧id、粒子运行开关
        var total = 12, lzAr = [], lzSize = 60, rtime, isRun = false;

    // 创建粒子并初始化CSS数据
    Array.from({length: total}).forEach( (lz, idx) => {
            var angle = 360 / total * idx; // 角度
            var r = (wrap.clientWidth + lzSize) / 2 - lzSize / 2; // 绕圈半径
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            width: ${lzSize}px;
            height: ${lzSize}px;
            --deg: ${angle}deg;
            --r: ${r}px;
      `;
      lzAr.push({ elm: lz, a: angle });
      wrap.appendChild(lz);
    });

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

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

马黑黑 发表于 2025-7-14 20:16

代码：

<style>
        /* 多个粒子绕圆圈演示 */
    #wrap {
      --size: 500px; /* 容器元素尺寸 */
      margin: 100px auto;
      width: var(--size);
      height: var(--size);
      border: 4px dotted gray;
      border-radius: 50%;
      display: grid;
      place-items: center;
      position: relative;
    }
    #wrap::before {
      position: absolute;
      content: '点击开始/暂停';
      cursor: pointer;
    }
    li-zi {
      position: absolute;
      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"></section>

<script>
        // 声明粒子数、粒子数组、粒子尺寸、请求关键帧id、粒子运行开关
        var total = 12, lzAr = [], lzSize = 60, rtime, isRun = false;

    // 创建粒子并初始化CSS数据
    Array.from({length: total}).forEach( (lz, idx) => {
            var angle = 360 / total * idx; // 角度
            var r = (wrap.clientWidth + lzSize) / 2 - lzSize / 2; // 绕圈半径
      lz = document.createElement('li-zi');
      lz.style.cssText += `
            width: ${lzSize}px;
            height: ${lzSize}px;
            --deg: ${angle}deg;
            --r: ${r}px;
      `;
      lzAr.push({ elm: lz, a: angle });
      wrap.appendChild(lz);
    });

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

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

马黑黑 发表于 2025-7-14 20:19

如果仅仅是绕圈圈，则，由父元素带动子元素旋转是最简洁、最节能的方法，但是，总得找到驱动粒子群运动的其它方法，例如本例粒子个体各自运动的实现方式——很多场合需要个体行为，整体行为替代不了。

红影 发表于 2025-7-14 21:59

跟着链接，先跑到这个帖子里来了{:4_173:}

红影 发表于 2025-7-14 22:00

那个帖子，粒子不但各自运动，而且组合在一起的样子很好看{:4_187:}

马黑黑 发表于 2025-7-14 22:07

红影 发表于 2025-7-14 22:00
那个帖子，粒子不但各自运动，而且组合在一起的样子很好看

嗯，和这里的有所不同但总体原理不变

马黑黑 发表于 2025-7-14 22:07

红影 发表于 2025-7-14 21:59
跟着链接，先跑到这个帖子里来了

跑跑更健康

杨帆 发表于 2025-7-14 23:17

漂亮！谢谢马老师经典讲授与探索{:4_190:}

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

马黑黑 发表于 2025-7-14 22:07
嗯，和这里的有所不同但总体原理不变

实现运动的方式是一样的{:4_187:}

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

马黑黑 发表于 2025-7-14 22:07
跑跑更健康

也不算跑，一步就跨过来了{:4_173:}

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

红影 发表于 2025-7-15 12:52
也不算跑，一步就跨过来了

那比企鹅厉害

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

红影 发表于 2025-7-15 12:52
实现运动的方式是一样的

对的

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

马黑黑 发表于 2025-7-15 18:04
那比企鹅厉害

哪里，有链接啊，点一下不就是一步跨了么{:4_173:}

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

马黑黑 发表于 2025-7-15 18:04
对的

谢谢黑黑的讲解{:4_187:}

马黑黑 发表于 2025-7-15 21:00

红影 发表于 2025-7-15 20:21
谢谢黑黑的讲解

阔气了

马黑黑 发表于 2025-7-15 21:00

红影 发表于 2025-7-15 20:18
哪里，有链接啊，点一下不就是一步跨了么

这么简单吗

亚伦影音工作室 发表于 2025-7-15 21:42

跟着做了一个但默认想自动旋转，可是我才疏学浅，还请老师出山！

红影 发表于 2025-7-15 22:10

马黑黑 发表于 2025-7-15 21:00
阔气了

应该的{:4_187:}

红影 发表于 2025-7-15 22:10

马黑黑 发表于 2025-7-15 21:00
这么简单吗

非常简单，如此简单{:4_173:}

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

红影 发表于 2025-7-15 22:10
非常简单，如此简单

简单好

查看完整版本: 多个例子绕圈圈演示