如何使用速度創建更智能的切換動畫

Question

我正在使用velocity.js來處理動畫，其大部分很棒。我有一個codepen的基本演示，顯示一個簡單的切換按鈕，但是讓它變成動畫的js看起來非常麻煩。

在我的例子中處理切換動畫的最佳方式是什麼？

var open = false; 

$('.filter').click(function(e){ 

    e.preventDefault(); 

    var el = $(this); 

    if(!open){ 

     el.find('.filter__line:first').velocity({translateY: [0, -5]}, 200, function(){ 
      $(this).addClass('filter__line--thick').velocity({rotateZ: '45deg'}, 200); 
     }); 

     el.find('.filter__line:last').velocity({translateY: [0, 5]}, 200, function(){ 
      $(this).addClass('filter__line--thick').velocity({rotateZ: '-45deg'}, 200); 
     }); 

     open = true; 

    } else { 

     el.find('.filter__line:first').velocity({rotateZ: '0deg'}, 200, function(){ 
      $(this).removeClass('filter__line--thick').velocity({translateY: [-5, 0]}, 200); 
     }); 

     el.find('.filter__line:last').velocity({rotateZ: '0deg'}, 200, function(){ 
      $(this).removeClass('filter__line--thick').velocity({translateY: [5, 0]}, 200); 
     }); 

     open = false; 
    } 

}); 

http://codepen.io/matt3224/pen/zGgKwP?editors=011

感謝

Answer 1

我用速度很長一段時間，衝進那些之類的問題很多。如果你在做任何複雜的動畫，我會強烈建議GSAP。 GSAP時間線可讓您輕鬆播放，暫停和反轉一系列動畫，並且語法非常乾淨。您可以在GSAP website上找到更多信息。

I made a quick demo using this technique on Codepen。

這裏的腳本如下：

$(document).ready(function(){ 

var top = $('.part-1'); 
var mid = $('.part-2'); 
var btm = $('.part-3'); 

var tl = new TimelineMax().pause(); 
    tl.to(mid, 0.3, {x:100, opacity:0}) 
    .to(top, 0.3, {rotation:18, transformOrigin:"left top"},"second") 
    .to(btm, 0.3, {rotation:-18, transformOrigin:"left bottom"},"second"); 

var active = false; 

    $('h1').click(function(){ 
    if(!active){ 
     tl.play(); 
     active = true; 
    } else { 
     tl.reverse(); 
     active = false; 
    } 
    }); // end of click 

}); // end of ready