Javascript 旋转动画：开始和结束缓慢，但在中间快

我想将旋转动画应用到一个元素：旋转应该缓慢开始，然后变得越来越快，然后它将到达一个点，从那里它将继续非常快，然后非常缓慢地变得越来越慢，直到它停止

图表如下所示：

^ Speed
|     ********
|   **        ***
|  *             ****
| *                  ***
| *                     ***
+*-------------------------***-> Time

如何将此路径应用于jQuery

动画

函数

目前我有：

函数spin（）{
var$myElm=$（“.myClass”）；
函数旋转（度）{
$myElm.css({
“-webkit变换”：“旋转（“+度+”度）”，
“-moz变换”：“旋转（“+度+”度）”，
“-ms变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）”
});
}
$({
度数：0
}).制作动画({
度数：360*40
}, {
持续时间：7000，
步骤：函数（）{
var deg=该度数；
旋转（度）；
}
});
}
自旋（）
.myClass{
位置：固定；
顶部：30px；
左：30px；
高度：200px；
宽度：200px；
背景：红色；
}
易入易出可用于css转换和动画，而不是转换。
您应该使用易入易出的转换计时功能来达到所需的效果
您可以尝试在css转换中使用
易入易出
。如果要定义更具体的动画，可以尝试使用以下工具定义自己的动画：

例如：

transition: all 500ms cubic-bezier(0.870, 0.025, 0.130, 0.985);

编辑：如果您只想为此使用jQuery的animate函数，可以尝试使用

请参阅此备忘单中的可用动画：
您可以添加所需的元素类，然后创建另一个类，如.effect，并在.css文件中为其编写css

      .effect {
      transform: rotate(360deg);
       -webkit.....
        -moz....
        }        

然后在.js文件中，在action或event call函数下编写

     $("class name you want to add effect to").addClass("effect");

它的jquery在您的样式表中包含了一些css
@IonicăBizău
可以通过写入来控制动画计时

     animation-timing-function: ease-in-out;

或者如果您使用的是转换，那么

     transition-timing-function: ease-in-out;

尝试使用
easeInOutQuart
函数；如果
this.deg
：
now
函数的
step
参数小于
6000
或大于
8000
，将变量
deg
设置为
now
除以
8
，这是
14400
的偶数除数：
360*40

 $({
    deg: 0
  }).animate({
    deg: 360 * 40
  }, {
    duration: 7000,
    easing: "easeInOutQuart",
    step: function(now) {
      var deg = now < 6000 || now > 8000 ? now / 8 : now;
      rotate(deg);
    }
  });


您需要使用
轻松进出
@PraveenKumar没有这样的轻松……发布代码？如何控制动画计时？可以在
立方贝塞尔
中定义4个以上的参数？不，看。是的，看了。但有什么办法解决这个问题吗？你能发布一个我可以测试的工作示例吗？你的代码不正确。实际上，如果没有定义正确的动画和关键帧，动画计时-功能将无法工作。为了使用动画，你必须重写你的动画代码。或者，如果你想进行转换，那么看看我之前对这个问题的回答。这是最好的答案。谢谢如何使它在中间部分旋转（中间和快速旋转步骤）？@离子-Bizüu尝试调整计算< <代码> > <代码>的条件，以设置<代码> DEG < /代码>；e、 例如，在plnkr用
1000
代替
6000
，
12000
代替
8000
，是的，我玩过，但无法在动画状态之间实现平滑过渡。应该有一个解决方案。：）@爱奥尼亚•比兹•尤最初考虑使用
css
动画、
@关键帧
替换
.animate（）
来微调动画部分；e、 g
20%
-
80%
的
@关键帧
可能需要声明
旋转
速度effect@IonicăBizău版本使用
css
动画
 $({
    deg: 0
  }).animate({
    deg: 360 * 40
  }, {
    duration: 7000,
    easing: "easeInOutQuart",
    step: function(now) {
      var deg = now < 6000 || now > 8000 ? now / 8 : now;
      rotate(deg);
    }
  });