Question

我有一个精灵，我使用绿背GSAP Tween platform制作动画。 spite包含7个不同的图像，然后用于创建动画。精灵上的每个图像的大小为1000px 1000px。

以下是代码。

HTML

<div id="animate-wrapper">
    <img src="test.svg">
</div>

CSS

#animate-wrapper {
    height: 1000px;
    width: 1000px;
    overflow: hidden;
}

#animate-wrapper img {
    height: 100%;
    width: 700%;
}

JS

var animateTongueOut = new TimelineMax({paused: true});
var easeTongueOut = new SteppedEase(6);
animateTongueOut.to('#animate-wrapper img', 1, {
    x: '-6000px',
    ease: easeTongueOut
})

Answer 1

I used a sprite as a background image and then used GSAP to animate as a image sequence by changing the "backgroundPosition".

var flyingPoni = new TimelineMax({repeat:-1});

for (var poniX = 1; poniX < 10; poniX++) {
      flyingPoni.to($(".poni"), 0, {
        backgroundPosition:(-300*poniX)+"px",
        ease: "easeOutQuint",delay:.065} );
};

link of demo: http://codepen.io/Keinchy/pen/xGbpmK

hope this helps, cheers.

响应精灵动画GSAP

1 个答案: