Javascript HTML5动画和动画

下面的代码是我第一次尝试使用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';
}

---

我还要补充一点，那是非常紧张的；一点也不平滑。

如果你想避免动画库的开销（我尽量避免在任何可能的地方加载lib），你应该看看Robert Penner的缓和方程。这些都是Easy中的“标准”，已经存在了大约10年，大多数js动画库要么固有地使用它们，要么定期扩展以包括它们。这里有一些参考：

原始的，在actionscript中：

javascript的一些参考：

---

代码演示：有点像狼一样狡猾。是的，还有图书馆。我想起了拉斐尔。他们并不难找到。是的，我找到了tween.js。拉斐尔不是svg吗？我不太确定。KineticJS与您描述的完全一样，基于画布和HTML5。我唯一不确定的是jQuery支持。我正在使用这个库：但是，它对于较大的图像来说速度很慢。我没有得到html5的所有宣传，它在动画方面并没有完全取代flash。下面是一个有趣的组合。