小程序抛物线动画实现

Lewis -

animation版

  • 主要使用@keyframes实现，x轴做匀速运动，y轴做加速运动。看起来类似抛物线运动。

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
   <div class="busBox"></div>
  </div>
</body>
</html>

css

.wrap {
  animation: x 300ms linear 1s 1;
}
.busBox {
  position: relative;
  left: 50px;
  top: 50px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: blue;
  animation: y 300ms ease-in 1s 1;
}

@-webkit-keyframes x {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(300px, 0, 0);
  }
}

@-webkit-keyframes y {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 400px, 0);
  }
}

示例：http://jsbin.com/fusiwos/28/edit?html,css,output

transition版

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
   <div class="busBox"></div>
  </div>
  <button id="js_add">添加</button>
  <div class="busBox2" id="js_busBox2"></div>
</body>
</html>

css

.wrap {
  animation: x 300ms linear 1s 1;
}
.busBox {
  position: relative;
  left: 50px;
  top: 50px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: blue;
  animation: y 300ms ease-in 1s 1;
}

.busBox2 {
  position: absolute;
  left: 58px;
  top: 80px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  transition: top 300ms ease-in,
              left 300ms linear;
}

.target {
  top: 400px;
  left: 300px;
}

@-webkit-keyframes x {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(300px, 0, 0);
  }
}

@-webkit-keyframes y {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, 400px, 0);
  }
}

javascript

var $button = document.getElementById('js_add');
var $busBox = document.getElementById("js_busBox2");

$button.addEventListener('click', function(e) {
  $busBox.setAttribute("class", "busBox2 target");
}, false);

示例：http://jsbin.com/fusiwos/50/edit?css,output

keyframes版

  • keyframes点足够多就可以模拟抛物线，但是代码量会比较大，这里可以使用生成器来生成，精度越高代码量越大。附上地址：http://jeremyckahn.github.io/stylie/

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
    <div class="busPos stylie"></div>
  </div>
</body>
</html>

css

.wrap {
  width: 300px;
  height: 500px;
  border: 1px solid;
}
.busPos {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}
.stylie {
  -webkit-animation-name: stylie-keyframes;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-delay: 0ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 0;
  animation-name: stylie-keyframes;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}
@-webkit-keyframes stylie-keyframes {
  0% {-webkit-transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  14.29% {-webkit-transform:translate(110.7085px, 5.8309px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  28.57% {-webkit-transform:translate(190.035px, 46.6472px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  42.86% {-webkit-transform:translate(243.2099px, 157.4344px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  57.14% {-webkit-transform:translate(275.4636px, 342.5656px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  71.43% {-webkit-transform:translate(292.0262px, 453.3528px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  85.71% {-webkit-transform:translate(298.1283px, 494.1691px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {-webkit-transform:translate(299px, 500px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}
@keyframes stylie-keyframes {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  14.29% {transform:translate(110.7085px, 5.8309px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  28.57% {transform:translate(190.035px, 46.6472px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  42.86% {transform:translate(243.2099px, 157.4344px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  57.14% {transform:translate(275.4636px, 342.5656px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  71.43% {transform:translate(292.0262px, 453.3528px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  85.71% {transform:translate(298.1283px, 494.1691px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(299px, 500px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}html::after { content: url(https://ga-beacon.appspot.com/UA-42910121-1/stylie?pixel); position: absolute; left: -999em; }

示例：http://jsbin.com/botecoz/3/edit?html,css,output

微信小程序版

  • javascript
  • 计算出所有点的坐标逐帧显示，丢帧严重明显卡顿。
  • canvas
  • 使用画布实现
    未完待续。。。