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

热点内容
rsa加密c源代码 发布:2025-03-15 19:53:55 浏览:692
linux解压bin 发布:2025-03-15 19:40:25 浏览:383
存储数据为什么只能使用两种状态 发布:2025-03-15 19:40:21 浏览:263
平方的运算法则 发布:2025-03-15 19:38:57 浏览:970
江苏省苏州市社保卡初始登录密码是多少 发布:2025-03-15 19:38:55 浏览:515
安卓主板哪里有卖 发布:2025-03-15 19:26:10 浏览:31
Q9源码 发布:2025-03-15 19:24:21 浏览:177
芬兰编程教育 发布:2025-03-15 18:59:46 浏览:427
因特网的服务器地址 发布:2025-03-15 18:53:01 浏览:893
手机实体店什么配置好 发布:2025-03-15 18:32:35 浏览:170