JavaScript动画工作原理之（一）

原作者：Steven Riche

发布时间：2014年1月

原文地址：http://code.tutsplus.com/tutorials/javascript-animation-that-works-part-1-of-4--net-35205

翻译：子毅 --------   将JavaScript进行到底

HTML是用于构建web的，它有点像奇怪的野兽。尽管HTML最初的目标是，通过互联网提供一种简单的方式来共享学术信息，慢慢地演变成提供我们所了解和喜爱的丰富媒体环境。由于HTML（和JavaScript,操纵HTML元素使得它们可交互）的偶然性，有时候我们不得不打破传统的思维模式(think outside the box a bit)。在本系列教程中，我将使用被称为精灵（spriting）的方法来向你展示如何制作跨浏览器的动画，并且这是一次学习的机会，我不会使用任何其他库（比如jQuery)

本系列教程有四个部分，在第一部分中（本篇文章）我将使用JavaScript解释什么是精灵（spriting），但是在后面的部分，我们将进入诸如封装，事件处理和触摸支持的一些中间技巧。

我们开始吧！

什么是动画？

动画是基于一种被称为视觉暂留的现象，其基本原理是，假如你的大脑看到很多类似的静态图片足够快，就会表现得像是只有一张图片在移动。很多电影和录像使用这一基本的技术 ——许多不同的帧进行快速连续的显示使得某些东西看起来在移动一样。通常，电影每秒显示24帧，在北美，广播电视每秒显示29.97帧。因此，换句话说，我们想要做的就是创造一些东西，类似于帧一样快速地显示（每秒几次)

在web中的困难

这里有两个在web里使用动画很困难的主要原因：

1.首先，不同的浏览器解释HTML和JavaScript的方式不同，因此经常出现的是，在这台设备上能够工作，但在另一台设备上不能工作。Flash在大多数浏览器上都工作得很好，但是其支持度正在下降，并且IOS设备根本就不支持它。Canvas有很大的潜力，但是IE8不支持它。Adobe的Edge Animate也是同样的情况。GIF动画在任何设备上都能工作，但是你不能控制动画或者使得它可交互。

2.第二，在web页面上的每张图片都会在浏览器和服务器之间发起一次单独的请求。这些请求可以叠加起来，即使在一个快如闪电的互联网连接中，每帧每秒都会变得不可收拾。

解决办法：精灵（Spriting）

围绕上述问题，一个解决办法是制作一个精灵表（sprite sheet），比如在div元素中，我们可以div设置一张背景图片，这张图片可能比元素本身还要大。我们还可以给背景进行定位，使得我们可以准确地决定大图片的哪部分将会显示。一个精灵表是由几张小图片组成的大图片，我们可以左右移动它，以便取代很多小图片。看一下下面的例子，using J, 我公司(Joust Multimedia)的吉祥物

尽管这里有十张不同的J图片，但是他们全部被放在一张大的PNG文件上（我们使用PNG图片是因为它们可以以透明的方式显示）。假如我们有一个div元素，它将只有其中一张图片的大小，并且我们设置这张PNG为背景，它将看起来只有一张小图片。

在CodePen上看效果

尽管看起来为了显示一张图片要面临很多困难，但是这个方法很好地解决了上面所说的两个问题。使用很少的JavaScript代码（在线的！）你就可以改变一个div元素的背景位置，并且在所有设备都能够工作。更好的是，因为所有的帧都在同一张图片上，所有在页面只会发起一次请求来下载图片，因此，一旦页面下载完毕，图片就可以在精灵之间没有任何问题地切换。

那么我们该如何设置才能使制作动画简单呢？第一步是制作精灵表。你可能想知道最终你的图片尺寸是多少，网格上，各精灵之间的空格是多少。作为例子，我的J图片宽和高分别是40px、50px，因此我排列的精灵在水品方向上40px为一个块，竖直方向上，50px为一个块。如果你将你的精灵设置为从左上角开始，一切都将变得很简单。

然后，我们建立一个div元素，为了保证一切正常显示，我们使用少量的CSS作为修饰。

<div id="stage"><div id="j" class="character"></div></div>

下面是保证精灵正常显示的CSS

.character {/* * 设置和精灵一样的宽和高很重要 */ height:50px; width:40px;/* * 在stage内，为了是我们对精灵有完全的控制力，我们 * 需要把他们的position属性设置为绝对定位 */ position:absolute; left:100px; top:120px;}#j {/* * 现在我们用左上角的第一张精灵作为character类div * 的背景图片 */background-image:url('j.png');background-repeat:no-repeat;background-position:0 0;}

注意下面的几件事:

• 我们特意设置div元素的宽和高我尺寸为精灵的尺寸
• 我们特意设置background-repeat属性为‘no-repeat'
• 我们特意设置background-position属性为’0 0‘——这将显示左上角的精灵

现在，只需要一行JavaScript代码就可以改变背景的位置来显示下一张精灵

document.getElementById('j').style.backgroundPosition = '-40px 0px';

这里，我们需要选中元素（id=’j'），并且设置他的style特性为'backgroundPosition'。注意在JavaScript中它的拼写为'backgroundPosition‘，而不是CSS中的’background-position'。还需注意的是，传递给x和y的数值都需要‘px’单位——我们不能只是传递数字。因为我们是在移动背景图片，所以我们需要与你期待方向相反的方向移动。比如我们要使精灵向右移动，必须将图片向左移动40px。

现在，假如我们有一些简单的方式来执行代码（比如一个按钮），我们可以时事地看到帧的变化：在Codepen中查看效果

额外地，你可能想看一下整个页面的源代码（译注：请在这里看效果，上面一个链接打不开），那里面有所有的例子并且都添加了注释。这里是我所用的精灵表

下一步

在这片教程中，我们所介绍过的是一个很好的开始，但是它并不是一个合适的动画。

在这个系列的第二篇教程中，我们将通过在精灵之间循环，来做实际地做一些跑和跳的动画。

在第四篇中，我们将用鼠标来控制机器人的动作。你可以在ByGtV中预览

总结 & 缺点

尽管这是一个很好的方法在web中实现动画，但是这里还是有一些缺点。首先，你需要创造动画的每一帧，这将会很费时。第二，浏览器没有不能精准的设置动画时间，假如 它是至关重要的动画需要完美定时，那么它可能不会工作。

最后，手机Safari浏览器（用在iPhones和iPads上）有一个‘特征’，假如你在某个地方有张别境图片大小超过2MB，或者大于1024*1024*3pixels(或者 3,145,728像素），Safari将会自动调整图片，这将会破坏精灵效应。这意味着真正大数量精灵的动画将会出问题。但是，简单地，一些可交互的小动画，这是一种在任何地方都可以工作的简单有效方式。

有趣的旁注

1.在有声电影之前，并没有一个标准的帧速率。相机是通过手摇操作的，如果你有个菜鸟摄影师，帧速率可能会有意无意地降低、增加。信誉较低的剧院臭名昭著是因为他们告诉他们的放映曲柄投影机师更快地加快节目，使得他们可以放映更多的场次。这也是为什么我们认为刻板的预声电影滑稽的快速移动——大部分电影在拍摄时都是16-18帧每秒。因此我们今天发挥它们在24帧每秒，这已经超过了原本的打算

2.在北美，电视没开始是每秒播放30帧，但是彩色电视机在那个速度会造成故障。工程师算出他们可以通过降低1%的帧速率来修复这个故障，这就是为什么现在它被设置为29.97fps。同时，为了在电视上显示，将电影从24fps转换到29.97fps，除了所有的古怪技术问题，使电视在一个更高的帧速显示对公众产生了一个有趣的影响。很多人观看了“霍比特人”以每秒48帧的试映，报道称，提高帧速率后使得电影看起来要"便宜“，尽管它比典型电影有更高的质量。只是因为他们将更快速的帧速率与看电视相关联。