資訊專欄INFORMATION COLUMN
摘要：為回調(diào)函數(shù)等于已過時間初始值距離總時間勻速加速曲線減速曲線加速減速曲線加加速曲線減減速曲線加加速減減速曲線正弦衰減曲線彈動漸入正弦增強(qiáng)曲線彈動漸出回退加速回退漸入回縮的距離彈球減振彈球漸出
function doMove(obj, json, time, fx, fn) //fn為回調(diào)函數(shù)
{
clearInterval(obj.iTimer);
var fx = fx || "linear";
var d = time || 1000;
var j = {}
for (var attr in json) {
j[attr] = {};
if (attr == "opacity") {
j[attr].b = Math.round(css(obj, attr) * 100);
} else {
j[attr].b = parseInt(css(obj, attr));
}
j[attr].c = json[attr] - j[attr].b;
}
var t1 = +new Date(); //等于new Date().getTime();
obj.iTimer = setInterval(function() {
var t = +new Date() - t1;
if (t >= d) {
t = d;
}
for (var attr in json) {
var v = Tween[fx](t, j[attr].b, j[attr].c, d);
if (attr == "opacity") {
obj.style.opacity = v / 100;
obj.style.filter = "alpha(opacity="+v+")";
} else {
obj.style[attr] = v + "px";
}
}
if (t == d) {
clearInterval(obj.iTimer);
fn && fn();
}
}, 30);
}
function css(obj, attr)
{
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
var Tween = //t : 已過時間; b : 初始值; c : 距離; d : 總時間
{
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){ //正弦增強(qiáng)曲線（彈動漸出）
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;
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87593.html
摘要：運(yùn)動框架動起來進(jìn)行運(yùn)動的節(jié)點(diǎn)定時器你沒看錯，就是那么簡單。直接在定時器內(nèi)部，判斷到達(dá)目標(biāo)值，清除定時器就行拉運(yùn)動框架運(yùn)動終止進(jìn)行運(yùn)動的節(jié)點(diǎn)運(yùn)動終止條件。 轉(zhuǎn)自個人博客三省吾身丶丶原來是JS動畫效果，但是我會過頭再看的時候，發(fā)現(xiàn)太粗略了，于是重新寫了一篇。喜歡別只收藏啊，點(diǎn)個推薦，大兄弟^ ^！ 運(yùn)動框架的實(shí)現(xiàn)思路 運(yùn)動，其實(shí)就是在一段時間內(nèi)改變left、right、width、hei...
摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅(qū)動，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對...
摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅(qū)動，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。 第一階段： HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、 JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對...
摘要：運(yùn)動做鏈?zhǔn)竭\(yùn)動的時候可以使用回調(diào)函數(shù)，多寫幾個運(yùn)動。然后逐一運(yùn)動這些調(diào)用。默認(rèn)是，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行?？蛇x參數(shù)規(guī)定是否立即完成當(dāng)前動畫。清除當(dāng)前運(yùn)動停止滑動點(diǎn)擊這里，向下滑動面板 在前面封裝的move.js框架，在jquery中有同樣封裝好的功能animate()。使用方法非常類似，下面我們看看animate的使用方法，有了原生的運(yùn)動方法，然后再使用jq...
閱讀 2881·2019-08-30 15:44
閱讀 1913·2019-08-29 13:59
閱讀 2852·2019-08-29 12:29
閱讀 1099·2019-08-26 13:57
閱讀 3210·2019-08-26 13:45
閱讀 3342·2019-08-26 10:28
閱讀 857·2019-08-26 10:18
閱讀 1706·2019-08-23 16:52
