Siren - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 动画音画 › Siren

马黑黑 发表于 2024-4-14 20:45

Siren

<style>
#papa { margin: 0 0 0 calc(50% - 604px); width: 1046px; height: 588px; background: url('https://638183.freep.cn/638183/t24/webp/mic.webp') no-repeat center/cover; overflow: hidden; z-index: 1; position: relative; }
#g1 { position: absolute; left: calc(50% - 150px); bottom: 0; width: 300px; border-radius: 25% 100%; opacity : 0; transition: 3s; }
#papa:hover #g1 { opacity: 0.9; }
#g1:hover { width: 400px; }
#canv { position: absolute; left: calc(50% - 150px); cursor: pointer; }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1927522898" autoplay loop></audio>
<img id="g1" src="https://638183.freep.cn/638183/t24/webp/mic1.webp" alt="" />
<canvas id="canv" width="300" height="200"></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 = 4;
   };
   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 = 4;
         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();
})();
</script>

马黑黑 发表于 2024-4-14 20:46

<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>

<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">    #papa { <span class="tBlue">margin:</span> 0 0 0 calc(50% - 604px); <span class="tBlue">width:</span> 1046px; <span class="tBlue">height:</span> 588px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/mic.webp'</span>) no-repeat center/cover; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3">    #g1 { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> calc(50% - 150px); <span class="tBlue">bottom:</span> 0; <span class="tBlue">width:</span> 300px; <span class="tBlue">border-radius:</span> 25% 100%; opacity : 0; <span class="tBlue">transition:</span> 3s; }</cl-cd>
<cl-cd data-idx="4">    #<span class="tBlue">papa:</span>hover #g1 { <span class="tBlue">opacity:</span> 0.9; }</cl-cd>
<cl-cd data-idx="5">    #g1:hover { <span class="tBlue">width:</span> 400px; }</cl-cd>
<cl-cd data-idx="6">    #canv { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> calc(50% - 150px); <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10">    <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1927522898"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11">    <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"g1"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t24/webp/mic1.webp"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="12">    <<span class="tDarkRed">canvas</span> <span class="tRed">id</span>=<span class="tMagenta">"canv"</span> width=<span class="tMagenta">"300"</span> height=<span class="tMagenta">"200"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16">(<span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="17">    <span class="tBlue">let</span> ctx = canv.getContext(<span class="tMagenta">'2d'</span>);</cl-cd>
<cl-cd data-idx="18">    <span class="tBlue">let</span> ww = canv.width, hh = canv.height;</cl-cd>
<cl-cd data-idx="19">    <span class="tBlue">let</span> ctrY = hh / 2, step = 0.25, total = 20, raf = null;</cl-cd>
<cl-cd data-idx="20">    <span class="tBlue">let</span> mkRgba = (opacity=0.5) => {</cl-cd>
<cl-cd data-idx="21">          <span class="tBlue">let</span> ar = .map((item) => <span class="tRed">Math</span>.floor(<span class="tRed">Math</span>.random() * item));</cl-cd>
<cl-cd data-idx="22">          ar.push( opacity || (.5 + <span class="tRed">Math</span>.random() * .5).toFixed(1));</cl-cd>
<cl-cd data-idx="23">          <span class="tBlue">return</span> <span class="tMagenta">'rgba('</span> + ar.join(<span class="tMagenta">','</span>) + <span class="tMagenta">')'</span>;</cl-cd>
<cl-cd data-idx="24">    }</cl-cd>
<cl-cd data-idx="25">    <span class="tBlue">class </span>curveLine {</cl-cd>
<cl-cd data-idx="26">    constructor(x1, y1, cpx, cpy, x2, y2) {</cl-cd>
<cl-cd data-idx="27">          <span class="tBlue">this</span>.x1 = x1;</cl-cd>
<cl-cd data-idx="28">          <span class="tBlue">this</span>.y1 = y1;</cl-cd>
<cl-cd data-idx="29">          <span class="tBlue">this</span>.cpx = cpx;</cl-cd>
<cl-cd data-idx="30">          <span class="tBlue">this</span>.cpy = cpy;</cl-cd>
<cl-cd data-idx="31">          <span class="tBlue">this</span>.x2 = x2;</cl-cd>
<cl-cd data-idx="32">          <span class="tBlue">this</span>.y2 = y2;</cl-cd>
<cl-cd data-idx="33">          <span class="tBlue">this</span>.color = <span class="tMagenta">'green'</span>;</cl-cd>
<cl-cd data-idx="34">          <span class="tBlue">this</span>.lineWidth = 4;</cl-cd>
<cl-cd data-idx="35">    };</cl-cd>
<cl-cd data-idx="36">    draw(ctx) {</cl-cd>
<cl-cd data-idx="37">          ctx.save();</cl-cd>
<cl-cd data-idx="38">          ctx.strokeStyle = <span class="tBlue">this</span>.color;</cl-cd>
<cl-cd data-idx="39">          ctx.lineCap = <span class="tMagenta">'round'</span>;</cl-cd>
<cl-cd data-idx="40">          ctx.lineWidth = <span class="tBlue">this</span>.lineWidth;</cl-cd>
<cl-cd data-idx="41">          ctx.beginPath();</cl-cd>
<cl-cd data-idx="42">          ctx.moveTo(<span class="tBlue">this</span>.x1, <span class="tBlue">this</span>.y1);</cl-cd>
<cl-cd data-idx="43">          ctx.quadraticCurveTo(<span class="tBlue">this</span>.cpx, <span class="tBlue">this</span>.cpy, <span class="tBlue">this</span>.x2, <span class="tBlue">this</span>.y2);</cl-cd>
<cl-cd data-idx="44">          ctx.stroke();</cl-cd>
<cl-cd data-idx="45">          ctx.closePath();</cl-cd>
<cl-cd data-idx="46">          ctx.restore();</cl-cd>
<cl-cd data-idx="47">    };</cl-cd>
<cl-cd data-idx="48">    };</cl-cd>
<cl-cd data-idx="49">    <span class="tBlue">let</span> draw = () => {</cl-cd>
<cl-cd data-idx="50">    ctx.clearRect(0, 0, ww, hh);</cl-cd>
<cl-cd data-idx="51">    <span class="tBlue">let</span> add = ww - 20;</cl-cd>
<cl-cd data-idx="52">    <span class="tBlue">for</span>(<span class="tBlue">let</span> i = 0; i < total; i ++) {</cl-cd>
<cl-cd data-idx="53">          <span class="tBlue">let</span> cl = <span class="tBlue">new</span> curveLine();</cl-cd>
<cl-cd data-idx="54">          cl.x1 = ww / 2;</cl-cd>
<cl-cd data-idx="55">          cl.y1 = hh - 5;</cl-cd>
<cl-cd data-idx="56">          cl.cpx = (ww + add) / total * i - add / 2 + 5;</cl-cd>
<cl-cd data-idx="57">          cl.cpy = ctrY;</cl-cd>
<cl-cd data-idx="58">          cl.x2 = ww / 2;</cl-cd>
<cl-cd data-idx="59">          cl.y2 = 5;</cl-cd>
<cl-cd data-idx="60">          cl.color = mkRgba(0.7);</cl-cd>
<cl-cd data-idx="61">          cl.lineWidth = 4;</cl-cd>
<cl-cd data-idx="62">          cl.draw(ctx); </cl-cd>
<cl-cd data-idx="63">    }</cl-cd>
<cl-cd data-idx="64">    };</cl-cd>
<cl-cd data-idx="65">    <span class="tBlue">let</span> render = () => {</cl-cd>
<cl-cd data-idx="66">    ctrY += step;</cl-cd>
<cl-cd data-idx="67">    <span class="tBlue">if</span>(ctrY > hh || ctrY < 0) step = -step;</cl-cd>
<cl-cd data-idx="68">    draw();</cl-cd>
<cl-cd data-idx="69">    raf = requestAnimationFrame(render);</cl-cd>
<cl-cd data-idx="70">    };</cl-cd>
<cl-cd data-idx="71">   </cl-cd>
<cl-cd data-idx="72">    canv.onclick = g1.onclick = () => {</cl-cd>
<cl-cd data-idx="73">        cancelAnimationFrame(raf);</cl-cd>
<cl-cd data-idx="74">        aud.paused ?</cl-cd>
<cl-cd data-idx="75">            (aud.play(), requestAnimationFrame(render)) :</cl-cd>
<cl-cd data-idx="76">            (aud.pause(), cancelAnimationFrame(raf));</cl-cd>
<cl-cd data-idx="77">    };</cl-cd>
<cl-cd data-idx="78">    render();</cl-cd>
<cl-cd data-idx="79">})();</cl-cd>
<cl-cd data-idx="80"><<span class="tDarkRed">/script</span>></cl-cd>
</div>

马黑黑 发表于 2024-4-14 20:48

JS代码中，播放控制器中canvas画布部分的解释，如果感兴趣，请参与：

https://www.huachaowang.com/forum.php?mod=viewthread&tid=75441

执著发表于 2024-4-14 20:52

漂亮！{:4_204:}老师这个是不是响应式频谱？好像是随音乐的节奏改变频率的。

小九发表于 2024-4-14 21:15

有科幻大片的感觉{:4_199:}

绿叶清舟 发表于 2024-4-14 21:29

这是想把姑娘吸哪去了

小九发表于 2024-4-14 21:31

绿叶清舟发表于 2024-4-14 21:29
这是想把姑娘吸哪去了

太空{:4_189:}

绿叶清舟 发表于 2024-4-14 21:35

小九发表于 2024-4-14 21:31
太空

感觉卡住了{:4_189:}

马黑黑 发表于 2024-4-14 21:55

绿叶清舟发表于 2024-4-14 21:29
这是想把姑娘吸哪去了

投入战场

马黑黑 发表于 2024-4-14 21:55

执著发表于 2024-4-14 20:52
漂亮！老师这个是不是响应式频谱？好像是随音乐的节奏改变频率的。

这个不是的

马黑黑 发表于 2024-4-14 21:55

小九发表于 2024-4-14 21:15
有科幻大片的感觉

晚上好

红影发表于 2024-4-14 22:11

这个漂亮，黑黑把那个二次贝塞尔曲线直接变成帖子了呢。还加了个随鼠标可变化的女子图，很漂亮的制作{:4_199:}

红影发表于 2024-4-14 22:12

这当中小图的取的标签名也好玩，#g1，姑娘1的意思呗，是不是还想着加#g2啊{:4_173:}

南无月 发表于 2024-4-14 22:13

教程和贴子同时投放，老师这个太好了。。{:4_187:}

红影发表于 2024-4-14 22:13

背景里的椭圆正好配合了这个灯笼的形状，好看{:4_199:}

南无月 发表于 2024-4-14 22:14

宽银幕大片里有位捉迷藏的姑娘。。{:4_170:}

南无月 发表于 2024-4-14 22:14

音乐震憾，特别之极{:4_187:}

马黑黑 发表于 2024-4-14 22:51

南无月发表于 2024-4-14 22:14
音乐震憾，特别之极

{:4_191:}

马黑黑 发表于 2024-4-14 22:54

南无月发表于 2024-4-14 22:14
宽银幕大片里有位捉迷藏的姑娘。。

{:4_173:}

马黑黑 发表于 2024-4-14 22:54

红影发表于 2024-4-14 22:13
背景里的椭圆正好配合了这个灯笼的形状，好看

{:4_190:}

页: [1] 2 3 4 5 6 7 8 9 10

查看完整版本: Siren