发现一个前端大牛作的抛物线效果,抛物线的函数不论,用requestAnimationFrame来做动画平滑过渡还是蛮帅的。
实现要点:
1. 利用requestAnimationFrame递归调用step方法实现平移.
2. 函数抛物线算法
Demo:
http://wap.weixiaoxin.cn/Vote/?tid=5209&wid=48243&openid=o7VbEjsqPBVS5vdXE6eGgAqckl8Q
AA004XECY6
实现要点:
1. 利用requestAnimationFrame递归调用step方法实现平移.
2. 函数抛物线算法
Demo:
<html>
<head>
<title></title>
<script type="text/javascript" src="parabola-min.js"></script>
<style type="text/css">
.pos1{
position: absolute;
top:500px;
left: 500px;
width: 10px;
height: 10px;
border-radius: 5px 5px;
background: red;
}
.pos2 {
position: absolute;
top:10px;
left: 10px;
width: 10px;
height: 10px;
border-radius: 5px 5px;
background: green;
}
</style>
</head>
<body>
<div id="pos1" class="pos1"></div>
<div id="pos2" class="pos2"></div>
<script type="text/javascript">
var parabola = funParabola(document.getElementById('pos1'), document.getElementById('pos2')).mark();
window.setTimeout(function() {
parabola.init();
}, 5000);
</script>
</body>
</html>
http://wap.weixiaoxin.cn/Vote/?tid=5209&wid=48243&openid=o7VbEjsqPBVS5vdXE6eGgAqckl8Q
AA004XECY6