JS动画练习

看了Pink老师的课，刚看到动画这里想练习练习。

部分笔记来自大佬 https://docs.mphy.top/#/

素材来自网络，如有侵权请联系。

---

效果：

实现的效果说明：

幽灵移动到蛋糕处吃掉蛋糕，蛋糕消失变成骷髅图片。

丘比猪移动到蜡烛处拿到蜡烛，蜡烛消失变成爱心图片。

---

练习到的知识点：

1. 获取盒子位置  元素.offsetLeft

2. 盒子位置添加微小的移动( 当前的位置+移动距离) 

div.style.left = div.offsetLeft + 移动距离 + 'px';

注意：必须加定位，才能使用element.style.left

3. 移动添加 定时器 开始动画

setInterval(function(){} , 间隔的毫秒数]);

4. 停止定时器结束动画

clearInterval(定时器名);

5. addEventListener() 注册事件（绑定事件）

元素.addEventListener(type, listener[, useCapture])

• type：如 click 、mouseover，注意这里不要带 on。
• listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认是 false。

6.获取元素

• DOM提供的API 方法：getElementById、getElementsByTagName 不推荐
• H5提供的新方法：querySelector、querySelectorAll 提倡
• 利用节点操作获取元素：父（parentNode)、子（children）、兄（previousElementSibling、 nextElementSibling）提倡

6.改变元素的属性（图片的src）

ghost.src = "images/finish1.gif";

7.改变样式属性（style的display）

 cake.style.display = "none";

8.封装函数

---

代码：

HTML：

 <div class="box">
      <div class="box1"><img src="images/ghost.png" class="ghost" /></div>
      <div class="box2"><img src="images/cake.png" class="cake" /></div>
    </div>
    <div>
      <div class="box3"><img src="images/pig.png" class="pig" /></div>
      <div class="box4"><img src="images/candle.gif" class="candle" /></div>
</div>

CSS：

body {
  background-image: url("images/background.gif");
  background-repeat: repeat-x;
}

.box {
  margin: 0 auto;
}
.ghost {
  float: left;
  width: 80px;
  height: 80px;
}
.cake {
  position: relative;
  float: right;
  width: 80px;
  height: 80px;
  top: 20px;
  display: block;
}
.box1 {
  position: absolute;
}
.box3 {
  position: absolute;
}
.pig {
  width: 100px;
  height: 100px;
  position: relative;
  top: 220px;
}
.candle {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 400px;
  top: 220px;
  display: block;
}

JS：

<script>
      //幽灵吃蛋糕
      var ghostbox = document.querySelector(".box1");
      var ghost = document.querySelector(".ghost");
      var cake = document.querySelector(".cake");
      var ghostgoal = cake.offsetLeft;

      //obj是目标对象 target是目标位置
      function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          var step = Math.ceil((target - obj.offsetLeft) / 10);
          if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            if (callback) {
              callback();
            }
          }
          obj.style.left = obj.offsetLeft + step + "px";
        }, 50);
      }

      cake.addEventListener("click", function () {
        animate(ghostbox, ghostgoal, function () {
          //alert("小幽灵吃到蛋糕啦！");
          cake.style.display = "none";
          ghost.src = "images/finish1.gif";
        });
      });

      //丘比猪拿蜡烛
      var pigbox = document.querySelector(".box3");
      var pig = document.querySelector(".pig");
      var candle = document.querySelector(".candle");
      var piggoal = candle.offsetLeft;

      candle.addEventListener("click", function () {
        animate(pigbox, piggoal, function () {
          //alert("小幽灵吃到蛋糕啦！");
          candle.style.display = "none";
          pig.src = "images/finish2.gif";
        });
      });
    </script>