javascript - 如何使用速度创建更智能的切换动画

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 上找到更多信息.

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