用JS类封装粒子特效（四）

马黑黑

本讲，主要讨论两个问题：① 控制粒子的行进与暂停；② 改变粒子的外在形态；

一、控制粒子的运动

我们继续使用上一讲 用JS类封装粒子特效（三） 里的 Lizi 类，但要控制粒子的运行与暂停，需要给粒子的运动函数 moving() 加一个条件，这个条件在 class{} 类的外部声明，是一个全局变量，类可以使用它：

//声明粒子运动的布尔变量 ：true - 可以移动；false - 不可以移动
let canMove = true;

//创建一个 Lizi 类
class Lizi {
        //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
        constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.bg = 'purple';
                this.left = 10;
                this.top = 10;
                this.xstep = 1; //水平移动步幅
                this.ystep = 1; //垂直移动步幅
                this.ele = document.createElement('li-zi'); //粒子标签
        }
        //创建粒子
        creating() {
                this.ele.style.cssText = `
                        width: ${this.size}px;
                        height: ${this.size}px;
                        left: ${this.left}px;
                        top: ${this.top}px;
                        background: ${this.bg};
                `;
                this.pa.appendChild(this.ele);
                this.moving();
        }
        //移动粒子
        moving() {
                if(canMove) {
                        this.left += this.xstep;
                        this.top += this.ystep;
                        if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) this.xstep = -this.xstep;
                        if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) this.ystep = -this.ystep;
                        this.ele.style.left = this.left + 'px';
                        this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
        }
}

可以看到，移动粒子的函数 moving() 里，加入了一个 if 条件语句，if(canMove) {...} 中，canMove 变量是我们前面声明的全局布尔变量，if(canMove) 等于 if(canMove === true)，意为如果 canMove 为真；若 canMove 为真，则执行花括号里的代码块，即令粒子移动。if 语句在这里不管 requestAnimationFrame 定时器，这意味着只要窗口处于活动中， moving这个函数总在执行，只是当 canMove === false 时，moving() 函数除了被递归调用什么都不做，对资源的消耗并没有加大。

这样，如果 Lizi 类被实例化应用，它就是可控的，不过我们要设计一个控制机制以控制什么情况 canMove = true/false，例如单击粒子的父元素：

mydiv.onclick = () => canMove = !canMove;

上一行代码放在 class {} 体之外，它不属于类里的代码；mydiv.conclick 是 id="mydiv" 的元素被单击的事件，= () => 是箭头函数，函数体的内容本应放在 {} 之内，因为只有一行，花括号可以省略。canMove = !canMove 是布尔变量取反，当前为真时变为假，反之变为真。

通过单击宿主元素只是为了演示，可以考虑将 canMove 变量的赋值变化交给其他机制，例如与音频的播放/暂停同步。

二、改变粒子的形态

粒子可以是各色各样的，改变其形态方法和渠道也很多，这里通过加工 li-zi 的 CSS 选择器把它弄成所需的外观，并给它加一个关键帧动画。以下是 li-zi 选择器和 keyframes 关键帧动画的设计：

li-zi {
        position: absolute;
        border-radius: 50%;
        clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 95% 50%, 27.5% 88.97%, 27.5% 11.03%, 95% 50%, 100% 50%, 100% 0%);
        animation: rot 6s infinite linear;
}
@keyframes rot { to { transform: rotate(360deg); } }

以上，使用 clip-path 属性对 li-zi 元素内切一个三角形。方法不止用 clip-path，最简单的，或许是加个背景图片。效果和代码请看下楼。

马黑黑

马黑黑

二楼代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 740px;
   
5.         height: 400px;
   
6.         border: 1px solid purple;
   
7.         background: linear-gradient(to right top,antiquewhite,purple);
   
8.         position: relative;
   
9. }
   
10. li-zi {
    
11.         position: absolute;
    
12.         border-radius: 50%;
    
13.         clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 95% 50%, 27.5% 88.97%, 27.5% 11.03%, 95% 50%, 100% 50%, 100% 0%);
    
14.         animation: rot 6s infinite linear;
    
15. }
    
16. @keyframes rot { to { transform: rotate(360deg); } }
    
17. </style>
    
18. 
    
19. <div id="mydiv"></div>
    
20. 
    
21. <script>
    
22. 
    
23. //声明粒子运动的布尔变量 ：true - 可以移动；false - 不可以移动
    
24. let canMove = true;
    
25. 
    
26. //创建一个 Lizi 类
    
27. class Lizi {
    
28.         //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
    
29.         constructor(pa,size = 20) {
    
30.                 this.pa = pa;
    
31.                 this.size = size;
    
32.                 this.bg = 'purple';
    
33.                 this.left = 10;
    
34.                 this.top = 10;
    
35.                 this.xstep = 1; //水平移动步幅
    
36.                 this.ystep = 1; //垂直移动步幅
    
37.                 this.ele = document.createElement('li-zi'); //粒子标签
    
38.         }
    
39.         //创建粒子
    
40.         creating() {
    
41.                 this.ele.style.cssText = `
    
42.                         width: ${this.size}px;
    
43.                         height: ${this.size}px;
    
44.                         left: ${this.left}px;
    
45.                         top: ${this.top}px;
    
46.                         background: ${this.bg};
    
47.                 `;
    
48.                 this.pa.appendChild(this.ele);
    
49.                 this.moving();
    
50.         }
    
51.         //移动粒子
    
52.         moving() {
    
53.                 if(canMove) {
    
54.                         this.left += this.xstep;
    
55.                         this.top += this.ystep;
    
56.                         if(this.left <= 0 || this.left >= this.pa.offsetWidth - this.size) this.xstep = -this.xstep;
    
57.                         if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) this.ystep = -this.ystep;
    
58.                         this.ele.style.left = this.left + 'px';
    
59.                         this.ele.style.top = this.top + 'px';
    
60.                 }
    
61.                 requestAnimationFrame(this.moving.bind(this));
    
62.         }
    
63. }
    
64. 
    
65. let stepAr = [0.5,-0.5,1,-1,0.8,-0.8,1.2,-1.2]; //步幅数组
    
66. //实例化 Lizi
    
67. Array.from({length: 30}).forEach((element) => {
    
68.         let xIdx = Math.floor(Math.random() * stepAr.length),
    
69.                 yIdx = Math.floor(Math.random() * stepAr.length);
    
70.         element = new Lizi(mydiv);
    
71.         element.size = 10 + Math.ceil(Math.random() * 20);
    
72.         element.left = Math.floor(Math.random() * (mydiv.offsetWidth - element.size));
    
73.         element.top = Math.floor(Math.random() * (mydiv.offsetHeight - element.size));
    
74.         element.xstep = stepAr[xIdx];
    
75.         element.ystep = stepAr[yIdx];
    
76.         element.bg = '#' + Math.random().toString(16).substr(-6);
    
77.         element.creating();
    
78. });
    
79. 
    
80. mydiv.onclick = () => canMove = !canMove; // 宿主元素单击事件 ：粒子运动/暂停
    
81. 
    
82. </script>

复制代码

南无月

老师讲的知识点（一）已在时空贴里使用。。
（二）更好了，粒子形态可以千变万化了。。。

马黑黑

南无月 发表于 2023-7-9 09:07
老师讲的知识点（一）已在时空贴里使用。。
（二）更好了，粒子形态可以千变万化了。。。

焱鑫磊

漂亮！老师厉害！

马黑黑

焱鑫磊 发表于 2023-7-9 09:22
漂亮！老师厉害！

南无月

马黑黑 发表于 2023-7-9 09:08

抄物转星移的时候顺手抄的

马黑黑

南无月 发表于 2023-7-9 10:56
抄物转星移的时候顺手抄的

南无月

马黑黑 发表于 2023-7-9 10:57

嘚瑟一下

马黑黑

南无月 发表于 2023-7-9 11:02
嘚瑟一下

应该的

红影

这个类真好，还有这个控制移动的代码呢。学习了

马黑黑

红影 发表于 2023-7-9 12:58
这个类真好，还有这个控制移动的代码呢。学习了

前面做的帖子用到过的吧

红影

马黑黑 发表于 2023-7-9 12:59
前面做的帖子用到过的吧

是的，黑黑单独就这个讲解一下，更清楚了

马黑黑

红影 发表于 2023-7-9 15:14
是的，黑黑单独就这个讲解一下，更清楚了

保姆级讲义，多啰嗦一下下

红影

马黑黑 发表于 2023-7-9 17:24
保姆级讲义，多啰嗦一下下

非常细致透彻

马黑黑

红影 发表于 2023-7-9 23:35
非常细致透彻

还行

红影

马黑黑 发表于 2023-7-9 23:42
还行

这个效果也好看。

马黑黑

红影 发表于 2023-7-10 16:56
这个效果也好看。

不太差