ウェブページのアニメーションヘッダをコーディングする最も効率的な方法は何ですか？

Question

私は、影響を受けた歯車がアニメーション化（回転）し始めるマウスオーバーイベントで、ランダムに画像（歯車）が追加されたキャンバスでアニメーションヘッダをコーディングしようとしていました。私はそれをするのに苦労している。私は本当にこれに多くの時間を無駄にし、ここで助けを得ることに決めました。キャンバスフレームは1つの大きなオブジェクトと見なされるため、単一のキャンバスオブジェクトに対して「イベントリスナー」がないことを読んだので、ここでキャンバスを使用することもOKですか？だから、それは "不可能"または単一のcogwheelsアニメーションをアニメ化するために効率的ではないかもしれません...これを解決するための良いチュートリアルや、私は聞く/少なくとも最初に読むべきいくつかのヒント？

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

これは、あなたがチェックアウトで興味深いものになるだろうとリソースかもしれません：

は、ここに私のコードです。これは、 "GreenSock Animation Platform"を表す "GSAP"と呼ばれています。これは、HTML5/JSを使用して非常に少ないコードで簡単なアニメーションの多くを可能にします。

また、キャンバスオブジェクトの操作についても説明しました。特に、リンクしているページの中央に、あなたがしようとしているのと同じように聞こえる "staggerTo"エフェクトを示すセクションがあります。 （一部のボックスは回転して所定の場所に回転します）

私は最近、どのように使用するのかを知っていて、どれほど簡単かと感心しています。また、CodePenと一緒にページに基本的なチュートリアルがあります。リンク。とにかく、これが何らかの形式や方法で役立つことを願っています。がんばろう！

http://greensock.com/tweenmax