![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
s = 0.5 * a* t*t
上边这个是高中物理课本关于位移的计算公式，位移等于二分之一乘以a乘以t的平方，a是加速度，t是运动进行的时间（当然啦，初速度为0）。下面我们会应用这个公式完成一个js的加速动画。
我们现在假定以某个div的top值为动画的应用属性，也就是我们的动画过程中始终修改的是div.style.top的值。
这里，我们规定每次动画的时间间隔为 1000 / 60，这个时间是每秒60帧的刷新间隔，以达到人眼注视下能流畅运行动画的一个阈值。
然后我们规定此动画执行时间为t（ms)，位移距离为s(px)，则在某个时刻的位移公式，可由以下函数推导而出：
function getPosition( timeNow ){
/*
* s = 1/2 * a * t*t
*/
let countTime = t;
let a = (2 *s )/ (countTime*countTime);
return 0.5 * a * Math.pow( timeNow,2);
}解释：利用位移公式反推a，然后用当前时刻的时间，计算出当前时间的位移。
完整代码和例子可以看下面:
<style>
#test{
position:absolute;
top: 0;
left:0;
width: 75px;
height: 75px;
background: black;
}
</style>
<div id="test"></div>
<script>
let gap = 1000 / 60;
let s = 500;
let t = 200;
animate(test,'top');
function animate(el,prop){
let time = 0;
let position = getPosition(time);
time += gap
if( time !== t ){
move();
}else{
}
function move(){
el.style[prop] = position + 'px';
position = getPosition(time);
time += gap;
if( time > t){
time = t;
}
if( time !== t ){
setTimeout(function(){
move();
},gap)
}else{
position = getPosition(time);
el.style[prop] = position + 'px';
}
}
}
function getPosition( timeNow ){
/*
* s = 1/2 * a * t*t
*/
let countTime = t;
let a = (2 *s )/ (countTime*countTime);
return 0.5 * a * Math.pow( timeNow,2);
}
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
