js (2.5K)_jquery を使用して実装された jquery をシミュレートするカスタム アニメーションをアニメーション化する

後で知ったのですが、かなり良かったです。書き続けてもいいかもしれない。
このバージョンは基本的に jquery の animate と同じです。
つまり、効果は基本的に同じです。 (効率はまだテストされていません。);
プロのテスターがいる場合は、テストを手伝ってください。
1: 機能説明
主流のブラウザと互換性があります。
1: コールバック関数をサポートします。
3: アニメーションの遅延をサポートします。
5: 不透明度の透明度の変更をサポートします。 🎜>6: = -= *= /= 操作をサポート;
7: 単位操作 (px, %) をサポート
2: 使用説明書
jelle(A).animate(B, C , D);
A: アニメーション化する必要がある dom 要素の ID;
B: アニメーションの主要なパラメーター (例: {width:'100px) が渡されます。 ',height:' =100px ',opacity:0.5},
不透明度 -- 透明度の変更は = -= *= /= 操作をサポートします。
C: アニメーションの実行時間 (ミリ秒)、[オプションのデフォルトは 500 ミリ秒];
3: メソッドの説明
1: animate() メソッド
jelle ('cc').animate({width:'100px'},300,function(){alert('Complete')});//300ミリ秒でccの幅が100pxに変化するアニメーション 最後に「Complete」がポップアップ表示されます'
2:stop() メソッド
jelle('cc').stop();// cc オブジェクトで再生中のアニメーションを停止します。
3: late() メソッド
jelle('cc').lay(1000).animate({width:'100px'}); //cc の幅の変更は、次の遅延で実行されます。 1秒。
私は彼を改善し続けます。




コードをコピー

コードは次のとおりです:

var jelle = function(id){
var $ = function(id){ return document.getElementById(id) },
elem = $(id),//Object
f = 0、_this = {}、lazy = 10、lazyque = 10、//f アニメーション カウンター、遅延アニメーション遅延、lazyque キュー遅延
//演算子を変更してアニメーションを変えることができます
tween = function (t, b, c, d){ return - c * (t /= d) * (t - 2) b},
// adv は = -= *= /= 演算に使用されます
adv = function(val, b){
var va, re= /^([ -\*/]=)([-]?[d.] )/
if (re.test( val) ; ){
var reg = val.match(re);
reg[2] = parseFloat(reg[2]);
switch ( reg[1] ){
case ' = ':
va = reg[2];
case '-=':
case '*='; 🎜>va = b*reg[2] - b;
break
case '/=':
va = b/reg[2] - b;
return va;
}
return parseFloat(val) - b;
}
// elem.animate は現在の dom 要素で使用されるアニメーション キューを読み取ります
elem .animate = elem.animate || [];
//使用する関数を停止します
jelle[id]['stop'] = true; (jelle[id]['stop'])
// 統合されたキュー エントリは遅延を便利に設定し、停止するために使用されます
_this.entrance = function(fn, ags, Lazytime){
/ /fn 関数 ags パラメータの遅延時間の遅延時間の呼び出し
setTimeout(function(){
fn(ags[0], ags[1], ags[2]);
}, (lazytime || 0) );
}
// アニメーションを停止するこのメソッドはまだ利用できません
_this.stop = function(){
jelle[id]['stop'] = false; .animate .length=0;
$(id).animate.length=0;
return _this;
}
// キュー操作
_this.queue = function(){
if (elem.animate && f == elem.animate[0].length){
f = 0; // カウンタをクリア
elem.animate[0].callback ? .callback .apply(elem) : false;
// 実行を待機しているアニメーションがあるかどうかを判断します
if (elem.animate.length > 1){
elem.animate[0].callback = elem.animate [1].callback;
elem.animate = $(id).animate || [];// dom オブジェクトから最新のアニメーション キューを取得します
elem.animate.shift(); // 実行されたばかりの完了アニメーション キューをクリアします
$(id).animate = elem.animate;// 新しいキューを dom に更新します
var ea = elem.animate[0]
// 再生しますループ内のキュー アニメーション
for(var i = 0; i ea[i][0] === _this.entrance(_this.alpha ? 、[ea[i][ 1]、ea[i][2]]、lazyque):
_this.entrance(_this.execution, [ea[i][0], ea[i][1], ea[i][2] ]、lazyque);
}
}else{
elem.animate.length = 0; // キューはクリアされています
$(id).animate.length = 0; // キューはクリアされます
}
}
}
// 遅延メソッド、今後のキューのアニメーション遅延時間を設定します
_this.lay = function(val){
lateque = val;
return _this;
}
//アニメーションの変更
_this.execution = function(key, val, t){
//alert(val)
var s = (new Date()).getTime (), d=t || 500 ,
b = parseFloat(elem.style[key]) || 0 ,
c = adv(val, b) , // adv は = -= などの高度な操作を設定するために使用されます。
un = val.match(/d (. )/)[1];//unit
(function(){
var t = (new Date()).getTime( ) - s;
if (t > d){
t = d;
elem.style[key] = parseInt(t, b, c, d)) un;
_this.queue(); // オペレーション キュー
return _this;
elem.style[key] = parseInt(t, b, c, d)) un;
jelle[ id]['stop'] && setTimeout(arguments.callee, Lazy)
// _this.entrance(arguments.callee,[1,1,1], Lazy);
// argument.callee 匿名関数の再帰呼び出し
})
// エントリ
_this.animate = function(sty, t, fn){
// sty、t、fn はそれぞれ変更 パラメータキー、val フォーム、アニメーション時間、コールバック関数
var len = elem.animate.length; // len はアニメーションキューの長さをチェックします
elem.animate[ len] = [];
elem.animate [len].callback = fn;
//マルチキーループ設定変更
for(var i in sty){
elem.animate[len ].push([i, sty[i], t ]);
if(len == 0){
i == 'opacity' _this.entrance(_this.alpha, [sty[i] 、t]、lazyque) :
_this.entrance (_this.execution, [i, sty[i], t], lateque);
}
}
$(id).animate = elem.animate;// dom 要素の
return _this に新しいアニメーション キューを追加します
}
// 透明度変更のコード
_this.alpha = function(val, t){
var s = (new Date()).getTime (),
d = t || 500, b, c;
if( document.defaultView ){
b = document.defaultView.getComputedStyle (elem,null)['opacity'] || 1 ,
c = adv(val,b) * 100;
(function(){
var t = (new Date()).getTime () - s;
if(t > d){
t = d;
elem.style['opacity'] = tween(t, (100 * b), c, d) / 100;
_this.queue(); // キュー制御
return _this;
elem.style['opacity'] = tween(t, (100 * b), c, d ) / 100;
jelle[id][' stop'] && setTimeout(arguments.callee, Lazy)()
}else{
b = elem.currentStyle['filter '] ?
(elem.currentStyle['filter '].match(/^alpha(opacity=([d.] ))$/))[1]/100 : 1; val, b) * 100;
(function( ){
var t = (new Date()).getTime() - s;
if (t > d){
t = d;
elem.style['filter'] ='alpha(opacity=' tween(t, (100 * b), c, d) ')' // キューコントロール
return _this>}
elem.style['filter'] = 'alpha(opacity=' tween(t, (100*b) , c, d) ')';
jelle[id]['stop'] && setTimeout (arguments.callee、lazy);
})()
}
}
return
}

コードのパッケージ化ダウンロード

プログラムは毎日変更される場合があります。最新のアイニメイトが必要な場合は、メールでご連絡ください。

上記のコードは最新ではありません。

過去 2 日間にいくつかの間違いが修正されました。
この記事は Blog Park jelle ブログ http://www.cnblogs.com/idche/ からのものです。