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

Question

我有一个已切成 120 帧的动画。每一帧都在一个 Sprite 上。 Sprite 由十行组成，每行十二个 100px x 100px 帧。为了创建动画，我按从左到右、从上到下的顺序移动 Sprite 在 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'}});

有没有更简单的递增方式？

Answer 1

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

有几个选项:

如果您的 sprite 表仅沿一行排列，您可以像这样单独使用 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} ));
}

以下是我使用在网上找到的随机 Sprite 表创建的几个工作 fiddle ，以展示它的实际效果:http://jsfiddle.net/Boolean/sV5Ug/2/和 http://jsfiddle.net/sV5Ug/3/

---

一个完全不同的选择是使用 CreateJS 和 Zoe 在 Canvas 上制作动画。 Zoe 允许您从各种工具(例如 Flash IDE)将动画导出为 sprite 表和 json 文件。然后，您将使用 CreateJS 中的 BitmapAnimation 类将 spritesheet 图像和 json 转换为动画。

演示和信息在这里:

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

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