velocity實現(xiàn)拋物線動畫

nicercode 發(fā)布于2019-08-22 14:49 / 2045人閱讀

摘要：昨天看到了鏈接描述寫的小程序中的拋物線動畫，當時作者還沒發(fā)的版本，因此我就嘗試自己去做一個。同時正好練習一下使用，所以就用了來實現(xiàn)。第一次發(fā)文章和代碼還望大家指點

昨天看到了henry_chen 鏈接描述寫的小程序中的拋物線動畫，當時作者還沒發(fā)H5的版本，因此我就嘗試自己去做一個。同時正好練習一下使用Velocity，所以就用了Velocity.js來實現(xiàn)。
第一次發(fā)文章和代碼還望大家指點：

style

    .wrapper {
      position: relative;
      width: 200px;
      height: 500px;
      border: 1px solid #dedede;
    }

    .add {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: greenyellow;
    }

    .ball {
      width: 10px;
      height: 10px;
    }

    .cart {
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background: rgb(129, 214, 2);
    }

html



    var add = document.querySelector(".add");
    var wrapper = document.querySelector(".wrapper");
    var cart = document.querySelector(".cart");
    add.onclick = function (e) {
      var ball = document.createElement("div");
      wrapper.appendChild(ball)
      ball.id = "ball"
      ball.style.width = "10px";
      ball.style.height = "10px";
      ball.className = "add";
      ball.style.top = e.pageY + "px";
      ball.style.left = e.pageX + "px";
      var ball = document.querySelector("#ball");

      Velocity(ball, {
        translateX: -add.offsetLeft + 10 + "px"
      }, {
          duration: 800,
          easing: "linear"
        })
      setTimeout(() => {
        Velocity(ball, {
          translateY: cart.offsetTop - 40 + "px"
        }, {
            duration: 800,
            easing: "ease-in",
            queue: false,
            complete: function () {
              wrapper.removeChild(ball);
              Velocity(cart, {
                scale: 1.1
              }, {
                  duration: 200,
                  complete: function () {
                    Velocity(cart,
                      "reverse"
                      , {
                        duration: 200
                      })
                  }
                })
            }
          });
      }, 0);
    }