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

How to create smarter toggle animation using velocity

本文关键字：动画 智能 何使用 速度 创建      更新时间：2023-09-26

我使用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?编辑= 011

谢谢

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

我在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
相关文章：