|
|
復(fù)制代碼 代碼如下:
setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px';
},10);
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
用window.setInterval 動(dòng)畫(huà)函數(shù) ,每隔10毫秒 都會(huì)去執(zhí)行一次動(dòng)畫(huà) ;
和 set配套的是 clearInterval 函數(shù)，用來(lái)結(jié)束動(dòng)畫(huà)。
每隔setInterval 都會(huì)返回一個(gè)類(lèi)似于線程id的值 ;
var interval =setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px';
},10);
用 clearInterval (interval) 既可結(jié)束動(dòng)畫(huà)播放.
interval = setInterval(function(){
if(parseFloat(element.style.left)>500) clearInterval(interval)
element.style.left =parseFloat(element.style.left) +2 +'px';
},10);
超過(guò)500px的時(shí)候，動(dòng)畫(huà)就會(huì)停止， element將不在移動(dòng)。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
但是上面的動(dòng)畫(huà)是比較生硬的，然后我們有另外一種時(shí)間線動(dòng)畫(huà)。
看例子:
var element = document.getElementById('test1');
var start = +new Date,dur=1000,finish = start+dur;
interval = setInterval(function(){
var time = +new Date,
pos = time > finish ? 1 : (time-start)/dur;
element.style.left = (100*pos)+"px";
if(time>finish) {
clearInterval(interval);
}
},10);
start 為目標(biāo)動(dòng)畫(huà)的開(kāi)始時(shí)間 ( +new Date 其實(shí)就是 new Date().getTime() )
dur 為 動(dòng)畫(huà)執(zhí)行一共所需要的時(shí)間
finish 是目標(biāo)動(dòng)畫(huà)結(jié)束的時(shí)間
pos = time > finish ? 1 : (time-start)/dur; //可以把pos 想象成頻率 ，一個(gè)時(shí)間比
(100*pos) ，100代表距離,，如果距離為500px 就設(shè)置為 500*pos;
time>finish : 如果超過(guò)時(shí)間，就停止動(dòng)畫(huà)!
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
很好，到這里我們已經(jīng)知道一個(gè)簡(jiǎn)單動(dòng)畫(huà)效果是怎么樣寫(xiě)的了.
再來(lái)看一個(gè)小型的完整的動(dòng)畫(huà)組件是如何寫(xiě)的 :
復(fù)制代碼 代碼如下:
(function($,name){
var parseEl = document.createElement('div')
,
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+
'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ')
,
normalize =function (style){
var css,
rules = {},
i = props.length,
v;
parseEl.innerHTML = '<div style="'+style+'"></div>';
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
return rules;
},
color = function(source,target,pos){
var i = 2, j, c, tmp, v = [], r = [];
while(j=3,c=arguments[i-1],i--)
if(s(c,0)=='r') { c = c.match(//d+/g); while(j--) v.push(~~c[j]); } else {
if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3);
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); }
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); }
return 'rgb('+r.join(',')+')';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[/-/d/.]+/,'');
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
},
s = function(str, p, c){
return str.substr(p,c||1);//color 用
},
interpolate =function(source,target,pos){
return (source+(target-source)*pos).toFixed(3);
},
flower = function(el, style,opts,after){
var el = document.getElementById(el), //通過(guò)id獲取元素對(duì)象
opts = opts || {},
target = normalize(style),
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), //ie和w3c兼容，獲取樣式
prop,
current = {},
start = +new Date, //開(kāi)始時(shí)間
dur = opts.duration||200, //執(zhí)行事件，默認(rèn)為200
finish = start+dur, //結(jié)束時(shí)間
interval,
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };
for(prop in target) current[prop] = parse(comp[prop]);
interval = setInterval(function(){
var time = +new Date,
pos = time>finish ? 1 : (time-start)/dur;
for(prop in target){
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
}
if(time>finish) {
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1);
}
},10);
};
$[name] = flower;
})(window,"flower");
復(fù)制代碼 代碼如下:
var parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[/-/d/.]+/,'');
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
}
var p = parseFloat(prop) 意思是 : 500px => 500;
q = prop.replace(/^[/-/d/.]+/,''); 500px => px;
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q }; 意思是 如果取的是顏色值(因?yàn)閹в?號(hào))，返回{ v: q, f: color, u: ''} u 代表代為,f是一個(gè)color函數(shù)(后面會(huì)講到);
var s = function(str, p, c){ return str.substr(p,c||1); }
s 函數(shù)是用來(lái)截取字符串，并將最后結(jié)果返回
color 函數(shù) 將顏色值，最后統(tǒng)一返回 "rgb(x,x,x)" 的形式
normalize 函數(shù) 返回一個(gè)json對(duì)象,對(duì)象里包含了該元素要執(zhí)行的css屬性名和值
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
把一行代碼拆開(kāi)，看看到底如何作用
while(i--){
//這里用了一個(gè) =號(hào)， 先進(jìn)行賦值運(yùn)算，如果不存在之 if將不通過(guò)， 一舉兩得 : )
if(v = css[props[i]]){
rules[props[i]] = parse(v); //賦給新的對(duì)象,
}
}
interpolate函數(shù)中 return (source+(target-source)*pos).toFixed(3);
toFixed 是為了解決小數(shù)問(wèn)題，如 0.000000001; 會(huì)變成 1e-9; 不是我們想要的結(jié)果，通過(guò)toFixed 可以解決， toFixed (n)， 其中n代表保留小數(shù)點(diǎn)后幾位
el.currentStyle ? el.currentStyle : getComputedStyle(el, null);
這個(gè)其實(shí)兼容多瀏覽器,獲取元素的一句代碼 具體參考 : JS 獲取最終樣式 【getStyle】
flower的 4個(gè)參數(shù) el 目標(biāo)對(duì)象,style 是最終樣式,opts,是參數(shù)選項(xiàng)包括 (dur時(shí)間,easing緩懂函數(shù),after結(jié)束后運(yùn)行的callbak) ,第4個(gè)after是最后執(zhí)行的callbak;
opts.easing 可以利用各種緩動(dòng)算法，來(lái)改變?cè)氐倪\(yùn)動(dòng)狀態(tài);
如
復(fù)制代碼 代碼如下:
function bounce(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
}
}
(function($,name){
window.flower = flower;
})(window,'flower');
這樣其實(shí)就是讓內(nèi)部函數(shù)自由，并且只通過(guò)這個(gè)調(diào)用去暴露一個(gè)接口。不然外面的函數(shù)，訪問(wèn)不到匿名函授中的flower;
看一下調(diào)用的例子 : )
復(fù)制代碼 代碼如下:
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>
<script>
(function($,name){
var parseEl = document.createElement('div')
,
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+
'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ')
,
normalize =function (style){
var css,
rules = {},
i = props.length,
v;
parseEl.innerHTML = '<div style="'+style+'"></div>';
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
return rules;
},
color = function(source,target,pos){
var i = 2, j, c, tmp, v = [], r = [];
while(j=3,c=arguments[i-1],i--)
if(s(c,0)=='r') { c = c.match(//d+/g); while(j--) v.push(~~c[j]); } else {
if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c,3)+s(c,3);
while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); }
while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp<0?0:tmp>255?255:tmp); }
return 'rgb('+r.join(',')+')';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[/-/d/.]+/,'');
return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
},
s = function(str, p, c){
return str.substr(p,c||1);
},
interpolate =function(source,target,pos){
return (source+(target-source)*pos).toFixed(3);
},
flower = function(el, style,opts,after){
var el = document.getElementById(el),
opts = opts || {},
target = normalize(style),
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null),
prop,
current = {},
start = +new Date,
dur = opts.duration||200,
finish = start+dur,
interval,
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };
for(prop in target) current[prop] = parse(comp[prop]);
interval = setInterval(function(){
var time = +new Date,
pos = time>finish ? 1 : (time-start)/dur;
for(prop in target){
el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
}
if(time>finish) {
clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1);
}
},10);
};
$[name] = flower;
})(window,"flower");
(function(){
var bounce = function(pos) {
if (pos < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + .75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
}
}
flower('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
duration: 1500,
after: function(){
flower('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
duration: 1234, easing: bounce
});
}
});
})();
</script>
參考 : http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html
php技術(shù)：javascript 小型動(dòng)畫(huà)組件與實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
