JavaScript の小さなアニメーション コンポーネントと実装コード_PHP チュートリアル

一般的なアニメーション効果を作成するには、js はどのように完成させるのでしょうか? 例を見てください

コードをコピーします コードは次のとおりです:

setInterval(function(){
element.style.left = parseFloat(element.style.left) +(n) +'px'

; テスト<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0"> ... 、アニメーションを終了するために使用されます。 </div>すべての setInterval は、スレッド ID に似た値を返します。 var interval =setInterval(function(){
element.style.left =parseFloat(element.style.left) +(n) +'px'; } 、 10); clearInterval (interval) を使用してアニメーションの再生を終了します。 (element.style.left) +2 +'px' },10);

が 500px を超えるとアニメーションが停止し、要素は移動しなくなります。



テスト





[Ctrl+A Select All 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

ただし、上記のアニメーションは比較的硬いので、別のタイムライン アニメーションがあります。
例を見てください:

var element = document.getElementById('test1'); var start = +new Date,dur=1000,finish = start+dur; <div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">interval = setInterval(function(){ </div>var time = +新しい日付、pos = 終了? 1 : (時間-開始)/dur;
if(時間>終了); interval) ; } },10); start はターゲットアニメーションの開始時間です ( +new Date は実際には new Date().getTime() です)

dur はアニメーションの実行に必要な合計時間です
finish はターゲット アニメーションの終了時間
pos = time > end ? 1 : (time-start)/dur; // pos は時間の比率
(100*pos) と考えることができ、100 は距離を表します。距離が 500px の場合は、500 *pos に設定します。
time>finish: 時間を超えるとアニメーションを停止します。
テスト





[Ctrl+A を押してすべてを選択します 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

とてもわかりました。簡単なアニメーション効果を記述する方法はすでにわかりました
見てみましょう。小さなもの 完全なアニメーション コンポーネントの書き方:



コードをコピーします

コードは次のとおりです:<div class="codebody" id="code65457"> <br>(function($,name){ <br>var parseEl = document.createElement('div') <br>, <br>props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ <br>'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth Bottom color fontSize '+ <br>'フォントウェイト高さ左文字間隔行高さマージン下マージン左マージン右マージン上最大高さ '+ <br>'max幅最小高さ最小幅不透明度アウトライン色のアウトラインオフセットアウトライン幅パディング下パディング左 '+ <br>' パディング右パディング右上のテキストインデント上幅 wordSpacing zIndex').split(' ') <br>, <br>normalize =function ( style){ <br>var css, <br>rules = {}, <br>i = props.length, <br>parseEl.innerHTML = '<div style="'+style+'"></div>'; css = parseEl.childNodes[0].style; <br>while(i--) if(v = css[props[i]]) rules[props[i]] = <br>return rules; <br>color = function(source,target,pos){ <br>var i = 2, j, c, tmp, v = [], r = []; <br>while(j=3,c=arguments[i-1], i--) <br>if(s(c,0)=='r') { c = c.match(/d+/g) while(j--) v.push(~~c[j]); } else { <br>if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c ,3)+s(c,3); <br>while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); <br>while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp255?255:tmp); <br>return 'rgb('+r.join(',')+')'; <br>}, <br>parse = function(prop){ <br>var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,''); <br>戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; <br>}, <br>s = function(str, p, c){ <br>return str.substr(p,c||1);//カラー用 <br>}, <br>interpolate =function(source,target,pos){ <br>return (ソース+(ターゲットソース)*pos).toFixed(3); <br>}, <br>flower = function(el, style,opts,after){ <br>var el = document.getElementById(el), //通过id获取元素对象 <br>opts = opts || {}、<br>target = Normalize(style)、<br>comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null), //ie和w3c兼容、获取样式 <br>prop, <br>current = {}, <br>start = +new Date, //開始時間间 <br>dur = opts.duration||200, //イベント実行、默认は200 <br>finish = start+dur, //終了時間 <br>interval, <br>easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; <br>for(ターゲット内のプロパティ) current[prop] = parse(comp[prop]); <br>interval = setInterval(function(){ <br>var time = +new Date, <br>pos = time>finish ? 1 : (time-start)/dur; <br>for(prop in target){ <br>el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; <br>} <br>if(time>finish) { <br>clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); <br>}; <br>$[名前] = 花; <br>})(ウィンドウ,"花"); <br><br> <br><br><br><br>复制代码</div> <br>代码如下:<div class="codetitle"> <span style="CURSOR: pointer" onclick="doCopy('code47704')"> <u>var parse = function(prop){ </u>var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,' '); </span>戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; </div>} <div class="codebody" id="code47704">var p = parseFloat(prop) 意思 : 500px => 500; <br>q = prop.replace(/^[-d.]+/,''); 500ピクセル =>ピクセル; <br>戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; つまり、結果が取得された場合は色値(#号があるため)、戻り値{ v: q, f: color, u: ''} u を表すのは、f は一色関数(後面会讲到); <br>var s = function(str, p, c){ return str.substr(p,c||1); <br><br><br>s 関数は、文字列をインターセプトし、最終結果を返すために使用されます。 <br>color 関数は、「rgb(x,x,x)」の形式でカラー値を一律に返します。 <br>normalize 関数は、名前と要素によって実行される CSS 属性の値<br>while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v); <br>コード行を分割します。仕組み <br>while(i--){ <br>//A = 記号がここで使用され、代入演算が最初に実行されます。これが存在しない場合、if は 1 つで 2 つ鳥を殺します。 stone: ) <br>if(v = css[props[i]]) { <br>rules[props[i]] = parse(v) //新しいオブジェクトに代入します, <br>} <br>} <br>補間関数 return (source+(target; -source)*pos).toFixed(3); <br>toFixed 0.000000001 が 1e-9 になってしまうなど、toFixed、toFixed (n) で解決できます。 )、n は保持する小数点以下の桁数を表します<br>el.currentStyle? el.currentStyle: getComputedStyle(el, null); <br>これは実際には複数のブラウザーと互換性があります: JS を取得するコードを参照してください。最終スタイル [getStyle] <br>Fflower の 4 つのパラメータ el ターゲット オブジェクト、スタイルは最終スタイル、opts はパラメータ オプション (期間、イージング関数、その後に実行されるコールバック) を含み、後の 4 番目は最後に実行されたコールバックです。イージングでは、さまざまなイージング アルゴリズムを使用して、<br> などの要素のモーション状態を変更できます。 <br><br><div class="codetitle">コードをコピーする<span style="CURSOR: pointer" onclick="doCopy('code74407')"><u> コードは次のとおりです。 )) { </u>return (7.5625*pos*pos); </span>} else if (pos return (7.5625*(pos-=(1.5/2.75))*pos + .75); <div class="codebody" id="code74407">} else if (pos < (2.5/2.75)) { <BR>return (7.5625*( pos-=(2.25/2.75))*pos + .9375) <BR>} else { <BR>return (7.5625*(pos-=) (2.625/2.75))*pos + .984375); <BR>} <BR>} <BR>(function( $,name){ <BR>window.flower = flowers; <BR>})(window,'flower');内部関数は解放され、この呼び出しを通じてのみインターフェイスを公開します。それ以外の場合、外部関数は匿名通信でフラワーにアクセスできません。<BR>呼び出し例を見てください:) <BR><BR><BR><BR>コードをコピーします<BR><BR> コードは次のとおりです:</div><div class="codebody" id="code94297"> <BR><div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div> <br><div id="test2" style="border:0px Solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div> <br><スクリプト> <br>(function($,name){ <br>var parseEl = document.createElement('div') <br>, <br>props = ('backgroundColor borderBottomColor borderBottomWidth borderLeftColor borderLeftWidth '+ <br>'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth Bottom color fontSize '+ <br>'fontWeight左の文字の高さ間隔線高さのマージン下マージン左マージン右マージン上最大高さ '+ <br>'max幅最小高さ最小幅不透明度アウトラインカラーアウトラインオフセットアウトライン幅パディング下パディング左 '+ <br>' パディング右パディング右上のテキストインデント上幅 wordSpacing zIndex').split(' ') <br>, <br>normalize =function (style ){ <br>var css, <br>rules = {}, <br>i = props.length, <br>parseEl.innerHTML = '<div style="'+style+'"></div>'; = parseEl.childNodes[0].style; <br>while(i--) if(v = css[props[i]]) ルール[props[i]] = <br>return ルール; color = function(source,target,pos){ <br>var i = 2, j, c, tmp, v = [], r = [] <br>while(j=3,c=arguments[i-1],i --) <br>if(s(c,0)=='r') { c = c.match(/d+/g); while(j--) v.push(~~c[j]); } else { <br>if(c.length==4) c='#'+s(c,1)+s(c,1)+s(c,2)+s(c,2)+s(c ,3)+s(c,3); <br>while(j--) v.push(parseInt(s(c,1+j*2,2), 16)); <br>while(j--) { tmp = ~~(v[j+3]+(v[j]-v[j+3])*pos); r.push(tmp255?255:tmp); <br>return 'rgb('+r.join(',')+')'; <br>}, <br>parse = function(prop){ <br>var p = parseFloat(prop), q = prop.replace(/^[-d.]+/,''); <br>戻り値はNaN(p) ? { v: q, f: カラー, u: ''} : { v: p, f: 補間, u: q }; <br>}, <br>s = function(str, p, c){ <br>return str.substr(p,c||1); <br>}, <br>interpolate =function(source,target,pos){ <br>return (source+(target-source)*pos).toFixed(3); <br>}, <br>flower = function(el, style,opts,after){ <br>var el = document.getElementById(el), <br>opts = opts || {}、<br>target = Normalize(style)、<br>comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null)、<br>prop、<br>current = {}、<br>start = +new Date、<br>dur = opts.duration||200、<br>finish = start+dur、<br>interval、<br>easing =オプトイージング || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }; <br>for(ターゲット内のプロパティ) current[prop] = parse(comp[prop]); <br>interval = setInterval(function(){ <br>var time = +new Date, <br>pos = time>finish ? 1 : (time-start)/dur; <br>for(prop in target){ <br>el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u; <br>} <br>if(time>finish) { <br>clearInterval(interval); opts.after && opts.after(); after && setTimeout(after,1); <br>}; <br>$[名前] = 花; <br>})(ウィンドウ,"花"); <br>(function(){ <br>var bounce = function(pos) { <br>if (pos < (1/2.75)) { <BR>return (7.5625*pos*pos); <BR>} else if (pos < (2/2.75) )) { <BR>return (7.5625*(pos-=(1.5/2.75))*pos + .75); else if (pos < (2.5/2.75)) { <BR>return (7.5625*(pos-=( 2.25/2.75))*pos + .9375); <BR>} else { <BR>return (7.5625*(pos-=(2.625/2.75))*pos + .984375); <BR>} <BR>} <BR>flower('test2', ' left:300px;padding:10px;border:50px Solid #ff0000', { <BR>duration: 1500, <BR>after: function(){ <BR>flower('test1', 'background:#0f0;left:100px;padding-bottom: 100px;不透明度:1', { <BR>期間: 1234、イージング: バウンス <BR>}); <BR>} <BR>}); <BR></スクリプト> <br><br> <br>参考: http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html <br> <br><br><br>http://www.bkjia.com/PHPjc/322028.html<br><br>www.bkjia.com</div> <br>tru​​e<p align="left">http://www.bkjia.com/PHPjc/322028.html</p> <div style="display:none;"> <span id="url" itemprop="url">技術記事</span><span id="indexUrl" itemprop="indexUrl">以下の例を参照: setInterval(function(){ element.style.left =parseFloat(element.style.left) +(n) +'p. ..</span><span id="isOriginal" itemprop="isOriginal"></span><span id="isBasedOnUrl" itemprop="isBasedOnUrl"> </span><span id="genre" itemprop="genre"></span> </div> </div> </div>