为网页的动画标头编码的最有效方法是什么？

Question

我一直在尝试用画布编写动画标题，在其中添加随机图像（齿轮）和鼠标悬停事件，受影响的齿轮开始进行动画处理（转弯）。 我很难做到这一点。 我真的在此上浪费了很多时间，决定在这里寻求帮助。 在这里使用画布甚至还可以，因为我已经读到单个画布对象没有“事件监听器”，因为画布框架被视为一个大对象。 因此，使单个齿轮动画化可能是“不可能的”或效率不高的……有什么好的教程可以解决这个问题，或者至少我应该先听/读一些技巧。

这是我的代码：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var cw=canvas.width;
var ch=canvas.height;

var imageURLs=[];  
imageURLs.push("https://image.freepik.com/free-icon/cogwheel_318-102625.png");
imageURLs.push("https://image.freepik.com/free-icon/cogwheel_318-102625.png");
imageURLs.push("https://image.freepik.com/free-icon/cogwheel_318-102625.png");
imageURLs.push("https://image.freepik.com/free-icon/cogwheel_318-102625.png");
imageURLs.push("https://image.freepik.com/free-icon/cogwheel_318-102625.png");
imageURLs.push("https://image.freepik.com/free-icon/cogwheel_318-102625.png");





//the loaded images will be placed in imgs[]
   var imgs=[];

   var imagesOK=0;
   loadAllImages(start);

   function loadAllImages(callback){
     for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
        imagesOK++; 
          if (imagesOK>=imageURLs.length ) {
             callback();
          }
    };
      img.onerror=function(){alert("image load failed");} 
    img.crossOrigin="anonymous";
    img.src = imageURLs[i];
  }      
}

function start(){

  // the imgs[] array now holds fully loaded images
  // the imgs[] are in the same order as imageURLs[]
  for(var i=0;i<imgs.length;i++){
    var randomX=Math.min(cw-imgs[i].width,Math.random()*cw);
    var randomY=Math.min(ch-imgs[i].height,Math.random()*ch);
    ctx.drawImage(imgs[i],randomX,randomY);
  }

}

Answer 1

这可能是您签出时会很感兴趣的资源。 它称为“ GSAP”，代表“ GreenSock动画平台”。 使用HTML5 / JS，只需很少的代码，即可使用许多简单的动画。

它还提到使用画布对象。 特别是，链接的中间部分有一个部分，显示“ staggerTo”效果，听起来与您尝试执行的操作类似。 （有一些盒子旋转并滚动到位）

我知道我最近一直在学习如何使用它，它的简单性让我印象深刻，他们的页面上确实有一些基本的入门教程以及CodePen链接。 无论如何，希望这会以某种形式或方式提供帮助。 祝好运！

http://greensock.com/tweenmax