window 宽度达到 865px 时重启 greensock (JS) 动画

Question

我正在使用 js greensock 动画库。我有一个动画，它会在您开始调整 window 大小时暂停，并在您停止调整 window.

大小时继续播放

如果 window 宽度在任一方向超过 865px，我现在正在尝试制作动画（重新开始）或从（特定点）开始。

我正在使用的当前代码有效 "Okay" 它会在任一方向达到 865 像素时刷新整个页面。但是，我不想重新加载整个页面，而是只想 "restart" 动画。

这是一个有效的 CODEPEN

这是我正在使用和参考的 JS 片段。

//Reload Animation if window width crosses over 865px either way.

var ww = $(window).width();
var limit = 865;

function refresh() {
   ww = $(window).width();
   var w =  ww<limit ? (location.reload(true)) :  ( ww>limit ? (location.reload(true)) : ww=limit );
}

var tOut;
$(window).resize(function() {
    var resW = $(window).width();
    clearTimeout(tOut);
    if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {        
        tOut = setTimeout(refresh, 0);
    }
});

谢谢！

Answer 1

无需刷新整个页面。有几种方法可以操作 Tween 或时间轴。

如果您想从头开始玩，最简单的方法是： myTimeline.restart()

或者您可以更改进度并从该点开始播放动画： myTimeline.progress( myProgress )

占位符 myProgress 可以是 0 标记开始，1 是 Tween 的结束（或中间的任何数字）。所以从一开始播放它的代码看起来像这样：

myTimeline.progress( 0 ).play()

第三种方式是.play( time )

这类似于.progress()，区别在于myProgress是相对测量而time是绝对测量。因此，如果 myTimeline 的持续时间为 8 秒，myTimeline.progress(0.5).play() 的结果将与 myTimeline.play(4)

相同

编辑：

这是你的钢笔的叉子。我相信它可以满足您的需求： http://codepen.io/anon/pen/adqypP

Answer 2

您可以调用 .restart()，当使用 TweenMax 或 TweenLite 时，它会重新开始并从头开始向前播放。

API 信息在这里： https://greensock.com/docs/TweenMax/restart()

window 宽度达到 865px 时重启 greensock (JS) 动画

Restart greensock (JS) animation when window width reaches 865px

javascript

jquery

gsap