2

画像をトゥイーンして、その後テキストを飛ばそうとしています。すでに画像が飛んでいますが、画像が入った後にテキストを入れる方法がわかりません...また、このdiv全体に背景を入れたいのですが、何らかの理由ですべて私は試してみましたが、表示されず、何もループしません。ヘルプ？-- 画像はすでに Illustrator で自分で作成したものなので、画像をアップロードすることはできませんが、誰かがこれを修正するのを手伝ってくれれば、本当に感謝しています!

ここに私のHTMLがあります:

 <script src="js/TweenMax.min.js"></script>
<div class="container">
    <div class="row">
    <div class="twelvecol last">
    <div id="box">
        <img src="images/cartoon-illustration.png" alt="cartoon" width="150" height="277">
        </div>
        </div>
        </div>
        </div>

これが私のJavascriptです：

function init() {
            var b = document.getElementById("box");
            b.style.left = -500 + "px";
            TweenMax.to(b, 1.5, {css:{left:200}, ease:Expo.easeOut})
        }
window.onload = init;

これが私のCSSです：

#box {
            width: 400px;
            height: 400px;
            position: absolute;
            padding: 25px;
                        }
4

2 に答える 2

1

zpipe07 が示すように onComplete を使用すると、2 つ、場合によっては 3 つのアニメーションをチェーンする必要がある場合は問題ありません。複数のアニメーションの場合、一部は並行して実行され、一部は相互にチェーンされているため、すぐに管理できなくなります。

TimelineLite を使用する必要があります。次に、コードは次のようになります。

function myFunction() {console.log('All done!')}

//create a TimelineLite instance. By default, it starts playing immediately, 
//but we indicated that we want it to wait until our signal. 
//We also want it to launch a function after all animations are complete.
var tl = new TimelineLite({paused:true, onComplete:myFunction})

//append a to() tween
tl.to(b, 1.5, {css:{left:200}, ease:Expo.easeOut)

//add another sequenced tween (by default, tweens are added to the end 
//of the timeline, which makes sequencing simple)
tl.to(textElement, 1.5, {css:{left:200}, ease:Expo.easeOut})

tl.play()

トゥイーンは、タイムラインの最初、最後、または任意の場所にいつでも追加できます。タイムラインを一時停止、繰り返し、スローダウン、早送り、または巻き戻すことができます。ラベルを割り当ててそれらにジャンプしたり、タイムラインをネストしたりできます。

詳細はこちら: http://www.greensock.com/get-started-js/#sequencing

于 2013-03-26T11:34:30.393 に答える
0

画像のトゥイーンが完成した後にテキストをアニメーション化するには、onComplete プロパティを使用できます。予想どおり、onComplete を使用すると、トゥイーンが完了した直後に関数を実行できます。たとえば、次のようになります。

    function init() {
                var b = document.getElementById("box"),
                    textElement = document.getElementById("yourText");

                b.style.left = -500 + "px";
                textElement.style.left = -500 + "px";

                TweenMax.to(b, 1.5, {css:{left:200}, ease:Expo.easeOut}, onComplete: function() {
                    TweenMax.to(textElement, 1.5, {css:{left:200}, ease:Expo.easeOut});
                });
            };
    window.onload = init;

参考：http ://www.greensock.com/get-started-js/

于 2013-03-25T19:58:23.150 に答える