风止

马黑黑 · 发表于 2022-8-10 07:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

风止

马黑黑 · 发表于 2022-8-10 07:17

代码分享：

<style>
#papa { left: -214px; width: 1024px; height: 640px;background: rgba(0,0,0,.65) url('https://638183.freep.cn/638183/Pic/38/lake5.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; }
#mama { position: absolute; width: 600px; height: 600px; right: 20px; }
#canv { position: absolute; border-radius: 50%; }
#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: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="mama"><canvas id="canv"></canvas></div>
<span id="disc"></span>
<span id="tit">风止</span>
</div>
<script>
let ctx = canv.getContext('2d');
let w = canv.width = mama.offsetWidth, h = canv.height = mama.offsetHeight;
let objAr = new Array(50), speed = 1, curve = 0.45, idx = 0, aud = new Audio();
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
aud.src = 'https://music.163.com/song/media/outer/url?id=1947739273.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');
for(let k = 0; k < objAr.length; k ++) {
let cc = `rgba(${num(0,255)}, ${num(0,255)}, ${num(0,255)}, .75)`;
objAr[k] = new Obj(w/2, h/2, 2, k*360/objAr.length, cc);
}
function Obj(x,y,size,angle,color) {
this.x = x;
this.y = y;
this.size = size;
this.angle = angle;
this.color = color;
}
Obj.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
ctx.fill();
}
Obj.prototype.move = function() {
let rad = this.angle * Math.PI / 180;
this.x += Math.cos(rad) * speed;
this.y += Math.sin(rad) * speed;
this.angle += curve;
}
function render() {
idx ++;
if(idx > 800) ctx.clearRect(0,0,w,h);
if(idx > 1600) idx = 0;
for(item of objAr) {
item.draw();
item.move();
}
requestAnimationFrame(render);
}
render();
</script>

复制代码

马黑黑 · 发表于 2022-8-10 07:45

本帖最后由马黑黑于 2022-8-10 18:37 编辑

原理解释：

一、帖子实现思路

将画布视为帖子的组成部分，除播放器外，帖子的动画效果由画布实现，位于帖子右边部分。

二、canvas动画

（一）对象专属动画函数 Obj.prototype.draw 是非常常规的绘图封装，它负责画圆：

Obj.prototype.draw = function() {
      ctx.beginPath(); //开启画笔路径
      ctx.fillStyle = this.color; //填充色
      ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);  //画圆
      ctx.fill(); //着色
}

（二）对象专属动画函数 Obj.prototype.move  处理圆心位置、变换角度的变更：

Obj.prototype.move = function() {
      let rad = this.angle * Math.PI / 180; //角度系数：对象所在坐标系角度乘以PI除以180
      this.x += Math.cos(rad) * speed; //圆心X坐标：余弦乘以预设速度
      this.y += Math.sin(rad) * speed; //圆心Y坐标：正弦乘以预设速度
      this.angle += curve; //对象改变角度从而改变位置：自身当前角度加上预设角度
}

预设的速度 speed 和变化角度 curve 共同影响对象环绕运行的半径，故此，speed 和 curve 的设定很重要。

（三）渲染函数 render

function render() {
      idx ++; //idx是预设变量，初始值0，每次刷新加1，其值用以决定运动对象的形态
      if(idx > 800) ctx.clearRect(0,0,w,h); //当 idx 大于800，清除画布：对象为圆球(此前不擦除，圆球连接成环绕线）
      if(idx > 1600) idx = 0; //当 idx 大于1600，idx 重置为初始值
      for(item of objAr) { //遍历对象数组 objAr 的每一个元素，并令其
            item.draw(); //绘制
            item.move(); //变更数据
      }
      requestAnimationFrame(render); //请求动画帧：利用屏幕刷新运行本函数 → 动画永动
}

render 渲染函数是普通函数，它负责两个任务，一是是否擦除画布，二是调动所有对象去执行对象专属的两个函数。