制作旋转动画：慢慢开始和结束，但在中间快速

时间：2016-02-07 12:10:06

标签： javascript jquery animation

我希望将一个旋转动画应用于一个元素：旋转应该开始缓慢然后变得越来越快，然后它将达到一个点，它将继续非常快，然后非常缓慢< / em>越来越慢，直到它停止。

图表看起来像这样：

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

如何将此路径应用于jQuery animate函数？

目前我有这个：

＆＃13;
＆＃13; 
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();
＆＃13; 
.myClass {
  position: fixed;
  top: 30px;
  left: 30px;
  height: 200px;
  width: 200px;
  background: red;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass"></div>
＆＃13;
＆＃13;
＆＃13;

这样可行，但它应该更平缓减速。我怎么能这样做？

5 个答案:

答案 0 :(得分：5)

尝试使用jQuery Easing 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);
    }
  });


/*
 * 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, BUT NOT LIMITED TO, 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, 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, BUT NOT LIMITED TO, 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. 
 *
 */

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,
    easing: "easeInOutQuart",
    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>

答案 1 :(得分：2)

您可以添加所需的元素类，然后在.css文件中创建另一个类，如.effect并为其编写css 

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

然后在.js文件中，在动作或事件调用函数

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

它的样式表中有一些css的jquery

答案 2 :(得分：1)

Ease-in-out可用于css过渡和动画，而不是变换。 您应该使用转换来实现所需效果，并在transition-timing-function中使用轻松输入

答案 3 :(得分：1)

您可以尝试在css过渡中使用ease-in-out。如果要定义更具体的动画，可以尝试使用类似这样的工具来定义自己的动画：ceaser

例如：

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

编辑：如果您只想使用jQuery的animate功能，可以尝试使用jQuery easing plugin 

animate({deg: 360 * 40}, {duration: 1000, easing: 'easeInOutCubic'})

请参阅此备忘单中的可用缓动动画：http://easings.net/

答案 4 :(得分：1)

@IonicăBizău 您可以通过编写

来控制动画时序 
     animation-timing-function: ease-in-out;

或者如果您正在使用转换

     transition-timing-function: ease-in-out;
相关问题
最新问题