Question

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

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

当前代码我正在使用作品＆＃34;好的＆＃34;它在向任一方向达到865px时刷新整个页面。但是，而不是重新加载整个页面我只想简单地重新启动＆＃34;动画。

这是一个有效的 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可以是补间的结尾（或中间的任何数字）。所以从一开始就播放它的代码看起来像这样：

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()

窗口宽度达到865px时重新启动greensock（JS）动画

2 个答案: