论坛 › 动画音画 › 檐下雨意

马黑黑 发表于 2022-8-7 07:04

檐下雨意

本帖最后由 马黑黑 于 2022-8-7 13:09 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/Pic/81/780.jpg') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 100%; height: 100%;opacity: .65; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: lightgray; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <span id="disc"></span>
        <span id="tit">檐下雨意 [王先宏古琴艺术]</span>
</div>

<script>

let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1467202310.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');

(function main() {
        let canv = document.getElementById('canv');
        let ctx = canv.getContext('2d');
        canv.width = canv.clientWidth;
        canv.height = canv.clientHeight;
        let dropList = [], linelist = [], mousePos = ;
        let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;

        window.onmousemove = function (e) {
                mousePos = e.clientX - offset(papa).x;
                mousePos = e.clientY - offset(papa).y;
                maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2);
        }

        function createLine(e) {
                let temp = 0.25 * (50 + Math.random() * 100);
                let line = {
                        speed: 5.5 * (Math.random() * 6 + 3),
                        die: false,
                        posx: e,
                        posy: -50,
                        h: temp,
                        corlor: '#eee'
                };
                linelist.push(line);
        }

        function createDrop(x, y) {
                let drop = {
                        die: false,
                        posx: x,
                        posy: y,
                        vx: (Math.random() - 0.5) * 8,
                        vy: Math.random() * (-6) - 3,
                        radius: Math.random() * 1.5 + 1
                };
                return drop;
        }

        function madedrops(x, y) {
                let maxi = Math.floor(Math.random() * 5 + 5);
                for (let i = 0; i < maxi; i++) {
                dropList.push(createDrop(x, y));
                }
        }

        window.requestAnimationFrame(update);

        function update() {
                if (dropList.length > 0) {
                        dropList.forEach(function (e) {
                                e.vx = e.vx + (speedx / 2);
                                e.posx = e.posx + e.vx;
                                e.vy = e.vy + gravity;
                                e.posy = e.posy + e.vy;
                                if (e.posy > canv.clientHeight) {
                                e.die = true;
                                }
                        });
                }
                for (let j = dropList.length - 1; j >= 0; j--) {
                        if (dropList.die) {
                                dropList.splice(j, 1);
                        }
                }
                speedx = speedx + (maxspeedx - speedx) / 50;
                for (let i = 0; i < lineNum; i++) {
                        createLine(Math.random() * 2 * canv.width - (0.5 * canv.width));
                }
                let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5;
                linelist.forEach(function (e) {
                        let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos));
                        if (dis < mouseDis) {
                                e.die = true;
                                madedrops(e.posx + speedx * e.h, e.posy + e.h);
                        }
                        if ((e.posy + e.h) > endLine) {
                                e.die = true;
                                madedrops(e.posx + speedx * e.h, e.posy + e.h);
                        }
                        if (e.posy >= canv.clientHeight) {
                                e.die = true;
                        } else {
                                e.posy = e.posy + e.speed;
                                e.posx = e.posx + e.speed * speedx;
                        }
                });
                for (let j = linelist.length - 1; j >= 0; j--) {
                        if (linelist.die) {
                                linelist.splice(j, 1);
                        }
                }
                render();
                window.requestAnimationFrame(update);
        }

        function render() {
                ctx.fillRect(0, 0, canv.width, canv.height);
                ctx.lineWidth = 1;
                linelist.forEach(function (line) {
                        ctx.strokeStyle = line.color;
                        ctx.beginPath();
                        ctx.moveTo(line.posx, line.posy);
                        ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
                        ctx.stroke();
                });
                ctx.lineWidth = 0.5;
                ctx.strokeStyle = "#fff";
                dropList.forEach(function (e) {
                        ctx.beginPath();
                        ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
                        ctx.stroke();
                });
        }

        function offset(ele) {
                let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
                while(pa != null) {
                        x += pa.offsetLeft;
                        y += pa.offsetTop;
                        pa = pa.offsetParent;
                }
                return {x,y};
        }
})();

</script>

马黑黑 发表于 2022-9-24 13:38

深秋红枫 发表于 2022-9-24 12:51
欣赏，学习了！
还有创作空间：鼠标图外点，雨停；鼠标图内点，下雨（不影响雨势及方向）。

如果需要，这些都可以的

马黑黑 发表于 2022-8-7 07:19

本帖最后由 马黑黑 于 2022-8-7 07:34 编辑

雨丝对鼠标指针有感应能力，以方向、加速等形式响应。设计中，鼠标指针可以接雨滴，但效果在本坛子呈现不出来，原因不明。
想体验一下接雨滴效果的请移步：

檐下雨意 (byethost11.com)

樵歌 发表于 2022-8-7 07:22

除了不能接以外，其它都实现了{:4_190:}

马黑黑 发表于 2022-8-7 07:24

实现原理简述：

帖子使用了一个和父框一样尺寸的 canvas 画布，下雨效果通过画布实现，画布设置一定的透明度，亮出帖子底图。帖子其他元素（光盘和文本）摆在画布之上。

画布必须由JS操纵，才能产生所需要的效果。过于复杂的效果估计在本论坛会受到影响。

马黑黑 发表于 2022-8-7 07:25

樵歌 发表于 2022-8-7 07:22
除了不能接以外，其它都实现了

是的，有点遗憾哈

梦油 发表于 2022-8-7 09:01

真是无与伦比的好作品，那雨丝，那水泡……赏心悦目！

马黑黑 发表于 2022-8-7 09:10

梦油 发表于 2022-8-7 09:01
真是无与伦比的好作品，那雨丝，那水泡……赏心悦目！

早上好

梦油 发表于 2022-8-7 09:33

马黑黑 发表于 2022-8-7 09:10
早上好

你好，黑黑朋友。俺看到如此精彩的作品实在是怡情悦性、心旷神怡啊！

有声有色 发表于 2022-8-7 09:47

马黑黑 发表于 2022-8-7 07:24
实现原理简述：

帖子使用了一个和父框一样尺寸的 canvas 画布，下雨效果通过画布实现，画布设置一定的透 ...

我在这里试了试能改变下雨的方向，相当不错

红影 发表于 2022-8-7 09:56

马黑黑 发表于 2022-8-7 07:19
雨丝对鼠标指针有感应能力，以方向、加速等形式响应。设计中，鼠标指针可以接雨滴，但效果在本坛子呈现不出 ...

可以鼠标跟随啊，在这里也能呈现的。我现在用的360安全浏览器，鼠标感应存在{:4_187:}

红影 发表于 2022-8-7 09:59

全代码的雨滴和涟漪，而且是可以随着鼠标变化的，黑黑真棒{:4_199:}

红影 发表于 2022-8-7 10:00

涟漪貌似和以前的那个圆圈涟漪还不一样呢，是溅起的方式，更密集了{:4_187:}

红影 发表于 2022-8-7 10:13

好漂亮的一场急雨啊{:4_199:}

红影 发表于 2022-8-7 10:14

本地测试的时候，发现鼠标上移的时候，涟漪也会跟着上去？

马黑黑 发表于 2022-8-7 10:16

红影 发表于 2022-8-7 10:13
好漂亮的一场急雨啊

嗯，太急了点，但是欧洲可能需要，可惜不下它那里

欧洲哪里现在干旱厉害，法国估计要启动紧急应对措施了。欧盟天灾人祸重重，却仍关心弯弯{:4_170:}

马黑黑 发表于 2022-8-7 10:17

梦油 发表于 2022-8-7 09:33
你好，黑黑朋友。俺看到如此精彩的作品实在是怡情悦性、心旷神怡啊！

记得拿把雨伞在身

马黑黑 发表于 2022-8-7 10:17

红影 发表于 2022-8-7 10:00
涟漪貌似和以前的那个圆圈涟漪还不一样呢，是溅起的方式，更密集了

实现机制也不同的，这个效果是画布上弄的

马黑黑 发表于 2022-8-7 10:18

红影 发表于 2022-8-7 09:59
全代码的雨滴和涟漪，而且是可以随着鼠标变化的，黑黑真棒

应对不了坛子环境，鼠标感应效果没能完全呈现出来

梦油 发表于 2022-8-7 10:18

马黑黑 发表于 2022-8-7 10:17
记得拿把雨伞在身

三伏天淋淋雨才惬意呐！{:4_189:}

马黑黑 发表于 2022-8-7 10:19

有声有色 发表于 2022-8-7 09:47
我在这里试了试能改变下雨的方向，相当不错

对，雨丝的方向是可以相应鼠标指针位置的

查看完整版本: 檐下雨意