当前位置:首页 » 操作系统 » js动画算法

js动画算法

发布时间: 2024-09-17 21:12:18

⑴ 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);
};

热点内容
c语言截屏 发布:2025-03-15 21:06:57 浏览:606
安卓手机桌宠哪个最好 发布:2025-03-15 21:05:08 浏览:463
vps自动脚本 发布:2025-03-15 20:50:29 浏览:60
php刷新重复提交 发布:2025-03-15 20:50:26 浏览:307
艾莫迅plc编程电缆 发布:2025-03-15 20:44:05 浏览:303
妖妖灵脚本 发布:2025-03-15 20:36:56 浏览:257
公司自己搭建ftp 发布:2025-03-15 20:36:07 浏览:63
如何增加配置使半袖变得不单调 发布:2025-03-15 20:33:37 浏览:350
linux显示目录 发布:2025-03-15 20:30:42 浏览:661
素数算法表示 发布:2025-03-15 20:24:02 浏览:843