制作旋转动画:慢慢地开始和结束,但在中间快速 [英] Make a rotate animation: start and end slowly, but fast in the middle
问题描述
我希望将一个旋转动画应用于一个元素:旋转应该开始缓慢然后变得越来越快,然后它将达到一个点,它将继续非常快,然后非常缓慢越来越慢,直到它停止。
I want to have a spinning animation applied to an element: the rotation should start slowly and then become faster and faster, then it will reach a point from where it will continue to be very fast and then very slowly go slower and slower until it will stop.
图表如下所示:
^ Speed
| ********
| ** ***
| * ****
| * ***
| * ***
+*-------------------------***-> Time
如何将此路径应用于jQuery animate
功能?
How can I apply this path to the jQuery animate
function?
目前我有这个:
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>
这样可行但速度应该更平缓。我怎么能这样做?
This works but it should have a smoother slowing down. How can I do that?
推荐答案
尝试使用 jQuery Easing easeInOutQuart
function; if this.deg
: now
参数
函数是小于 6000
或大于 8000
,设置变量 deg
到现在
除以 8
,这是 14400 $ c $的偶数除数c>:
360 * 40
Try using jQuery Easing easeInOutQuart
function ; if this.deg
: now
parameter of step
function is less than 6000
or greater than 8000
, set variable deg
to now
divided by 8
, which is an even divisor of 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>
这篇关于制作旋转动画:慢慢地开始和结束,但在中间快速的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!