我如何使这个Javascript/jQuery动画更好

How do I make this Javascript/jQuery animation better?

本文关键字：jQuery 动画更好 Javascript 何使这更新时间：2023-09-26

网页为- http://schnell.dreamhosters.com/spriteanimate.html

打开"查看源代码"页面，你会看到所有的代码。

现在很简单。右方向键让X向右移动，左方向键让他向左移动。他在正确的方向上运行动画，实际的图像元素在相同的方向上移动。

我现在遇到的主要问题是优化。如果你稍微摆弄一下它，你会注意到运行中的动画并不总是平滑的，在最初的几秒钟里，它感觉很延迟，就像它还在加载东西一样。向左移动的动画尤其容易犯这个错误。另一个问题是jQuery中的.animate()。它做了一种走走停停的运动，你可以看出来。图像元素的移动是不稳定的，不是很平滑。

来自jQuery的.animate()可以通过easing等进行调整，但我不完全确定这是否是答案，这仍然会让我偶尔出现运行滞后或其他问题。有人有什么建议吗?

为精灵图像使用图像预加载，或者更好的做法是，使用一个图像作为精灵，而不是交换图像文件，而是移动图像文件的位置。您需要将图像设置为背景图像并移动背景位置以实现此目的。

同时，使用线性缓动，否则将默认为摇摆，缓慢进入和退出。

你考虑过使用CSS3过渡而不是标准的jQuery动画吗?这样做可以显著提高性能，但会失去一些跨浏览器兼容性。这里有一个例子，它只在Chrome中工作，但显示了

的功能http://girliemac.com/sandbox/matrix.html

和更多关于CSS3动画

http://css3.bradshawenterprises.com/