JavaScript の小さなアニメーション コンポーネントと実装コード
- WBOYオリジナル
- 2016-06-13 12:15:381190ブラウズ
做一个普通的动画效果,js是怎么完成的呢.看一下例子
复制代码 代码如下:
setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px';
},10);
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
用window.setInterval 动画函数 ,每隔10毫秒 都会去执行一次动画 ;
和 set配套的是 clearInterval 函数，用来结束动画。
每隔setInterval 都会返回一个类似于线程id的值 ;
var interval =setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px';
},10);
用 clearInterval (interval) 既可结束动画播放.
interval = setInterval(function(){
if(parseFloat(element.style.left)>500) clearInterval(interval)
element.style.left =parseFloat(element.style.left) +2 +'px';
},10);
超过500px的时候，动画就会停止， element将不在移动。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
但是上面的动画是比较生硬的，然后我们有另外一种时间线动画。
看例子:
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 为目标动画的开始时间 ( +new Date 其实就是 new Date().getTime() )
dur 为 动画执行一共所需要的时间
finish 是目标动画结束的时间
pos = time > finish ? 1 : (time-start)/dur; //可以把pos 想象成频率 ，一个时间比
(100*pos) ，100代表距离,，如果距离为500px 就设置为 500*pos;
time>finish : 如果超过时间，就停止动画!
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
很好，到这里我们已经知道一个简单动画效果是怎么样写的了.
再来看一个小型的完整的动画组件是如何写的 :
复制代码 代码如下:
(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 = '
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
リターンルール;
},
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(tmp255?255:tmp);
return 'rgb(' r.join(',') ')';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[-d.] /,'');
return isNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, 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), //通过id获取元素对象
opts = opts || {}、
target = Normalize(style)、
comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), //ie和w3c兼容，获取样式
prop,
current = {},
start = new Date, //开始時間间
dur = opts.duration||200, //イベントを実行，默认は200
finish = start dur, //終了時間间
interval,
easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) 0.5; };
for(ターゲット内のプロパティ) 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; (時間>終了) {
clearInterval(interval); after && setTimeout(after,1);,10);
};
$[名前] = 花;
})(ウィンドウ,"花");
复制代码代码如下:
var parse = function(prop){var p = parseFloat(prop), q = prop.replace(/^[-d.] /,'');
return isNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q };
}
var p = parseFloat(prop) 意思あり : 500px => 500;
q = prop.replace(/^[-d.] /,''); 500ピクセル =>ピクセル;
return isNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; つまり、結果が取られる場合は色値(#号があるため)、戻り値{ v: q, f: color, u: ''} u を表すのは、f は一色関数(後面会讲到);
var s = function(str, p, c){ return str.substr(p,c||1); }
s 関数数は来截取字符列，并推最後の結果は
normalize 関数数 返される json オブジェクト、オブジェクトの中に実行すべき要素が含まれる css プロパティ名と值
while(i--) if(v = css[props[i]]) rules[props[i]] =解析(v);
行一行拆开，底まで見る
while(i--){
//此処用了一 = 号，先行赋值运算，如果不存在之 if 不通，一举两得 : )
if(v = css[props[i]]){
rules[props[i]] = parse(v); //新しいオブジェクト,
}
}
interpolate関数数中 return (source (target-source)*pos).toFixed(3);
toFixed は、0.000000001 などの小さな数を理解するためのものです。 会变成 1e-9; 不是我们想的結果，toFixed 可解，toFixed (n)，其中n 保持小数点后几位
el.currentStyle ? el.currentStyle : getComputedStyle(el, null);
これは、互換性のある多浏览器、获取元素の一句代コード 具体参考 : JS 获取最终样式 【getStyle】
flower の 4 つのパラメータ el 目标对、style は最终样式、opts、パラメータ选项に含まれます (dur時間、緩和関数、終了後に実行されるコールバック)、4 番目以降は最後に実行されるコールバックです。
opts.easing は、さまざまな動作計算法を利用して要素の動作状態を変更できます。
如
复制代代码如下:
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 = flowers;
})(window,'flower');
これは実際には内部関数の自由であり、この調整によってのみインターフェイスが公開されます。
复制代 代码如下:
(function($,name){
var parseEl = document.createElement('div')
,
props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth 下部の色のフォントサイズ '
' フォントのウェイト高さ左文字間隔行高さマージン下マージン左マージン右マージン上最大高さ '
'max幅最小高さ最小幅不透明度アウトラインカラーアウトラインオフセットアウトライン幅パディング下部パディング左 '
' パディング右パディング右上のテキストインデント上部幅 wordSpacing zIndex').split (' ')
,
normalize =function (style){
var css,
rules = {},
i = props.length,
v; .innerHTML = '';
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(tmp255?255:tmp);
return 'rgb(' r.join(',') ')';
},
parse = function(prop){
var p = parseFloat(prop), q = prop.replace(/^[-d.] /,'');
return isNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, 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 = 新しい日付、
dur = opts.duration||200、
finish = start期間、
間隔、
イージング = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) 0.5; };
for(ターゲット内のプロパティ) 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; (時間>終了) {
clearInterval(interval); after && setTimeout(after,1);,10);
};
$[名前] = 花;
})(ウィンドウ,"花");
(function(){
var bounce = function(pos) {
if (pos return (7.5625*pos*pos);
} else if (pos return (7.5625*(pos-=(1.5/2.75))*pos .75); else if (pos 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, イージング: bounce
});
}
})
});
参考: http://scripty2.com/doc/scripty2 fx/s2/fx/transitions.html