javascript - 补间图像然后文本 Greensock 和 JS 动画

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

如 zpipe07 所示，如果您需要链接两个或三个动画，则可以使用 onComplete。对于多个动画，其中一些是并行运行的，一些是相互链接的，它很快就会变得难以管理。

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