jquery - 为大型图形的几个单独部分设置动画的想法

Question

我在页面顶部有一个大图形。这是一堆徽标，每个徽标都位于图形的自己的一小部分。我希望新徽标每 4 或 5 秒旋转到位，每个位置有 3 或 4 个徽标循环。

每个徽标的动画将只是一个徽标替换图像特定部分中的另一个徽标。从上方快速而平稳地滑入将是理想的。

你会选择什么方法？

谢谢！

奥斯汀

Answer 1

看看Greensock 动画平台 (GSAP)。它是一个补间库，最初是为 ActionScript 开发的，现在已移植到 JavaScript。它非常强大，支持延迟、交错、重复、循环、反向等，并且在过去 4 或 5 年中或多或少地成为 Flash 动画的行业标准。

您可能会对时间线功能特别感兴趣，因为它使编排您在上面描述的动画类型变得轻而易举。例如，它允许您将一组单独的动画组合在一起，并像单个动画一样播放、循环、重复和反转它们。

Answer 2

这是使用 Greensock 的解决方案：http: //jsfiddle.net/brian_griffin/zquLC/ 我相信它完全符合您的要求。请注意，您必须两次包含第一个徽标才能形成完美的循环。

这也可以使用 CSS3 动画来完成，但旧版浏览器支持 Greensock。

（伪）HTML

<div id="container">
    <div class="logo" id="firstlogo">
        <img 1/>
        <img 2/>
        <img 3/>
        <img 1/>
    </div>
    <div class="logo" id="secondlogo">ditto</div>
    <div class="logo" id="thirdlogo">ditto</div>
</div>

CSS

#container {
    height:100px;
    overflow:hidden;
}
.logo {
    width:100px;
    height:400px;
    float:left;
    position:relative;
    top: -300px;
}
img {
    width:100px;
    height:100px;
    position:relative;
    display:block;
}

JS

var spd = 1.5 //seconds
var tl = new TimelineMax({repeat:-1})
tl.to('firstlogo', spd, {top:"+=0px"})
tl.to('firstlogo', spd, {top:"+=100px"})
tl.to('firstlogo', spd, {top:"+=0px"})
tl.to('firstlogo', spd, {top:"+=100px"})
tl.to('firstlogo', spd, {top:"+=0px"})
tl.to('firstlogo', spd, {top:"+=100px"})