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

如果你想避免动画库的开销（我尽量避免在任何可能的地方加载库）你应该看看罗伯特彭纳的缓动方程。这些是缓动的“标准”，已经存在了大约 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 回答