css - 响应式 Sprite 动画 GSAP

Question

我有一个 Sprite ，我正在使用美元制作动画 GSAP Tween platform . spite 包含 7 个不同的图像，然后用于创建动画。 Sprite 上的每张图片的大小都是 1000px x 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

我使用 Sprite 作为背景图像，然后使用 GSAP 通过更改“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} );
};

演示链接:http://codepen.io/Keinchy/pen/xGbpmK

希望这有帮助，干杯。