javascript - 一旦补间完成动画就实现 promise

Question

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

我知道我需要使用 promise ，但我不是 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 插件，他们介绍如下:

Good news for anyone using jQuery.animate() - the new jquery.gsap.js plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className!

安装 jquery.gsap.js 后，jQuery().animate() 将使用 TweenLite 制作动画，并且仍然允许链接 jQuery 的 .promise()，从而提供您 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>

现在，您可以利用 TweenMax/TweenLite 的优势编写标准 jQuery .animate()，并且仍然返回 jQuery promise :

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');
});