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 很好。对于多个动画，其中一些并行运行，一些相互链接，它很快就会变得难以管理。

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