JavaScriptのユニフォームアニメーションとバッファアニメーションの詳細説明-jsチュートリアル-php.cn

JavaScriptのユニフォームアニメーションとバッファアニメーションの詳細説明

高洛峰

リリース： 2016-12-09 15:21:36

オリジナル

1539 人が閲覧しました

Web ページのアニメーションに関しては、CSS3 ではすでにいくつかの属性を使用してアニメーションを迅速に作成できますが、ブラウザーの互換性のために、Web ページでアニメーションを作成するために js を使用する必要がある場合があります。

アニメーションに js を使用する場合に最も重要な関数は setInterval 関数です。理解できない場合は、Baidu で直接使用できます。この記事では主にアニメーションの原理や制作過程のポイントについてお話します。

最初にコードから始めるのが古いルールです。コードを直接理解できれば、時間を節約できます。

html 部分:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>move</title>
  <link rel="stylesheet" href="move1.css">
</head>
<body>
  <input type="button" value="匀速移动" id="move1">
  <input type="button" value="渐变移动" id="move2">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <script type="text/javascript" src="move1.js"></script>
</body>
</html>

ログイン後にコピー

css 部分:

   
*{
  margin: 0px;
  padding: 0px;
}
.box{
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  margin-top: 10px;
}

ログイン後にコピー

js 部分:

/**
 * Created by siri on 2016/9/10.
 */
window.onload=function () {
  var btn1 = document.getElementById(&#39;move1&#39;);
  var btn2 = document.getElementById(&#39;move2&#39;);
  var box1 = document.getElementById(&#39;box1&#39;);
  var box2 = document.getElementById(&#39;box2&#39;);
  btn1.onclick = function () {
    animate1(box1,500);
  }
  btn2.onclick = function () {
    animate2(box2,500);
  }
  //匀速动画
  function animate1(ele,target){
    //要用定时器，先清除定时器
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
    //而定时器本身讲成为盒子的一个属性
    clearInterval(ele.timer);
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
    //目标值如果大于当前值取正，目标值如果小于当前值取负
    var speed = target>ele.offsetLeft?3:-3;
    ele.timer = setInterval(function () {
      //在执行之前就获取当前值和目标值之差
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      //目标值和当前值只差如果小于步长，那么就不能再前进了
      //因为步长有正有负，所有转换成绝对值来比较
      console.log(val);
      if(Math.abs(val)<=Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
  
      }
    },30);
  }
  
  //缓动动画封装
  function animate2(ele,target) {
    clearInterval(ele.timer); //清楚历史定时器
    ele.timer = setInterval(function () {
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
      var step = (target-ele.offsetLeft)/10;
      //对步长进行二次加工(大于0向上取整,小于0项下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //动画原理： 目标位置 = 当前位置 + 步长
      console.log(step);
      ele.style.left = ele.offsetLeft + step + "px";
      //检测缓动动画有没有停止
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
        ele.style.left = target + "px"; //直接移动指定位置
        clearInterval(ele.timer);
      }
    },30);
  }
  
  
}

ログイン後にコピー

html と css は基本的に JS 部分のフレームワークです。あまり話さないでください。注意してください。重要なことは、グローバルマージンとパディングをクリアする必要があるということです。クリアしないと、初期マージンとパディングが計算中に計算に影響を及ぼし、場合によってはノンストップモーションが発生することがあります。

コードの JavaScript 部分の分析は、ソースコードですでに詳細に説明されています。以下では主に原理について説明します。

均一モーション:

setInterval 関数を通じて、数ミリ秒ごとの移動距離を制御し、指定された位置に到達する直前に、ステップの長さ (数ミリ秒ごとの移動距離) を決定し、このときの目標位置までの距離よりもステップ長が大きい場合は、ステップ長と合計の誤差を避けるため、目標位置に直接位置決めします。距離が整数倍ではないため、最終的な到着位置と目標位置に差が生じます。

バッファリングモーション:

バッファリングモーションの基本的な機能は、バッファリングモーションのステップ長がターゲット位置からの距離によって決定されるため、ステップ長が常に小さくなる点を除いて、均一モーションと同じです。モーションをバッファリングする効果を実現します。ステップサイズを決定するときは、Math.ceil と Math.floor を使用してステップ値を四捨五入して小数点以下を回避します。これは、小数点がある場合、最終的に到達する位置がターゲット位置と明らかに異なるためです。

注: 各移動の前に必ず clearInterval を使用してタイマーをクリアしてください。