ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript モーション フレームワークにおける多値モーションの詳細な紹介 (4)

JavaScript モーション フレームワークにおける多値モーションの詳細な紹介 (4)

黄舟
黄舟オリジナル
2017-05-21 13:24:311317ブラウズ

この記事では、主に 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(&#39;p1&#39;);
 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 === &#39;opacity&#39;) {
   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 === &#39;opacity&#39;) {
   cur += speed;
   obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
   obj.style.opacity = cur / 100;//Chrome,IE
   } else {
   obj.style[attr] = cur + speed + &#39;px&#39;;
   }
  }
  //整个循环结束后,仍然保持着true,说明没有没到达目标值的属性,也就是都到了
  if (bStop) {
   clearInterval(obj.timer);//说明所有的属性都到达了目标值
  }

  }, 30);
 }
 </script>
</body>
</html>

以上がJavaScript モーション フレームワークにおける多値モーションの詳細な紹介 (4)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。