2

次のコードは、html5を使用した実際のアニメーションでの最初の試みです。動くとだけ言っておきますが、イージング、バウンス、その他の優れたアニメーション方程式など、もっと欲しくなるのです。これらの素晴らしいアニメーションを作成するのに役立つライブラリはありますか？jqueryはどういうわけか使用できますか？

私のコードは少し古風な感じがします、または多分それはhtml5が現在ある状態です：

function animateImage(){
    var canvas = document.getElementById('c'), context = canvas.getContext('2d');
    var img = new Image();
    var xpos = 0;
    img.onload = function(){

        if (!img) return;


        var timer = setInterval(function(){
                    context.clearRect(0,0,canvas.width,canvas.height);
                    context.drawImage(img,xpos,0);

                    xpos = xpos + 20;

            }, 1000/200);

    }

    img.src = 'Cupcake_01.png';
}

また、非常に不安定であることも付け加えておきます。まったくスムーズではありません。

4

1 に答える 1

7

アニメーション ライブラリのオーバーヘッドを回避したい場合 (私は可能な限りライブラリをロードしないようにしています)、Robert Penner のイージング方程式を参照する必要があります。これらは一種のイージングの「標準」であり、約 10 年前から使用されています。ほとんどの js アニメーション ライブラリは、これらを本質的に使用するか、定期的に拡張してここに含めるようにしています。参考文献をいくつか示します。

オリジナルのアクション スクリプト: http://robertpenner.com/easing/easing_demo.html

javascript の参考文献: http://upshots.org/actionscript/jsas-understanding-easing

http://jstween.blogspot.co.uk/

于 2012-06-17T11:20:54.300 に答える