Question

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

我必须以100px的步长递增以产生帧效果，所以我不能只从一组左到右的值（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'}});

是否有更简单的增量方式？

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/

完全不同的选项是使用带有 Zoe 的 CreateJS 在画布上制作动画。 Zoe允许您将动画导出为精灵表和来自各种工具（例如Flash IDE）的json文件。然后，您将使用CreateJS中的BitmapAnimation类将spritesheet图像和json转换为动画。

演示和信息：

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

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

Answer 2

您可以使用TweenMax sprite插件

https://github.com/spalt08/TweenSprite

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

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

2 个答案: