论坛 › 动画音画 › 物换星移几度秋

马黑黑 发表于 2023-7-8 07:06

物换星移几度秋

<style>
#mama {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        z-index: 1;
        width: 1024px;
        height: 644px;
        background: #333 url('https://638183.freep.cn/638183/t23/2/004.jpg');
        box-shadow: 0 0 6px #000;
        pointer-events: none;
        --state: paused;
}
#mama::before {
        position: absolute;
        content: '\1F3F5';
        font: normal 60px/60px sans-serif;
        color: antiquewhite;
        cursor: pointer;
        left: calc(50% - 28px);
        bottom: 6px;
        animation: rot 6s infinite linear var(--state);
        pointer-events: auto;
}
li-zi {
        position: absolute;
        border-radius: 50%;
        opacity: .75;
        transition: background .6s;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mama"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27937361" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let canMove = false;

        class Lizi {
                constructor(pa,size = 20) {
                        this.pa = pa;
                        this.size = size;
                        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.setBg();
                        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;
                                        this.setBg();
                                }
                                if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) {
                                        this.ystep = -this.ystep;
                                        this.setBg();
                                }
                                this.ele.style.left = this.left + 'px';
                                this.ele.style.top = this.top + 'px';
                        }
                        requestAnimationFrame(this.moving.bind(this));
                }

                setBg() {
                        this.ele.style.background = '#' + Math.random().toString(16).substr(-6);
                }
        }

        let stepAr = ; //步幅数组

        Array.from({length: 60}).forEach((element) => {
                let xIdx = Math.floor(Math.random() * stepAr.length), yIdx = Math.floor(Math.random() * stepAr.length);
                element = new Lizi(mama);
                element.size = 8 + Math.ceil(Math.random() * 20);
                element.left = Math.floor(Math.random() * (mama.offsetWidth - element.size));
                element.top = Math.floor(Math.random() * (mama.offsetHeight - element.size));
                element.xstep = stepAr;
                element.ystep = stepAr;
                element.creating();
        });

        let mState = () => aud.paused ? (mama.style.setProperty('--state','paused'),canMove = false) : (mama.style.setProperty('--state','running'),canMove = true);
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mama.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-7-8 07:07

帖子代码
<style>
#mama {
        margin: 0 0 0 calc(50% - 593px);
        position: relative;
        z-index: 1;
        width: 1024px;
        height: 644px;
        background: #333 url('https://638183.freep.cn/638183/t23/2/004.jpg');
        box-shadow: 0 0 6px #000;
        pointer-events: none;
        --state: paused;
}
#mama::before {
        position: absolute;
        content: '\1F3F5';
        font: normal 60px/60px sans-serif;
        color: antiquewhite;
        cursor: pointer;
        left: calc(50% - 28px);
        bottom: 6px;
        animation: rot 6s infinite linear var(--state);
        pointer-events: auto;
}
li-zi {
        position: absolute;
        border-radius: 50%;
        opacity: .75;
        transition: background .6s;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mama"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=27937361" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
        let canMove = false;

        class Lizi {
                constructor(pa,size = 20) {
                        this.pa = pa;
                        this.size = size;
                        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.setBg();
                        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;
                                        this.setBg();
                                }
                                if(this.top <= 0 || this.top >= this.pa.offsetHeight - this.size) {
                                        this.ystep = -this.ystep;
                                        this.setBg();
                                }
                                this.ele.style.left = this.left + 'px';
                                this.ele.style.top = this.top + 'px';
                        }
                        requestAnimationFrame(this.moving.bind(this));
                }

                setBg() {
                        this.ele.style.background = '#' + Math.random().toString(16).substr(-6);
                }
        }

        let stepAr = ; //步幅数组

        Array.from({length: 60}).forEach((element) => {
                let xIdx = Math.floor(Math.random() * stepAr.length), yIdx = Math.floor(Math.random() * stepAr.length);
                element = new Lizi(mama);
                element.size = 8 + Math.ceil(Math.random() * 20);
                element.left = Math.floor(Math.random() * (mama.offsetWidth - element.size));
                element.top = Math.floor(Math.random() * (mama.offsetHeight - element.size));
                element.xstep = stepAr;
                element.ystep = stepAr;
                element.creating();
        });

        let mState = () => aud.paused ? (mama.style.setProperty('--state','paused'),canMove = false) : (mama.style.setProperty('--state','running'),canMove = true);
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mama.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小文 发表于 2023-7-8 08:18

早安，先生！

醉美水芙蓉 发表于 2023-7-8 09:09

红影 发表于 2023-7-8 09:26

黑黑把前面教学内容变成了实例，真好。{:4_199:}
看到实例，发现还有一些没懂的地方，我再去看看前面内容。。。。

红影 发表于 2023-7-8 09:36

前面的的确没有setBg()的内容和Array.from({length: 60}).forEach((element)，
看来前面就算看懂了单个的粒子，变成多个的时候，还是有新的内容要学习{:4_173:}

马黑黑 发表于 2023-7-8 09:38

小文 发表于 2023-7-8 08:18
早安，先生！

早

马黑黑 发表于 2023-7-8 09:38

醉美水芙蓉 发表于 2023-7-8 09:09
欣赏老师佳作！黑黑老师早上好！

早上好

马黑黑 发表于 2023-7-8 09:39

红影 发表于 2023-7-8 09:26
黑黑把前面教学内容变成了实例，真好。
看到实例，发现还有一些没懂的地方，我再去看看前面内容 ...

类是很灵活的，正如教程里讲到的，属性和方法，想改就该，想删就删，想加就加

红影 发表于 2023-7-8 09:44

这个除了刷新后小球大小有变化外，好像自身也在闪烁，是大小也有微量变化么{:4_203:}

马黑黑 发表于 2023-7-8 09:47

红影 发表于 2023-7-8 09:36
前面的的确没有setBg()的内容和Array.from({length: 60}).forEach((element)，
看来前面就算看懂了单个的 ...

setBg() 方法是设置粒子的背景颜色，因为粒子在运动中会触发变色机制，用的多，就封装成一个方法，而原来的 this.bg 属性就没有必要存在了。

Array.from({length: 60}) 是生成一个长度为 60 的数组，forEach(( ...) => { ... }); 是对每一个数组元素的设置。这是实例化类的具体操作，需要学习数组相关的东东，Aarray.from() 是优雅的做法，它可以用 for 语句替代：

for(let i = 0; i < 60; i ++) {
    let xIdx = Math.floor(Math.random() * stepAr.length), yIdx = Math.floor(Math.random() * stepAr.length);
    let element = new Lizi(mama);
    element.size = 8 + Math.ceil(Math.random() * 20);
    element.left = Math.floor(Math.random() * (mama.offsetWidth - element.size));
    element.top = Math.floor(Math.random() * (mama.offsetHeight - element.size));
    element.xstep = stepAr;
    element.ystep = stepAr;
    element.creating();
}

马黑黑 发表于 2023-7-8 09:50

红影 发表于 2023-7-8 09:44
这个除了刷新后小球大小有变化外，好像自身也在闪烁，是大小也有微量变化么

小球在运动过程中会变色，尺寸不改变

红影 发表于 2023-7-8 11:35

马黑黑 发表于 2023-7-8 09:39
类是很灵活的，正如教程里讲到的，属性和方法，想改就该，想删就删，想加就加

一个全新的方法{:4_187:}

红影 发表于 2023-7-8 11:35

马黑黑 发表于 2023-7-8 09:50
小球在运动过程中会变色，尺寸不改变

那估计是变色引起的感觉。

红影 发表于 2023-7-8 11:38

马黑黑 发表于 2023-7-8 09:47
setBg() 方法是设置粒子的背景颜色，因为粒子在运动中会触发变色机制，用的多，就封装成一个方法，而原来 ...

是的，小球由原来教学时的单个变成了数组。
Aarray.from() 是优雅的做法——这个说法真有趣{:4_173:}

马黑黑 发表于 2023-7-8 11:40

红影 发表于 2023-7-8 11:38
是的，小球由原来教学时的单个变成了数组。
Aarray.from() 是优雅的做法——这个说法真有趣

类里的小球就一个，我编写的这个 Lizi 类，它只针对一个粒子。

Array.from() 比起 for 语句的确优雅，它基于数组、类数组或可迭代的任何对象，对之进行从容操作。

马黑黑 发表于 2023-7-8 11:41

红影 发表于 2023-7-8 11:35
那估计是变色引起的感觉。

小球触碰四周边缘时才会变色。小球的尺寸，一旦生成，就不做改变。

马黑黑 发表于 2023-7-8 11:42

红影 发表于 2023-7-8 11:35
一个全新的方法

class 类，是ES6才引入的机制，因为所有的编程语言都有 class，我再使用php时就大量使用 class 创建一些东东

南无月 发表于 2023-7-8 13:01

{:4_187:}实例效果很美

马黑黑 发表于 2023-7-8 13:02

南无月 发表于 2023-7-8 13:01
实例效果很美

美不美故乡水

查看完整版本: 物换星移几度秋