零JS筆記 | javascript運動 | 时间版
jq的animate是典型的时间版框架 默認400ms
如中间放大，改width,height,left,top值
sMove2(this,{width:200,height:200,left:150,top:150})出现的bug，快结束时会抖动，速度没变，但移动距离变，所以时间上先后到达存在问题；
时间版算法根据Tween算法而来；
参考：http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
初始化: t = 時間，【可變】，b，初始值，c改變量，d:總時間 return目標點
如：div初始100,2s内变化到200,则,t = 0~2; b:100,c:200-100,d:2s;
var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b;
},
....因为可能多个值，所以设置iCur变量为{}，然后再for循环，初始化一0，判断是否opacity，初始化二：获取传值数据；
function tMove(obj, json,times,fx,fn) {
var iCur = {};//不變，不能寫在定時器裏 b
for(var attr in json){
iCur[attr] = 0;
if(attr=='opacity'){
iCur[attr] = Math.round(getStyle(obj.attr)*100)
}
else{
iCur[attr]=parseInt(getStyle(obj.attr));
}
}
clearInterval(obj._t)
obj._t = setInterval(function () {
for(var attr in json){
var value = Tween[fx](t,b,c,d) //目的，通過js獲取tbcd值
if(attr == 'opacity'){
obj.style.opacity = value/100;
obj.style.filter = 'alpha(opacity='+value+')';
}
else{
obj.style[attr] = value +'px' //value是不断变化的值，即Tween return回来的结果；
}
}
},13)
}以上说明即目的：获取在Tween内，tbce参数的值，之后再返回结果给value;
注意：设置定时器时，还需要一个循环；
function tMove(obj, json, times, fx, fn) {
if (typeof times == 'undefined') {
times = 400;
fx = 'linear';
}
if (typeof times == 'string') {
if (typeof fx == 'function') {
fn = fx;
}
fx = times;
times = 400;
}
else if (typeof times == 'function') {
fn = times;
times = 400;
fx = 'linear';
}
else if (typeof times == 'number') {
if (typeof fx == 'function') {
fn = fx;
fx = 'linear';
}
else if (typeof fx == 'undefined') {
fx = 'linear';
}
}
var iCur = {
}; //不變，不能寫在定時器裏 b
for (var attr in json) {
iCur[attr] = 0;
if (attr == 'opacity') {
iCur[attr] = Math.round(css(obj, attr) * 100);
}
else {
iCur[attr] = parseInt(css(obj, attr));
}
}
var startTime = now();
clearInterval(obj._t);
obj._t = setInterval(function () {
var changeTime = now();
var t = times - Math.max(0, startTime - changeTime + times);
//在time的範圍內越來越小 2000-0;
for (var attr in json) {
var value = Tween[fx](t, iCur[attr], json[attr] - iCur[attr], times); //目的，通過js獲取tbcd值
if (attr == 'opacity') {
obj.style.opacity = value / 100;
obj.style.filter = 'alpha(opacity=' + value + ')';
}
else {
obj.style[attr] = value + 'px';
}
}
if (t == times) {
clearInterval(obj._t);
fn && fn.call(obj);
}
}, 13)
}
function now() {
return (new Date()).getTime();
}
var Tween = {
linear: function (t, b, c, d) { //匀速
return c * t / d + b;
},
easeIn: function (t, b, c, d) { //加速曲线
return c * (t /= d) * t + b;
},
easeOut: function (t, b, c, d) { //减速曲线
return - c * (t /= d) * (t - 2) + b;
},
easeBoth: function (t, b, c, d) { //加速减速曲线 缓冲
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
}
return - c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInStrong: function (t, b, c, d) { //加加速曲线
return c * (t /= d) * t * t * t + b;
},
easeOutStrong: function (t, b, c, d) { //减减速曲线
return - c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeBothStrong: function (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;
},
elasticIn: function (t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return - (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
elasticOut: function (t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2, - 10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
elasticBoth: function (t, b, c, d, a, p) {
if (t === 0) {
return b;
}
if ((t /= d / 2) == 2) {
return b + c;
}
if (!p) {
p = d * (0.3 * 1.5);
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
if (t < 1) {
return - 0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
return a * Math.pow(2, - 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
},
backIn: function (t, b, c, d, s) { //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
backOut: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
backBoth: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
bounceIn: function (t, b, c, d) { //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d - t, 0, c, d) + b;
},
bounceOut: function (t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
}
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
},
bounceBoth: function (t, b, c, d) {
if (t < d / 2) {
return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
}
function css(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj) [attr]
}See the Pen vNWQej by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
在瀏覽器中，若定時器處於運動狀態時切換到其他頁面，如最小化，切換到其他標籤等操作，瀏覽器會默認將定時器走得很慢，可能出現bug,可使用window.onfocus && window.onblur解決；按實際情獎況而訂；
不可避免的JQ animate()擴展
$(function () {
$('#div1').click(function () {
$(this).animate({width:200,height:200},2000,'bounceIn')
})
$.extend(jQuery.easing,{
easeIn: function(x,t, b, c, d){ //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(x,t, b, c, d){ //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(x,t, b, c, d){ //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(x,t, b, c, d){ //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(x,t, b, c, d){ //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: 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;
},
elasticIn: function(x,t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(x,t, b, c, d, a, p){ //正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(x,t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(x,t, b, c, d, s){ //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(x,t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(x,t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(x,t, b, c, d){ //弹球减振（弹球渐出）
return c - this['bounceOut'](x,d-t, 0, c, d) + b;
},
bounceOut: function(x,t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(x,t, b, c, d){
if (t < d/2) {
return this['bounceIn'](x,t*2, 0, c, d) * 0.5 + b;
}
return this['bounceOut'](x,t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
})
})