雪碧精灵管理器使用画布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' // ... } ) ;

应用程序接口：

  • play() 播放动画

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

  • stop() 停止动画

要更深入了解动画精灵的使用，可以参考以下资源：

这些资源不仅能帮助你更好地理解和使用动画精灵，还能激发你更多的创意灵感！是不是让人忍不住想马上试试呢？