Geek Answers Handbook

How do you increase the animation of the background position using Greensock / TweenLite?

I have an animation that I cut into 120 frames. Each frame is on a sprite. The sprite consists of ten rows of twelve 100px x 100px frames. To create an animation, I move the background position of the sprite to the div in the order from left to right, from top to bottom.

I need to zoom in increments of 100px to make the effect of the frame, so I can’t just animate from the set from left to right (from 0 to 1000 px).

I suppose I missed something simple about how the Greensock / TweenLite library works, because I cannot find a better way to do this otherwise than directly (with 120 lines of code):

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

Is there an easier way to increase?

+4
2

-, 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 json ( Flash IDE). BitmapAnimation CreateJS, spritesheet json .

:

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

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

+7

TweenMax sprite

https://github.com/spalt08/TweenSprite

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

More articles:


All Articles