JavaScript グラデーション効果ページ画像コントロール ページ 1/2_ページ背景

このプログラムを使用して、サイズ変更、位置変更、フェードインとフェードアウトなどの多くの一般的なアニメーション効果を実現します。
プログラムの説明: グラデーション効果の原理は、タイマーを使用して値を継続的に設定することです。効果を遅くしたい場合は、ステップ サイズを設定します (詳細については、JavaScript スプリング効果を参照してください)。
ここでは、グラデーションにできる属性 (透明度、幅、高さ、左、上) を統合し、同じグラデーション シリーズ (ステップ) を使用してグラデーションを同期し、同時に複数の属性グラデーションの効果を形成します。 。
以下が便利な箇所です:
[最終スタイル]
最終スタイルについては、JavaScript画像カット効果の横幅取得でも言及されており、幅は を使用して設定されます。高さを計算するときは、最初に最終スタイルの境界線の幅を減算する必要があります。
ここでは、muxrwc を使用して FF で currentStyle メソッドを実装し、FF と IE の両方が currentStyle から最終スタイルを取得できるようにしました:

if(!isIE){ 
HTMLElement.prototype.__defineGetter__("currentStyle", function () { 
return this.ownerDocument.defaultView.getComputedStyle(this, null); 
}); 
}

これを使用して境界線の幅を取得します:

this._xBorder = function(){ return (parseInt(obj.currentStyle.borderLeftWidth) + parseInt(obj.currentStyle.borderRightWidth)); } 
this._yBorder = function(){ return (parseInt(obj.currentStyle.borderTopWidth) + parseInt(obj.currentStyle.borderBottomWidth)); }

[幅または高さの優先]
幅または高さの優先とは、実際には、どちらかのグラデーションを最初に実行し、完了後にもう一方のグラデーションを実行することを意味します。
グラデーション プログラムでグラデーションを実行すると、グラデーションが完了したかどうかを示すブール値が返されます。

this.SetWidth() && this.SetHeight();

&& の特性により、次のようになります。 this.SetWidth() は true を返します。その場合にのみ this.SetHeight() が実行されます。これも良い手法です。
同時に、グラデーションを同期するために、他のグラデーションは 2 倍のステップ サイズを使用します。

this.Step = 2*this.Step; 
this.SetOpacity(); this.SetTop(); this.SetLeft(); 
this.Step = this.Step/2;

このようにして、幅または高さの優先順位の効果を実現できます。
[固定点勾配]
まず原理について説明します。たとえば、幅の中点を基準点として、幅が n だけ減少すると想像できます。左が n*0.5 (つまり n/2 ) 増加する限り、
これで、中点を中心とした変換の効果を作成できます (もちろん、最初に変換オブジェクトを相対または絶対位置に設定する必要があります)。
では、この「0.5」はどこから来たのでしょうか？ある程度の数学的知識がある場合は、これが、グラデーション オブジェクトの左側と変換点の比率、およびグラデーション オブジェクトの合計幅であることを知っているはずです
この値をプログラムに保存するには、Width.pos を使用します。

this ._x = this._obj.offsetLeft this._obj.offsetWidth * this.Width.pos;
各変換はこの位置に従って左にリセットされ、 width:

this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos "px";

ではないという人もいるかもしれません。元の左に基づいて変換幅 *Width.pos を直接追加するのと同じですか?
しかし、問題は、複数の変換計算後に得られる値 (ターゲット値に到達するまでに複数の計算が行われる) が正確ではなくなることです。
変換計算の過程で多くの小数点が無視され、計算回数が増えると結果の差異が大きくなるため、
変換位置の基準値 (_x) が最初に決定されるため、何度変形位置を計算しても変形位置は変わりません。

同様に、異なるWidth.pos (負の数値と1より大きい数値を含む) とHeight.posを設定する限り、任意の点にグラデーションを中心に配置できます。

さらに、統合を改善するために、プログラムの設計に多くの検討が費やされ、run、start、end、target 属性がそれぞれ次のとおりである FadeStruct 構造が作成されました。勾配、開始値、および終了値、ターゲット値。
Object.extend を 2 回使用してデフォルト値を設定しました。詳細についてはプログラムを参照してください。
使用説明:
必要なパラメーターは 1 つだけあり、それはグラデーション オブジェクトです。ただし、グラデーション オブジェクトのみを設定する必要があります。
不透明度:透明なグラデーション パラメータ
Height: 高さのグラデーション パラメータ
Width: 幅のグラデーション パラメータ
Top: 上のグラデーション パラメータ
Left: 左のグラデーション パラメータ
Step:10,//変化率
Time :10,//変更間隔
モード: "both",//グラデーション順序
Show:false,//デフォルトで開いているかどうか
onFinish:function(){}//完了したら実行
ここで、Opacity、Height、Width、Top、および Left は特殊です。これらは、FadeStruct 構造体です。

var f = new Fade("idFade", { Show: true, 
Opacity: { run: true }, 
Height: { run: true }, 
Width: { run: true, pos: .5 }, 
Top: { run: true, end: 70 } 
});

run を true に設定すると、この変換の開始がオンになります。と end は開始値と終了値です。pos は高さと幅の一意の変換位置属性です。

さらに詳細なアプリケーションについては、例を参照してください。
プログラムコード: