sprite 精灵管理器

雪碧精灵管理器使用画布drawImage或常规div backgroundPosition高级loop，在重新启动或倒带之前具有可选延迟的yoyo运动例子。假设你需要一个精灵动画，可以在启动和倒带之间切换，并且具有一些延迟，那么你可以使用以下代码：

var sp = new Sprite({

  src: '/sprite.png',

  columns: 7,

  rows: 1,

  delay: 150,

  motion: 'yoyo',

  el: document.querySelector('.sprite')

});

sp.play();

或者，如果你不想使用new来实例化，也可以直接这样做：

var sp = Sprite({

  src: '/sprite.png'

  // ...

});

想知道更多吗？了解实时轨迹生成的细节，可以参考论文研究yoyo运动的实时轨迹生成。想要更深入地理解动画合成精灵的原理，可以查看动画合成精灵。如果你对CSS雪碧图感兴趣，那么这个CSS雪碧图demo含雪碧代码将会是一个不错的资源。

应用程序接口提供了各种控制动画的方法：

• play()：播放动画

• rewind()：以相反的顺序播放动画

• stop()：停止动画

这些功能的实际应用，可以在animateSprite可控制雪碧图sprites动画的jQuery插件中找到实例。