Question

css动画与js动画的差异?

Answer 1

1. js动画代码相对复杂一些
2. 动画运行时，对动画的控制程度上，js能够让动画暂停、取消、终止，css动画不能添加事件
3.动画性能看，js动画多了一个js解析的过程，性能不如css动画好

Answer 2

你始终要明白一点，JQ是用JS写的，所有你想要实现自己的另类动画效果，就自己码一个MOVE.JS，根据动画创作的要求一步步去完善它，也许这才是你需要的，JQ从某种程度就是某些大神写的JS代码。比如我写的初级版move.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);
//在对象中增加timer 便于控制他停止
dom.timer=setInterval(function(){
//循环每一个目标属性添加动画方法
for(var attr in json){
//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
//拿到该属性的目标值
var target=json[attr];
//设置每次增加的长度 采用的是目标值与现在attr的属性值的差距的5份进行采用
var speed=(target-cur)*0.2;
//实践证明 将速度累加到cur上，不停的累加是无限接近目标值，但是没办法达到目标值，所以呢要给他用math
//ceil提上去
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
console.log(speed+"====="+cur)
//如果没有达到目标值就一直加
if(cur!=target){
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);
};