jquery - 大きなグラフィックのいくつかの個々の部分をアニメーション化するためのアイデア

Question

ページの上部に大きなグラフィックがあります。これは一連のロゴで、それぞれがグラフィックの小さなセクションに配置されています。新しいロゴを 4 秒または 5 秒ごとに回転させ、各スポットに 3 つまたは 4 つのロゴをループさせたいと考えています。

各ロゴのアニメーションは、画像の特定の部分で 1 つのロゴが別のロゴに置き換わるだけです。上から素早くスムーズに滑り込むのが理想的です。

あなたならどの方法を選びますか？

ありがとう！

オースティン

Answer 1

Greensockアニメーション プラットフォーム (GSAP)をご覧ください。これは元々 ActionScript 用に開発され、現在は JavaScript に移植されたトゥイーン ライブラリです。遅延、ずらし、繰り返し、ループ、反転などをサポートする非常に強力な機能であり、多かれ少なかれ、過去 4 ～ 5 年間、Flash のアニメーションの業界標準となっています。

タイムライン機能は、上で説明したタイプのアニメーションの振り付けを非常に簡単にするため、おそらく特に興味深いでしょう。たとえば、個々のアニメーションのコレクションをグループ化し、それらを単一のアニメーションであるかのように再生、ループ、繰り返し、反転させることができます。

Answer 2

Greensock を使用したソリューションは次のとおり です。完全なループを作成するには、最初のロゴを 2 回含める必要があることに注意してください。

これは 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"})