Question

我正在尝试补间图片然后让文字随后飞来飞去。我的图像已经飞了，但我似乎无法弄清楚如何在图像进入之后使文本进入...另外，我想为这整个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;
                        }

Answer 1

使用onComplete作为zpipe07指示是好的，如果你需要链接两个，也许三个动画。对于多个动画，其中一些是并行运行的，一些是相互链接的，它很快变得无法管理。

您应该使用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

Answer 2

要在补间图像完成后制作一些文本动画，可以使用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/

补间图像然后文本绿色摇滚和JS动画

2 个答案: