如何用Greensock/TweenLite增加背景位置动画？

Question

我有一个动画，我已经切成120帧。每个框架都在一个精灵上。精灵由十行十个100px x 100px的帧组成。为了创建动画，我按顺序从左到右，从上到下移动精灵的背景位置。

我不得不以100px为步长增加框架效果，所以我不能只从一组左到右的值（0到1000 px）设置动画。

我想我失去了一些东西简单的关于如何使用GreenSock/TweenLite的图书馆工作，因为我似乎无法找到比直截了当地这样做其他更好的办法（与120行代码）：

new TweenLite('#selector', 1, {delay: 0, useFrames: true, css: {'background-position-x': '-100px'}}); 
new TweenLite('#selector', 1, {delay: 1, useFrames: true, css: {'background-position-x': '-200px'}}); 
new TweenLite('#selector', 1, {delay: 2, useFrames: true, css: {'background-position-x': '-300px'}}); 
new TweenLite('#selector', 1, {delay: 3, useFrames: true, css: {'background-position-x': '-400px'}}); 
new TweenLite('#selector', 1, {delay: 4, useFrames: true, css: {'background-position-x': '-500px'}}); 
new TweenLite('#selector', 1, {delay: 5, useFrames: true, css: {'background-position-x': '-600px'}}); 
new TweenLite('#selector', 1, {delay: 6, useFrames: true, css: {'background-position-x': '-700px'}}); 
new TweenLite('#selector', 1, {delay: 7, useFrames: true, css: {'background-position-x': '-800px'}}); 
new TweenLite('#selector', 1, {delay: 8, useFrames: true, css: {'background-position-x': '-800px'}}); 
new TweenLite('#selector', 1, {delay: 9, useFrames: true, css: {'background-position-x': '-900px'}}); 

有没有更简单的方法来增加？

Answer 1

首先，您不应该使用background-position-x，因为它不被广泛支持。

有几个选项：

如果你的精灵纸沿着一行布局只有你可以只用TweenMax它自己这样的侥幸：

var frameWidth = 100, numCols = 12; 
var steppedEase = new SteppedEase(numCols); 

TweenMax.to('#selector', 6, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat:-1}); 

如果您sprite表单在网格中，就像你在你的问题中描述的那样，那么你将不得不引入TimeLineMax像这样加入所有的补间：

var frameWidth = 100, frameHeight = 100, numCols = 12, numRows = 10; 
var steppedEase = new SteppedEase(numCols-1); 
var tl = new TimelineMax({repeat:-1}); 

for(var i=0;i<numRows;i++){ 
    tl.add(TweenMax.fromTo('#selector', 0.5, { backgroundPosition:'0 -'+(frameHeight*i)+'px'}, { backgroundPosition: '-'+(frameWidth*(numCols-1))+'px -'+(frameHeight*i)+'px', ease:steppedEase})); 
} 

这里有几个工作小提琴的我已经有一个随机的精灵表创建我发现网上以行动表达这一点：http://jsfiddle.net/Boolean/sV5Ug/2/和http://jsfiddle.net/sV5Ug/3/

---

一个完全不同的选择是动画上帆布使用CreateJS与Zoe。 Zoe允许您将动画导出为精灵图表和来自各种工具（如Flash IDE）的json文件。然后，您可以使用CreateJS中的BitmapAnimation类将spritesheet图像和json转换为动画。

演示和信息在这里：

http://www.createjs.com/#!/EaselJS/demos/spritesheet

http://www.createjs.com/#!/Zoe

Answer 2

您可以使用TweenMax精灵插件

https://github.com/spalt08/TweenSprite

TweenMax.spriteSheet(document.getElementById('selector'), { 
    width: 1000, 
    stepX: 100, 
    stepY: 0, 
    count: 9 
}, 1.0);