如何使用velocity创建更智能的切换动画

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

我使用Velocity很长一段时间了，遇到了很多这样的问题。如果你在做任何复杂的动画，我强烈建议你使用GSAP。GSAP时间线允许您轻松地播放、暂停和反转一系列动画，并且语法简洁。你可以在GSAP website上找到更多信息。

。

下面是脚本的样子：

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