3

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

有没有更简单的增量方法？

4

2 回答 2

6

首先，您不应该使用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

于 2013-11-01T14:16:29.943 回答
0

您可以使用 TweenMax sprite 插件

https://github.com/spalt08/TweenSprite

TweenMax.spriteSheet( document.getElementById('selector'), {
    width: 1000,
    stepX: 100,
    stepY: 0,
    count: 9
}, 1.0);
于 2015-04-05T00:16:45.270 回答