论坛 › 音乐沙龙 › 《竹蜻蜓的梦》（学习黑黑《Siren》效果）

红影 发表于 2024-4-28 11:49

《竹蜻蜓的梦》（学习黑黑《Siren》效果）

<style>
        #papa { margin: 60px 0 0 calc(50% - 681px); width: 1200px; height: 676px; overflow: hidden; z-index: 1; position: relative; }
        #g1 { position: absolute; left: 138px; bottom: 0px; width: 267px; height: 498px; }
      #g2 { position: absolute; left: 320px; top: 128px; width: 97px; height: 83px; }
      #g3 { position: absolute; left: 450px; top: 60px; width: 62px; height: 52px; }
      #g4 { position: absolute; left: 650px; top: 100px; width: 121px; height: 104px; }
      #g5 { position: absolute; left: 950px; top: 120px; width: 73px; height: 62px; }
        .vid { position: absolute; object-fit: cover; width: 100%; height: 110%; top: -10%; }
        #canv { position: absolute; left: 292px; top: 170px; cursor: pointer; }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051671137" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/29/5d1c7c3e61c83_10s_big.mp4" loop muted></video>
        <img id="g2" src="https://pic.imgdb.cn/item/662d25ec0ea9cb1403912235.png" alt="" />
        <img id="g1" src="https://pic.imgdb.cn/item/662d25c80ea9cb140390ddf4.png" alt="" />
        <img id="g3" src="https://pic.imgdb.cn/item/662d25ec0ea9cb1403912235.png" alt="" />
        <img id="g4" src="https://pic.imgdb.cn/item/662d25ec0ea9cb1403912235.png" alt="" />
        <img id="g5" src="https://pic.imgdb.cn/item/662d25ec0ea9cb1403912235.png" alt="" />
        <canvas id="canv" width="180" height="120"></canvas>
</div>

<script>
(function() {
        let ctx = canv.getContext('2d');
        let ww = canv.width, hh = canv.height;
        let ctrY = hh / 2, step = 0.25, total = 20, raf = null;
        let mkRgba = (opacity=0.5) => {
                let ar = .map((item) => Math.floor(Math.random() * item));
                ar.push( opacity || (.5 + Math.random() * .5).toFixed(1));
                return 'rgba(' + ar.join(',') + ')';
        }
        class curveLine {
          constructor(x1, y1, cpx, cpy, x2, y2) {
                this.x1 = x1;
                this.y1 = y1;
                this.cpx = cpx;
                this.cpy = cpy;
                this.x2 = x2;
                this.y2 = y2;
                this.color = 'green';
                this.lineWidth = 2;
          };
          draw(ctx) {
                ctx.save();
                ctx.strokeStyle = this.color;
                ctx.lineCap = 'round';
                ctx.lineWidth = this.lineWidth;
                ctx.beginPath();
                ctx.moveTo(this.x1, this.y1);
                ctx.quadraticCurveTo(this.cpx, this.cpy, this.x2, this.y2);
                ctx.stroke();
                ctx.closePath();
                ctx.restore();
          };
        };
        let draw = () => {
          ctx.clearRect(0, 0, ww, hh);
          let add = ww - 20;
          for(let i = 0; i < total; i ++) {
                let cl = new curveLine();
                cl.x1 = ww / 2;
                cl.y1 = hh - 5;
                cl.cpx = (ww + add) / total * i - add / 2 + 5;
                cl.cpy = ctrY;
                cl.x2 = ww / 2;
                cl.y2 = 5;
                cl.color = mkRgba(0.7);
                cl.lineWidth = 2;
                cl.draw(ctx);   
          }
        };
        let render = () => {
          ctrY += step;
          if(ctrY > hh || ctrY < 0) step = -step;
          draw();
          raf = requestAnimationFrame(render);
        };
       
        canv.onclick = g1.onclick = () => {
                cancelAnimationFrame(raf);
                aud.paused ?
                        (aud.play(), requestAnimationFrame(render)) :
                        (aud.pause(), cancelAnimationFrame(raf));
        };
        render();
        var vids = document.querySelectorAll('.vid');
        var mState = () => vids.forEach(vid => aud.paused ?
                (vid.pause(), mydiv.style.setProperty('--state', 'paused')) :
                (vid.play(),mydiv.style.setProperty('--state', 'running')));
        aud.onplaying = aud.onpause = () => mState();
})();
</script>

红影 发表于 2024-4-28 11:51

记得当时把这个效果叫做大蒜头，其实做到帖子里还是很好看的。
直接用视频做背景图了，做完才发现这个视频不是很清晰。就这样吧{:4_173:}

红影 发表于 2024-4-28 11:53

谢谢@马黑黑 漂亮的代码，这个灯笼效果真的让竹蜻蜓有转动的感觉了，小朋友们肯定也都很感谢你{:4_187:}

小辣椒 发表于 2024-4-28 12:32

哇塞，亲爱的很有童趣的帖子，好美哦{:4_178:}

小辣椒 发表于 2024-4-28 12:34

效果真好，小朋友手上转的好欢哦，整个帖活起来了，{:4_199:}

小辣椒 发表于 2024-4-28 12:34

欣赏亲爱的精彩制作~~

马黑黑 发表于 2024-4-28 12:45

这个梦天真无邪美丽感人

梦油 发表于 2024-4-28 16:53

小女孩玩的小风车真好玩，

幸运草 发表于 2024-4-28 17:30

幸运草装个介样滴螺旋机系不系也能飞起来{:6_242:}

红影 发表于 2024-4-28 20:35

小辣椒 发表于 2024-4-28 12:32
哇塞，亲爱的很有童趣的帖子，好美哦

这个效果没完成作业，所以赶紧弄个学习一下{:4_173:}

红影 发表于 2024-4-28 20:36

小辣椒 发表于 2024-4-28 12:34
效果真好，小朋友手上转的好欢哦，整个帖活起来了，

这个代码特别好玩，也特别漂亮呢。黑黑带来的都是好东西{:4_187:}

红影 发表于 2024-4-28 20:37

小辣椒 发表于 2024-4-28 12:34
欣赏亲爱的精彩制作~~

谢谢亲爱的鼓励{:4_179:}

南无月 发表于 2024-4-28 20:38

色彩清新，好一派春天的气息。。
视频背景选得好美。。
小女孩子和竹蜻蜓的位置放得太妙了。。
小播效果被影子发挥到了极致。。{:4_187:}

南无月 发表于 2024-4-28 20:38

影子出手便是不凡，
构思巧妙，代码实现熟练，
怎么看都美的好贴。。{:4_187:}

红影 发表于 2024-4-28 21:54

马黑黑 发表于 2024-4-28 12:45
这个梦天真无邪美丽感人

就是一个简单的制作，主要学习一下代码{:4_187:}

红影 发表于 2024-4-28 21:55

梦油 发表于 2024-4-28 16:53
小女孩玩的小风车真好玩，

是啊，非常可爱，也是盛世美好的体现呢{:4_187:}

红影 发表于 2024-4-28 21:55

幸运草 发表于 2024-4-28 17:30
幸运草装个介样滴螺旋机系不系也能飞起来

肯定能飞，你赶紧在草柄上装一个{:4_189:}

红影 发表于 2024-4-28 22:29

南无月 发表于 2024-4-28 20:38
色彩清新，好一派春天的气息。。
视频背景选得好美。。
小女孩子和竹蜻蜓的位置放得太妙了。。


呵呵，竹蜻蜓就是个小孩子玩的东西，我记得我家以前也买过，手一搓可以飞好远呢。这个效果让我想到竹蜻蜓，所以就去找相关的素材了{:4_173:}

红影 发表于 2024-4-28 22:30

南无月 发表于 2024-4-28 20:38
影子出手便是不凡，
构思巧妙，代码实现熟练，
怎么看都美的好贴。。

哪里，这个就是套用，不过改小了点小播，别的也没做什么{:4_173:}

马黑黑 发表于 2024-4-28 22:39

红影 发表于 2024-4-28 22:30
哪里，这个就是套用，不过改小了点小播，别的也没做什么

这么说吧，模仿别人的代码也是分层次的，换个图片就能成帖的是较低级别的做法，有设计在里面的，就是比较高级的做法。

查看完整版本: 《竹蜻蜓的梦》（学习黑黑《Siren》效果）