我想要一个旋转动画应用于一个元素：旋转应该开始缓慢然后变得越来越快,然后它将达到一个点,它将继续非常快,然后非常缓慢地变得越来越慢,直到它将停.
图表看起来像这样：
^ 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>
