小程序抛物线动画实现
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
- 使用画布实现
未完待续。。。
