javascript - 当窗口宽度达到865px时重新启动greensock(JS)动画

Question

我正在使用 js greensock 动画库。我有一个动画，当您开始调整窗口大小时会暂停，当您停止调整窗口大小时会继续。

如果窗口宽度在任一方向上超过 865px，我现在尝试制作动画(重新开始)或从(某个点)开始。

我正在使用的当前代码工作正常，它会在任一方向达到 865px 时刷新整个页面。但是，我只想“重新启动”动画，而不是重新加载整个页面。

这是一个工作 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

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

如果你想从头开始玩，最简单的方法是: 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