当窗口宽度达到 865px 时重新启动绿袜 (JS) 动画

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

本文关键字:JS 动画 重新启动 窗口 865px      更新时间:2023-09-26

我正在使用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);
    }
});

谢谢!

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

如果你想从头开始玩它,最简单的方法是: myTimeline.restart()


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

占位符myProgress可以0标记开头,1补间(或介于两者之间的任何数字)的结尾。因此,从一开始就播放它的代码如下所示:

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

您可以使用 TweenMaxTweenLite 调用重新启动并开始从头开始播放的 .restart()

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