Question

我正在使用Tween制作动画，一旦该动画完成，我想触发另一个动作来设置iframe的src。

我知道我需要使用promises，但我并不是100％确定如何在这种情况下实现它，并且已经尝试了很长一段时间了。它适用于以下代码

Tween.to('#slideshow', 1, {
    top: '50%'
});

setTimeout(function(){
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
  }, 800)

但是当我尝试以下操作时，它无法正常工作

Tween.to('#slideshow', 1, {
    top: '50%'
}).done(function(){
     $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
     $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne');
});

Answer 1

为了记录，这种情况是由TweenLite的创作者GreenSock的人（可能是无意中）提供的。

在他们的GSAP下载中捆绑了TweenLite是jquery.gsap.js，一个jQuery插件，他们介绍如下：

使用jQuery.animate（）的任何人都有好消息 - 新的jquery.gsap.js插件允许你让GSAP在引擎盖下控制，以便你的动画表现更好;无需更改任何代码。此外，GSAP还增加了许多功能，允许您补间颜色，2D变换（旋转，缩放X，缩放，偏斜，偏斜，x，y），3D变换（rotationX，rotationY，z，透视），backgroundPosition，boxShadow等等。您甚至可以为其他className设置动画！

安装了jquery.gsap.js后，jQuery().animate()将使用TweenLite进行动画处理，并且仍允许jQuery的.promise()被链接，从而为您提供完成许可。

首先安装jQuery，TweenMax（或TweenLite及其CSS插件）和jquery.gsap.js插件：

<script type="text/javascript" src="/path/to/jquery-x.y.z.min.js"></script>
<script type="text/javascript" src="/path/to/TweenMax.js"></script>
<script src="/path/to/jquery.gsap.js"></script>

现在，您可以编写一个标准的jQuery .animate()，它具有TweenMax / TweenLite的优点，并且仍然返回一个jQuery承诺：

function doAnimation() {
    return $("#myID").animate({
        backgroundColor: "#FF0000", // color animation is not provided by raw jQuery.
        width: "50%",
        top: "100px",
        ease: Power2.easeInOut // this is a GSAP easing function
    }).promise();
}

doAnimation().then(function() {
    console.log('animation complete');
});

Answer 2

根据我在User Guide中看到的内容，Tween.js不支持Promises。相反，您必须使用它们指定的回调。在这种情况下，我猜你正在寻找onComplete：

Tween.to('#slideshow', 1, {
  top: '50%'
}).onComplete(function() {
  // Code goes here
});

补间完成动画后实现承诺

2 个答案: