补间完成动画后实施承诺

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

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

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

Answer 2

郑重声明，这种情况是由 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()，给你一个完成的承诺。

首先安装 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()，并且仍然 return 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');
});

补间完成动画后实施承诺

Implement a promise once a tween has finished animating

javascript

promise

gsap