论坛 › 动画音画 › 周思贤 - 风云之歌

马黑黑 发表于 2023-12-24 11:42

周思贤 - 风云之歌

<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://638183.freep.cn/638183/t23/webp2/fgyy_133478620283196250.webp') no-repeat center/cover;
        display: grid;
        place-items: center;
        position: relative;
        pointer-events: none;
        --state: paused;
}
#papa::before, #papa::after {
        position: absolute;
        content: url('https://638183.freep.cn/638183/t23/btn/btnfy1.webp');
        top: 10px;
        mix-blend-mode: luminosity;
        animation: rotating 10s infinite linear var(--state);
        cursor: pointer;
        pointer-events: auto;
}
#papa::before {
        left: 10px;
}
#papa::after {
        right: 10px;
        mix-blend-mode: lighten;
}
li-zi {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        opacity: .8;
}
#btnplay {
        position: absolute;
        top: 10px;
        mix-blend-mode: exclusion;
        animation: rotating 5s infinite linear var(--state);
        cursor: pointer;
        pointer-events: auto;
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=201883" autoplay loop></audio>
        <imgid="btnplay" src="https://638183.freep.cn/638183/t23/btn/btnfy1.webp" alt="" title="播放/暂停"/>
</div>

<script>

(function() {

let total = 60, lzAr = [], aniTimer = null;
Array.from({length: total}).forEach((item,key) => {
        let lz = document.createElement('li-zi');
        let xx = Math.random() * (papa.offsetWidth - 20),
                yy = Math.random() * (papa.offsetHeight - 20),
                stepX = 1 - Math.random() * 2,
                stepY = 1 - Math.random() * 2;
        lz.style.cssText += `
                left: ${xx}px;
                top: ${yy}px;
                background: #${Math.random().toString(16).substr(-6)};
        `;
        papa.insertBefore(lz,btnplay);
        lzAr.push();
});

let render = () => {
        lzAr.forEach((lz,key) => {
                lzAr += lzAr;
                if(lzAr < 0 || lzAr > papa.offsetWidth - 20) lzAr = -lzAr;
                lzAr += lzAr;
                if(lzAr < 0 || lzAr > papa.offsetHeight - 20) lzAr = -lzAr;
                lzAr.style.left = lzAr + 'px';
                lzAr.style.top = lzAr + 'px';
        });
        aniTimer = aud.paused ? cancelAnimationFrame(aniTimer) : requestAnimationFrame(render);
};

let mState = () => {
        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        render();
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

papa.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

马黑黑 发表于 2023-12-24 11:43

本帖主要尝试：① mix-blend-mode ；② requestAnimationFrame 驱动的实体HTML粒子。代码：

<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        box-shadow: 4px 8px 28px gray;
        background: url('https://638183.freep.cn/638183/t23/webp2/fgyy_133478620283196250.webp') no-repeat center/cover;
        display: grid;
        place-items: center;
        position: relative;
        pointer-events: none;
        --state: paused;
}
#papa::before, #papa::after {
        position: absolute;
        content: url('https://638183.freep.cn/638183/t23/btn/btnfy1.webp');
        top: 10px;
        mix-blend-mode: luminosity;
        animation: rotating 10s infinite linear var(--state);
        cursor: pointer;
        pointer-events: auto;
}
#papa::before {
        left: 10px;
}
#papa::after {
        right: 10px;
        mix-blend-mode: lighten;
}
li-zi {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        opacity: .8;
}
#btnplay {
        position: absolute;
        top: 10px;
        mix-blend-mode: exclusion;
        animation: rotating 5s infinite linear var(--state);
        cursor: pointer;
        pointer-events: auto;
}
@keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=201883" autoplay loop></audio>
        <imgid="btnplay" src="https://638183.freep.cn/638183/t23/btn/btnfy1.webp" alt="" title="播放/暂停"/>
</div>

<script>

let total = 60, lzAr = [], aniTimer = null;
Array.from({length: total}).forEach((item,key) => {
        let lz = document.createElement('li-zi');
        let xx = Math.random() * (papa.offsetWidth - 20),
                yy = Math.random() * (papa.offsetHeight - 20),
                stepX = 1 - Math.random() * 2,
                stepY = 1 - Math.random() * 2;
        lz.style.cssText += `
                left: ${xx}px;
                top: ${yy}px;
                background: #${Math.random().toString(16).substr(-6)};
        `;
        papa.insertBefore(lz,btnplay);
        lzAr.push();
});

let render = () => {
        lzAr.forEach((lz,key) => {
                lzAr += lzAr;
                if(lzAr < 0 || lzAr > papa.offsetWidth - 20) lzAr = -lzAr;
                lzAr += lzAr;
                if(lzAr < 0 || lzAr > papa.offsetHeight - 20) lzAr = -lzAr;
                lzAr.style.left = lzAr + 'px';
                lzAr.style.top = lzAr + 'px';
        });
        aniTimer = aud.paused ? cancelAnimationFrame(aniTimer) : requestAnimationFrame(render);
};

let mState = () => {
        papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        render();
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

papa.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

醉美水芙蓉 发表于 2023-12-24 11:55

小辣椒 发表于 2023-12-24 13:17

黑黑今天又比昨天的高级了，出来三朵花了，粒子坐标点好像不懂怎么计算，估计这个帖得完全领会后才可以做作业

小辣椒 发表于 2023-12-24 13:18

纯套用感觉也是没有意思{:4_189:}

红影 发表于 2023-12-24 14:07

这个粒子是自由的，真好{:4_199:}

红影 发表于 2023-12-24 14:21

刚才做个帖子，粒子无法受控，看到这个帖子，貌似可以学做这个了，这个黑黑提出了requestAnimationFrame 控制，应该问题不大了。

红影 发表于 2023-12-24 14:24

一会我把刚才做的发出来，黑黑帮忙看看是哪出问题了{:4_173:}

马黑黑 发表于 2023-12-24 15:31

红影 发表于 2023-12-24 14:24
一会我把刚才做的发出来，黑黑帮忙看看是哪出问题了

好哒

红影 发表于 2023-12-24 15:41

马黑黑 发表于 2023-12-24 15:31
好哒

已经发出来了{:4_173:}

梦油 发表于 2023-12-24 15:42

好漂亮！
行家看门道，力巴看热闹。{:4_189:}

马黑黑 发表于 2023-12-24 15:43

梦油 发表于 2023-12-24 15:42
好漂亮！
行家看门道，力巴看热闹。

{:4_190:}

马黑黑 发表于 2023-12-24 15:43

醉美水芙蓉 发表于 2023-12-24 11:55
中间一朵花怎么变色不一样！黑黑老师中午好！

这是融合滤镜不同导致

马黑黑 发表于 2023-12-24 15:44

红影 发表于 2023-12-24 15:41
已经发出来了

冰雪风暴我回复了

马黑黑 发表于 2023-12-24 15:46

红影 发表于 2023-12-24 14:21
刚才做个帖子，粒子无法受控，看到这个帖子，貌似可以学做这个了，这个黑黑提出了requestAnimationFrame 控 ...

理论上都是可以控制的。不过如果帖子里使用了插件，我这个能不能控制也不好说，requestAnimationFrame很容易与其他东东冲突。

马黑黑 发表于 2023-12-24 15:47

小辣椒 发表于 2023-12-24 13:17
黑黑今天又比昨天的高级了，出来三朵花了，粒子坐标点好像不懂怎么计算，估计这个帖得完全领会后才可以做作 ...

花花不因为多而高级{:4_170:}

马黑黑 发表于 2023-12-24 15:49

小辣椒 发表于 2023-12-24 13:17
黑黑今天又比昨天的高级了，出来三朵花了，粒子坐标点好像不懂怎么计算，估计这个帖得完全领会后才可以做作 ...

这个，计算方面：首先定位粒子，随机定位；其次，运动边界计算，left、top 小于0或大于父元素宽高减去粒子宽高，则让步进变量正负相反。数据存在数组里。

马黑黑 发表于 2023-12-24 15:50

红影 发表于 2023-12-24 14:07
这个粒子是自由的，真好

不突破边界时是自由的

红影 发表于 2023-12-24 15:51

马黑黑 发表于 2023-12-24 15:44
冰雪风暴我回复了

还好给黑黑看出问题，现在雪花终于可以转动了{:4_187:}

马黑黑 发表于 2023-12-24 15:51

小辣椒 发表于 2023-12-24 13:18
纯套用感觉也是没有意思
JS原理明白就好，可以复用，要做的是修改 rx、ry 的赋值，减去的数值依据是粒子的宽高尺寸，是一半。

查看完整版本: 周思贤 - 风云之歌