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

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