如何让这个Javascript / jQuery动画变得更好?

网页是 –
http://schnell.dreamhosters.com/spriteanimate.html

只需转到页面并“查看源代码”,您就会看到所有代码.

现在它非常简单.右箭头键使X向右,左箭头键使他向左.他在正确的方向上运行动画,实际的图像元素在同一方向上移动.

我现在面临的主要问题是优化.如果你稍微玩一下,你会注意到正在运行的动画并不总是平滑的,并且在最初的几秒钟内它感觉非常迟钝,就像它仍在加载一些东西.左边的动画特别内疚.另一个问题是来自jQuery的.animate().它做了一种停止走走动作,你可以说.图像元素的运动是不平稳的并且不是非常平滑.

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

最佳答案 对精灵图像使用图像预加载,或者更好的是,使用一个图像作为精灵,而不是交换图像文件,移动图像文件的位置.您需要将图像设置为背景图像并移动背景位置以实现此目的.

此外,使用线性缓和,否则它将默认为摆动,进入和退出缓慢.

点赞