Question

我在页面顶部有一个大图。它是一堆徽标，每个徽标都位于图形的一小部分。我想让新徽标每4或5秒旋转一次，每个点有3或4个徽标。

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

您的选择方法是什么？

谢谢！

奥斯汀

Answer 1

查看Greensock animation platform (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"})

想要为大图形的几个独立部分制作动画

2 个答案: