ホームページ > 記事 > ウェブフロントエンド > JavaScript モーション フレームワークにおける多値モーションの詳細な紹介 (4)
JavaScript モーション フレームワークにおける多値モーションの詳細な紹介 (4)
- 黄舟オリジナル
- 2017-05-21 13:24:311286ブラウズ
この記事では、主に JavaScriptMotionFrameworkパート 4、多値の動き、特定の基準値について紹介します
多値の動き、つまり、特定の オブジェクトについて。 、属性の値の 1 つだけが変更されるのではなく、幅、高さ、フォント、透明度などの多くの値が同時に変更されます
もちろん、複数の値を移動すると、問題は、タイマーいつオフにするかという問題です!もちろん、タイマーはすべての属性値が目標値に移動した場合、つまり最も遅い属性値を待っている場合にのみクリアできます。 10 人が一緒に食事をしているようなものです。1 人が到着するまで待ちきれずに食事を始めることになります。
前回の記事では、要素オブジェクト内の特定の属性の移動について説明しました。今回は、同じ要素オブジェクト内の複数の属性値のバッファーの移動について説明しました。そして、各属性にはエンドポイント (ターゲット) があります。 point) これらの属性とそのターゲット値をオブジェクトの形式、または json の形式で記述します。発生しやすい問題は、ここでは一般的な速度関数を使用していますが、一部の属性値は100 –> 600です。属性値がターゲット値に達した場合にのみ、obj が所有するタイマーを閉じることができるのは、ポーリング関数が実行されるたびに bStob = true を設定するという設計上の考え方です。 jsonでは、目標値に達していない属性がある限り、タイマーがオフにならないように、一部の属性値がエンドポイントに達してもポーリングはスキャンを実行します。となりますが、この時点では属性の移動速度が0なので動きません。つまり、以前:
if(attr == cur) {
cleartInterval(obj.timer);
}は次のように拡張されます:
if (bStop) {
clearInterval(obj.timer);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架(四)：多值运动</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
op.onmouseover = function() {
var json = {
width: 600,
height: 200,
opacity: 30
};
startMove(this, json);
};
op.onmouseout = function() {
var json = {
width: 100,
height: 100,
opacity: 100
};
startMove(this, json);
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var attr in json) {
var cur = 0;
if (attr === 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != json[attr]) {//凡是有未到达目标点的，一律不让定时器停下，否则有的属性不能到达目标值
bStop = false;
}
if (attr === 'opacity') {
cur += speed;
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur / 100;//Chrome,IE
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//整个循环结束后，仍然保持着true，说明没有没到达目标值的属性，也就是都到了
if (bStop) {
clearInterval(obj.timer);//说明所有的属性都到达了目标值
}
}, 30);
}
</script>
</body>
</html>
以上がJavaScript モーション フレームワークにおける多値モーションの詳細な紹介 (4)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。