javascript – 制作旋转动画：慢慢地开始和结束,但在中间快速

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

图表看起来像这样：

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

如何将此路径应用于jQuery动画功能？

目前我有这个：

function spin() {
  var $myElm = $(".myClass");

  function rotate(degrees) {
    $myElm.css({
      '-webkit-transform': 'rotate(' + degrees + 'deg)','-moz-transform': 'rotate(' + degrees + 'deg)','-ms-transform': 'rotate(' + degrees + 'deg)','transform': 'rotate(' + degrees + 'deg)'
    });
  }
  $({
    deg: 0
  }).animate({
    deg: 360 * 40
  },{
    duration: 7000,step: function() {
      var deg = this.deg;
      rotate(deg);
    }
  });
}

spin();

.myClass {
  position: fixed;
  top: 30px;
  left: 30px;
  height: 200px;
  width: 200px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass"></div>

这有效,但它应该更平缓减速.我怎样才能做到这一点？

解决方法

尝试使用 jQuery Easing easeInOutQuart函数;如果this.deg：步骤函数的Now参数小于6000或大于8000,则将变量deg设置为现在除以8,这是14400的均匀除数：360 * 40

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

/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandBox/jquery/easing/
 *
 * Uses the built in easing capabilities added In jQuery 1.1
 * to offer multiple easing options
 *
 * TERMS OF USE - jQuery Easing
 * 
 * Open source under the BSD License. 
 * 
 * copyright © 2008 George McGinley Smith
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice,this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice,this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE copYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND fitness FOR A PARTIculaR PURPOSE ARE disCLaimED. IN NO EVENT SHALL THE
 *  copYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,*  EXEMPLARY,OR CONSEQUENTIAL damAGES (INCLUDING,PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE,DATA,OR PROFITS; OR BUSInesS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH damAGE. 
 *
*/

// t: current time,b: begInnIng value,c: change In value,d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,{
	
	easeInOutQuart: function (x,t,b,c,d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	}
});

/*
 *
 * TERMS OF USE - EASING EQUATIONS
 * 
 * Open source under the BSD License. 
 * 
 * copyright © 2001 Robert Penner
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms,EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH damAGE. 
 *
 */

function spin() {
  var $myElm = $(".myClass");

  function rotate(degrees) {
    
    $myElm.css({
      '-webkit-transform': 'rotate(' + degrees + 'deg)','transform': 'rotate(' + degrees + 'deg)'
    });
    
    
  }
  
  $({
    deg: 0
  }).animate({
    deg: 360 * 40
  },step: function(Now) {
      var deg = Now < 6000 || Now > 8000 ? Now / 8 : Now;
      rotate(deg);
    }
  });
}

spin();

.myClass {
  position: fixed;
  top: 30px;
  left: 30px;
  height: 200px;
  width: 200px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass"></div>