イージングモーションとは、学名をTweenといい、バッファームーブメントの略称です。ページのコンテンツを快適に切り替えたい場合は、フェード効果を使用します。ページ要素を自然に動かしたい場合は、イージング効果を使用します。これら 2 つを混合すると、さまざまな特殊効果を生み出すことができます。私たちのために多くの事前調査を行ってくれた Flash 開発者のおかげで、私たちはそれを取り出して、さまざまなメニューやフォト アルバムにインストールすることができました。最も単純な加速と減速から始めましょう。
緩和しているので、距離、時間、速度という概念が含まれている必要があります。直線 L があり、点 A と点 B が L の始点と終点であると想像できます。直線 L 上を点 A から点 B まで移動する点 C があります。所要時間は通常不明ですが、速度は決定する必要があります。下の図を見てください。緑色の四角形を軽くてしっかりとしたスライディング ストリップ上で移動させたいと考えています。スライディングストリップの左上隅が点 A、右上隅が点 B、正方形の左上隅が点 C に相当し、移動距離は 2 つの幅の差になります。 。移動するオブジェクトには幅があるため、点 C は点 B と一致することはありません。ただし、正確な目的地 (便宜上、地点 D と呼びます) が必要であり、それを計算する必要があります。加速運動中、点 C はいつでも点 D を超える可能性があるため、点 C が点 D を超えると、動作を終了して点 C を点 D に引き戻さなければなりません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<頭>
<TITLE> 新しいドキュメント </TITLE>
<META NAME="ジェネレーター" CONTENT="EditPlus">
<META NAME="著者" CONTENT="">
<META NAME="キーワード" CONTENT="">
<META NAME="説明" CONTENT="">
</HEAD>
<本体>
<STYLE type=text/css>#taxiway {
背景: #e8e8ff; 幅: 800 ピクセル; 高さ: 100 ピクセル
}
＃動く {
背景: #a9ea00; 幅: 100 ピクセル; 高さ: 100 ピクセル
}
</スタイル>
<DIV id=タクシーウェイ>
<DIV id=move onclick=move(this)></DIV></DIV>
<P class=notice display="text-align:center">緑色の四角形をクリックして移動します</P>
<SCRIPT type=text/javascript>
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument、
本体 = doc.body、
html = doc.documentElement、
clientTop = html.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': 上、'left': 左 };
};
var getStyle = function(el, style){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, 文字){
文字を返します。toUpperCase();
});
var value = el.currentStyle[スタイル];
(値 == "自動")&&(値 = "0px" );
戻り値;
}それ以外{
document.defaultView.getComputedStyle(el, null).getPropertyValue(style) を返す
}
}
//補助関数 3 ($() に相当) は、ブログ パークが JQuery を使用するため、名前付けに $ 記号を使用しません。これにより、名前の競合が発生します。
// 要素をクエリするための新しい生成メソッドにはキャッシュ機能があります
var キャッシュ = []
var _ = 関数(id){
キャッシュ[id]を返します || (キャッシュ[id] = document.getElementById(id));
}
var move = function(el){
el.style.position = "絶対";
var begin = getCoords(el).left,
距離 = parseFloat(getStyle(_("taxiway"),"width")) - parseFloat(getStyle(el,"width")),
終了 = 開始 + 距離、
Speed = 10, // 最初の動きの速度 (px/ms 単位) に暗黙的に 1ms を掛けます
デルタ = 1.5、
変更 = true;
el.onclick = function(){
if(変更){
el.innerHTML = "加速";
（関数（）{
setTimeout(function(){
el.style.left = getCoords(el).left + Speed + "px";//移動
速度 *= デルタ; //次の移動距離
if(getCoords(el).left >= end){
el.style.left = 終了 + "ピクセル";
変更 = false;
デルタ = 0.85、
速度 = 100;
}それ以外{
setTimeout(arguments.callee,25);//移動するたびに 25 ミリ秒滞在します
}
},25)
})()
}それ以外{
el.innerHTML = "速度を落として";
（関数（）{
setTimeout(function(){
el.style.left = getCoords(el).left - 速度 + "px";//移動
Speed = Math.ceil(speed * delta); //次の移動距離
if(getCoords(el).left <= begin ){
el.style.left = begin + "px";
変更 = true;
デルタ = 1.5、
速度 = 10;
}それ以外{
setTimeout(arguments.callee,25);
}
},25)
})()
}
}
}
window.onload = function(){
移動(_("移動"))
}
</スクリプト>
</BODY></HTML>
ページ上の座標とサイズを取得するには、getCoords() と getStyle() が再び機能します。申し訳ありませんが、私は自分の機能を誇示したくないのです。さらに、getStyle() は大幅に削除されており、その能力は以前ほど強力ではありません。
//補助機能1
var getCoords = function(el){
var box = el.getBoundingClientRect(),
doc = el.ownerDocument、
本体 = doc.body、
html = doc.documentElement、
clientTop = html.clientTop || 0,
clientLeft = html.clientLeft || body.clientLeft 0,
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop,
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft
return { 'top': 上、'left': 左 };
};
//補助機能2
var getStyle = function(el, style){
if(!+"v1"){
style = style.replace(/-(w)/g, function(all, 文字){
文字を返します。toUpperCase();
});
var value = el.currentStyle[スタイル];
(値 == "自動")&&(値 = "0px" );
戻り値;
}それ以外{
document.defaultView.getComputedStyle(el, null).getPropertyValue(style) を返す
}
}