使用使用GreenSock與車把

我有一個模板，我把手看起來像這樣做：使用使用GreenSock與車把

<script type="text/x-handlebars-template" id="student-template"> 
     {{#students}} 
      <div class="clearfix"> 
      {{#each student}} 
       <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
       <img src="{{imgSource}}" title="{{studentName}} /> 
       </div> 
      </div> 
     {{/students}} 
    </script>

我想用使用GreenSock庫動畫學生圖像的渲染。從我對使用GreenSock的理解，我的代碼想是這樣的：

var timeline = new TimelineLite(); 
timelime.add(TweenLite.from($currentImage, 1, {y: 100})); 
timelime.add(TweenLite.from($nextImage, 1, {y: 100})); 
timelime.add(TweenLite.from($nextnextImage, 1, {y: 100})); 
.. and so on for all images..

我如何通過所有圖像渲染根據我的模板，並在同一時間循環的圖像動畫呢？

來源

2016-12-24 Joyce

你沒有使用ember.js，是嗎？ – Falke

我正在使用車把 – Joyce

你需要做的第一件事是讓你的模板進入一個有效的狀態，以便它可以編譯。 {{#each student}}標籤沒有結束標籤，因爲您已經在探討大概是數組的students對象，所以沒有任何意義。擺脫{{#each student}}一行。

您將通過編譯模板然後使用包含students數組屬性的數據對象的參數調用結果方法來渲染圖像。假設你想你的學生HTML用的「容器」的id屬性注入到一個元素，必要的代碼將如下所示：

var raw_template = document.getElementById('student-template').innerHTML; 
var template = Handlebars.compile(raw_template); 

var data = { 
    students: [ 
     { 
      imgSource: 'https://placekitten.com/g/120/120', 
      studentName: 'John Doe' 
     }, 
     { 
      imgSource: 'https://placekitten.com/g/120/120', 
      studentName: 'Jane Doe' 
     } 
    ] 
}; 

document.getElementById('Container').innerHTML = template(data);

一旦新的標記已經被添加到DOM，我們可以執行我們的動畫。沒有必要單獨爲我們的容器中的每個圖像元素添加相同的動畫到我們的時間軸對象。在使用GreenSock API已經提供了一個方便staggerFrom方法，

吐溫的目標從一組共同目標的值的數組

我們需要調用這個方法只有一次，傳遞一個CSS選擇器將選擇所有在我們的容器的圖像元素和一個交錯數，這將是的單獨圖像元素吐溫之間的秒數開始：

var timeline = new TimelineLite(); 
timeline.staggerFrom('#Container img', 1, { y: 100 }, 0.25);

我已經創建了一個示例fiddle。

來源

2016-12-26 18:43:52 76484

使用使用GreenSock與車把

回答

相關問題