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

Javascript 当窗口宽度达到865px时,重新启动greensock(JS)动画,javascript,jquery,gsap,Javascript,Jquery,Gsap,我正在使用js greensock动画库。我有一个动画,当你开始调整窗口大小时会暂停,当你停止调整窗口大小时会继续 我现在尝试制作动画(重新开始),或者如果窗口宽度在任一方向超过865px,则从某个点开始制作动画 我正在使用的当前代码是“好的”,它在任一方向达到865px时刷新整个页面。然而,我只想“重新启动”动画,而不是重新加载整个页面。 这是一个正在工作的 下面是我正在使用和引用的JS片段 //Reload Animation if window width crosses over 865

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

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

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

这是一个正在工作的

下面是我正在使用和引用的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);
    }
});
//如果窗口宽度超过865px,则重新加载动画。
var ww=$(window.width();
var限值=865;
函数刷新(){
ww=$(window.width();
var w=wwlimit?(location.reload(true)):ww=limit);
}
var tOut;
$(窗口)。调整大小(函数(){
var resW=$(window.width();
clearTimeout(tOut);

如果((ww>limit&&resW),则无需刷新整个页面。有几种方法可以操作时间线或时间线

如果您想从头开始播放,最简单的方法是:
myTimeline.restart()


或者,您可以更改进度并从该点播放动画:

占位符
myProgress
可以是
0
标记开始,而
1
是二者之间的结尾(或中间的任何数字)。因此从一开始播放的代码如下所示:

myTimeline.progress(0.play()


第三种方法是

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

编辑:

这是你的笔叉。我相信它能满足你的需要:
不需要刷新整个页面。有几种方法可以处理时间线或时间线

如果您想从头开始播放,最简单的方法是:
myTimeline.restart()


或者,您可以更改进度并从该点播放动画:

占位符
myProgress
可以是
0
标记开始,而
1
是二者之间的结尾(或中间的任何数字)。因此从一开始播放的代码如下所示:

myTimeline.progress(0.play()


第三种方法是

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

编辑:

这是你的笔叉。我相信它能满足你的需要:

您可以调用
.restart()
,当使用
TweenMax
TweenLite
时,它会重新启动并从一开始就开始向前播放

API信息如下:

您可以调用
.restart()
,当使用
TweenMax
TweenLite
时,它会重新启动并从一开始就开始向前播放

API信息如下:

你好,伊万。我刚刚找到时间再次处理这个问题,不知道如何将myTimeline.restart()添加到上面的代码中,以便在窗口通过865px时重置。我如何应用它?让我们调用您的Timeline
myTimeline
。要从头开始播放,可以调用以下行:
myTimeline.restart()
在您的
resize
绑定中的条件体中。你好,Ivan。我刚刚找到时间再次处理这个问题,不知道如何添加myTimeline.restart()我的时间线
myTimeline
。要从一开始播放它,可以调用以下行:
myTimeline.restart();
调整大小
绑定中的条件体开始。