使用uislider的動畫序列

Question

我剛開始學習jQuery和im掙扎。我試圖創建一個離線頁面，它包含了一個鏈接一系列圖像（幀）的uislider，所以當拖動滑塊時它會創建一個動畫。 。我想檢查一個本地文件夾，如果可能的話，並使用該文件夾中的所有圖像作爲合意列出圖像在HTML中，因爲將有超過200個圖像。我還希望在網頁之間記住滑塊的位置並進行刷新，因爲我希望對同一動畫有不同的視圖。

任何幫助，將不勝感激

下面

Answer 1

工作，它應該使用GSAP但我需要實現的方式，以節省刷新和頁面之間的狀態？

<div id="wrapper"> 
    <div id="demoWrapper"> 
    <div id='image'> 
    <img src="" /> > 
    <img src="" /> 
    <img src="" />  
    </div> 

    <div id="sliderWrapper"> 
    <div id="slider"></div> 
    </div> 
    </div> 
    <div id="nav-bar"> 
    <button id="play">play</button> 
    <button id="pause">pause</button> 
    <button id="reverse">reverse</button> 
    <button id="restart">restart</button> 
    </div> 

    </div> 

    $(document).ready(function() { 

    var images = $('#image').children(), // images in the sequence 
    fps = 1, 
    duration = 1/fps; 

    var tl = new TimelineLite({ 

    onUpdate:updateSlider}) 
.staggerTo(images, 0, {position: 'static', visibility: 'visible' },  duration, 0) 
.staggerTo(images.not(images.last()), 0, {position: 'absolute',  visibility: 'hidden', immediateRender: false }, duration, duration) 
.set({}, {}, "+="+duration); 





$("#play").click(function() { 
//play() only plays forward from current position. If timeline has  finished, play() has nowhere to go. 
    //if the timeline is not done then play() or else restart() (restart always restarts from the beginning). 

    if(tl.progress() != 1){ 

    tl.play(); 
} else { 
tl.restart(); 
} 
}); 

$("#pause").click(function() { 
    tl.pause(); 
    }); 

$("#reverse").click(function() { 
    tl.reverse(); 
}); 



    $("#restart").click(function() { 
    tl.restart(); 
    });  


$("#slider").slider({ 
range: "max", 
min: 0, 
max: 100, 
    step:1, 
slide: function (event, ui) { 
tl.pause(); 
//adjust the timeline's progress() based on slider value 
tl.progress(ui.value/100); 

} 
}); 



function updateSlider() { 
$("#slider").slider("value", tl.progress() *100); 
} 
});