从animate.css模拟bounceInDown缓动效果

Question

animate.css

我正在编写老虎机游戏，我的代码类似于：JSFiddle

$('#test').css( "margin-top", 7400px );
$('#test').animate(
    {"margin-top": "0px"},
    {'duration' : 3000, 'easing' : $.bez([0,0,0.9,1.1])}
);

我对结果不满意。最后它似乎并不顺畅。是否有任何库具有像animate.css那样的缓动效果？ animate.css的bounceInDown效果只是从我无法控制的帧外移动（我想？）。我正在写的游戏中的元素必须从一个点移动到另一个点。我尝试了jquery附带的easeOut效果，但我再次对它不满意。

Answer 1

如果你想要它顺利地反弹，我建议使用多个关键帧（因为你当前的动画仅限于最终的keyfrome和一个贝塞尔函数），但不幸的是 jQuery的animate（）不支持多个关键帧。所以我建议使用CSS。或者查看一些其他库，例如jQuery.Keyframes。

将关键帧想象为开始关键帧和结束关键帧之间的步骤或状态：

如果您喜欢 animate.css 的动画，只需查看他们在动画中执行的操作（我删除了前缀以缩短此编码）。

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

受到它的启发，也许会改变它对你有利。