當窗口寬度達到865px時重新啓動綠色（JS）動畫

我正在使用js greensock動畫庫。當您開始調整窗口大小並停止調整窗口大小時，我有一個動畫暫停。當窗口寬度達到865px時重新啓動綠色（JS）動畫

如果窗口寬度在任一方向上都通過865像素，我現在試圖製作動畫（從頭開始）或從某個點開始。

當前的代碼im工作「好吧」它刷新整個頁面達到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); 
    } 
});

謝謝！

來源

2016-01-20 Patrick

有沒有必要刷新整個頁面。有幾種方法可以操作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

來源

2016-01-21 16:22:03

您好伊萬。我只是找到時間再次處理這個問題，但不知道如何將myTimeline.restart（）添加到上面的代碼中，以便在窗口跨越865像素時重置。我如何應用它？ – Patrick

讓我們打電話給你的時間線'myTimeline'。要從頭開始播放，您可以調用以下行：'myTimeline。重新啓動（）;'從'resize'綁定中的條件主體。 –

您可以撥打.restart()其重新啓動，並開始使用TweenMax或TweenLite時，從一開始打前鋒。

API的相關信息在這裏： https://greensock.com/docs/TweenMax/restart()

來源

2017-06-28 06:46:22 GibboK

當窗口寬度達到865px時重新啓動綠色（JS）動畫

回答

相關問題