响应式精灵动画 GSAP答案

【问题标题】：Responsive sprite animation GSAP响应式精灵动画 GSAP
【发布时间】：2016-10-19 15:01:04
【问题描述】：

我有一个使用美钞GSAP Tween platform 制作动画的精灵。恶意包含 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%;
}

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

【问题讨论】：

标签： css responsive-design sprite css-sprites gsap

【解决方案1】：

我使用精灵作为背景图像，然后使用 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

希望这会有所帮助，干杯。

【讨论】：