当前位置:首页 » 操作系统 » 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);
};

热点内容
蜗牛游戏安卓手机怎么更换账号 发布:2025-03-17 13:41:49 浏览:321
为什么人买一个苹果一个安卓 发布:2025-03-17 13:36:59 浏览:438
三星手机短信在那个文件夹 发布:2025-03-17 13:31:51 浏览:194
安卓皇帝隐藏剧情在哪里 发布:2025-03-17 13:18:53 浏览:507
新版安卓为什么不兼容 发布:2025-03-17 13:18:49 浏览:483
s3哪个配置性价比高 发布:2025-03-17 13:06:09 浏览:320
气体压缩能量 发布:2025-03-17 13:00:16 浏览:78
压缩油19 发布:2025-03-17 12:25:29 浏览:858
linux上网代理 发布:2025-03-17 12:23:56 浏览:361
c是高级语言吗 发布:2025-03-17 12:16:31 浏览:525