js实现匀速下落动画怎么实现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现匀速下落动画怎么实现相关的知识，希望对你有一定的参考价值。
/*data:2022-11-17
author:lfp
move运动函数
dom--需要运动的对象
json--width:100,height:100,left:100,top:100
callback--回调函数 可调用自己 实现异步动画效果
*/
//主函数
function move(dom,json,callback)
//让每一次动画都是新的开始，防止出现动画一直不停的运行
if(dom.timer)clearInterval(dom.timer);
var i=0;
var start=0;
//在对象中增加timer 便于控制他停止
dom.timer=setInterval(function()
i++;
//循环每一个目标属性添加动画方法
for(var attr in json)
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
if(i==1)start=cur;
//拿到该属性的目标值
var target=json[attr];
//设置分成10次增加增量 你可以根据需要修改
var speed=(target-start)/10;
console.log(speed+"====="+cur)
//如果没有达到目标值就一直加
if(Math.abs(cur-target)>1)
dom.style[attr]=cur+speed+"px";
else
//达到目标值了就停止或者其他情况也停止
clearInterval(dom.timer);
//等停止了动画再回调函数进行另外的操作
if(callback)callback.call(dom);
;
;
,45);
;
//配套函数
function getStyle(dom,attr)
var value="";
if(window.getComputedStyle)
value=window.getComputedStyle(dom,false)[attr];
else
value=dom.currentStyle[attr];
;
value=parseInt(value);
return value || 0;//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充
;
function $(id)
//return document.getElementById(id);
return document.querySelector("#"+id);
; 参考技术A 建议直接使用jq的.animate() 设置绝对定位 控制top值就可以。也可以用css3的animation动画效果实现，原理也是控制top值。原生js也是同理使用计时器重复调用改变top值的方法，当top值等于某个值时停止计时器，完成动画效果。
js学习总结----动画之在指定时间内实现单方向匀速运动
具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#box{
position:absolute;
top:0;
left:0;
padding:0;
width:100px;
height:100px;
background:lightblue;
}
</style>
</head>
<body>
<div id=‘box‘></div>
<script>
//思想1：
var oBox = document.getElementById(‘box‘);
//实现一个匀速运动:在指定时间内完成动画：计算出总距离/总时间，然后求出对应的步长（每10ms走一步的话需要走多远）
var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
var duration = 2000;
var step = (maxLeft/duration)*10;
var timer = window.setInterval(function(){
var curLeft = utils.css(oBox,"left");
curLeft+=step;
if(curLeft>=maxLeft){
window.clearInterval(timer);
return;
}
utils.css(oBox,"left",curLeft);
},10)
//思想2：
function Linear(t,b,c,d){//相对应的是time begin change duration
return c*t/d+b
}
var oBox = document.getElementById(‘box‘);
var target = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
var begin = utils.css(oBox,‘left‘),change = target-begin;
var duration = 2000,time = null;
var timer = window.setInterval(function(){
time+=10;
if(time>=duration){
utils.css(oBox,"left",target);
window.clearInterval(timer);
return;
}
var curPos = Linear(time,begin,change,duration);
utils.css(oBox,"left",curPos)
},10)
</script>
</body>
</html>
以上是关于js实现匀速下落动画怎么实现的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript动画：offset和匀速动画详解(含轮播图的实现)