JavaScriptを使用したアニメーション画像

Question

いくつかのpngまたはjpgに基づいてjavascriptで画像を作成する方法はありますか？

gifと同じように、アニメーションの印象を作成して、ある画像を別の画像に変更する単なるコードです。

アイデアは、バナーを生成するために使用することですので、画像をうまくアップロードしてください（完了しました）、このアニメーションのコードが必要です。

Answer 1

Stackoverflowは、このテクニックをユニコーンアニメーションの最後の4月の愚かな日に使用しました。私はアニメーションon my websiteを保存しました。アニメーションコードは私のものです - 私はstackoverflowがそれをやっていた方法を見ていませんでした。

コンセプトは、スプライトを作成し、ある間隔で背景位置を変更することです。

#animation { 
    background-image: url(charging.png); 
    background-repeat: no-repeat; 
    height: 102px; 
    width: 140px; 
} 

function startAnimation() { 
    var frameHeight = 102; 
    var frames = 15; 
    var frame = 0; 
    var div = document.getElementById("animation"); 
    setInterval(function() { 
     var frameOffset = (++frame % frames) * -frameHeight; 
     div.style.backgroundPosition = "0px " + frameOffset + "px"; 
    }, 100); 
} 

sprite http://jumpingfishes.com/dancingpurpleunicorns/charging_clip.pngの作業のデモ：http://jsfiddle.net/twTab/

編集：あなたはスプライトを作成したくない場合は、ここで使用できる、代替技術です。アニメーションフレームの画像をすべてdivに入れ、最初のもの以外のすべてを隠します。あなたのsetInterval機能では、リストの最後に最初の画像を移動：

は

#animation img { 
    display: none; 
} 
#animation img:first-child { 
    display: block; 
} 

<div id="animation"> 
    <img src="charging01.png /> 
    <img src="charging02.png /> 
    <img src="charging03.png /> 
    ... 
</div> 

function startAnimation() { 
    var frames = document.getElementById("animation").children; 
    var frameCount = frames.length; 
    var i = 0; 
    setInterval(function() { 
     frames[i % frameCount].style.display = "none"; 
     frames[++i % frameCount].style.display = "block"; 
    }, 100); 
} 

の作業のデモ：http://jsfiddle.net/twTab/3/

Answer 2

あなたはどの関数を呼び出すためにsetIntervalかsetTimeoutを使用することができます画像のソースを別のものに置き換えます。それをアニメ化する

この場合の問題は、イメージがページにあらかじめ存在していないと、それらがちらつきます。ブラウザは他の画像と同様にそれらをロードする必要があるためです。したがって、あなたはpreload your imagesにしなければなりません。

より良い解決策は、spritemapを使用することです。これは、1つの画像にアニメーションのさまざまなステップがすべて含まれることを意味します（フリッカーは発生しません）。次に、CSS background-position（setInterval関数またはsetTimeout関数内）を使用して、イメージの位置を変更します。