你会如何制作一个动画div css / js

Question

我能想到的一种方式是使用动画svg，但可能有更好的方法。如果你必须为这些波浪斑点制作动画（移动兼容），你会怎么做？

Link to the only pin I've found similar

var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i / 100) + "s";

触摸互动也会很好。帆布的东西会有问题吗？

Answer 1

我将波形设为PNG（底部为实心灰色，顶部为透明）。将它放在卡的两倍宽度的div中，并将其放在div的宽度中（第二个div是'mask'）。

然后通过CSS，在x轴上进行嵌套的给定变换，使其侧向动画。

你不需要任何JS。

Answer 2

我会这样做：

• 在页面加载时创建一个离屏画布（只需设置display: none）
• 在for循环中计算wave：
  • 清晰透明
  • 仅绘制白色部分，因为彩色部分具有渐变
  • 每次绘制后，从画布中获取PNG数据并将其存储在数组中
• 在循环之后，您将拥有一组PNG图像（帧）
• 循环浏览这些帧，而不是一遍又一遍地重新计算波

这要求波的周期与您拍摄的帧数有关（比如10 Hz的2秒动画需要20帧是循环的）

说实话，你可以存储服务器端并只下载它，而无需计算客户端。那些PNG图像非常小，因为没有涉及任何颜色（只是透明/白色/ alpha通道）。有最佳的设置，我估计每帧大约1KB就足够了，这是一个20 KB的小图片。

Answer 3

这是@ DA的实现。很好的答案：

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var cw=canvas.width;
var ch=canvas.height;

ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.font='16px verdana';
ctx.lineWidth=5;
ctx.strokeStyle='white';
ctx.fillStyle='white';
var offsetX=0;

var bk=makeWave(canvas.width,canvas.height-120,10,2,'lightskyblue','cornflowerblue');

requestAnimationFrame(animate);

function animate(time){
    ctx.clearRect(0,0,cw,ch);
    ctx.drawImage(bk,offsetX,0);
    ctx.fillStyle='white';
    ctx.font='18px verdana';
    ctx.fillText('Multiple Lists',cw/2,30);
    ctx.strokeRect(cw/2-50,85,100,50);
    ctx.fillStyle='gray';
    ctx.font='12px verdana';
    ctx.fillText('You can create and save multiple ...',cw/2,250);
    offsetX-=1;
    if(offsetX< -bk.width/2){offsetX=0;}
    requestAnimationFrame(animate);
}

function makeWave(width,midWaveY,amplitude,wavesPerWidth,grad0,grad1){
    var PI2=Math.PI*2;
    var totValue=PI2*wavesPerWidth;
    var c=document.createElement('canvas');
    var ctx=c.getContext('2d');
    c.width=width*2;
    c.height=midWaveY+amplitude;
    var grad=ctx.createLinearGradient(0,0,0,midWaveY);
    grad.addColorStop(0.00,grad0);
    grad.addColorStop(1.00,grad1);
    //
    ctx.beginPath();
    ctx.moveTo(0,0);
    for (x=0;x<=200;x++) {
        var n=totValue*x/100;
        ctx.lineTo(width*x/100,Math.sin(n)*amplitude+midWaveY);
    }
    ctx.lineTo(c.width,0);
    ctx.closePath();
    ctx.fillStyle=grad;
    ctx.fill();
    return(c);
}

body{ background-color:white; }
canvas{border:1px solid red; margin:0 auto; }

<canvas id=canvas width=300 height=300></canvas>