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

Question

我有一个被切成了120帧的动画。每一帧都在一个雪碧图上。这个雪碧图由十行十二个100px x 100px的帧组成。为了创建动画，我需要移动雪碧图在一个div中的背景位置，从左到右，从上到下。

为了制造帧效果，我必须按照100像素的步长递增，因此我不能仅仅从固定的左右值（0到1000像素）进行动画。

我认为我对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'}});

有没有更简单的方式来进行增量操作？

- Justin

---

你能否在JSFiddle上设置它，以便我们可以尝试一下并查看是否有更有效的方法来完成它？ - ahren

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});

如果你的精灵表是按照你在问题中描述的网格排列的，那么你需要引入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 类将精灵表图像和 json 转换为动画。

演示和信息在这里： http://www.createjs.com/#!/EaselJS/demos/spritesheet http://www.createjs.com/#!/Zoe

- Hoolagon

Answer 2

你可以使用TweenMax精灵插件

https://github.com/spalt08/TweenSprite

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

- Константин Даруткин