js动画封装

js动画封装

凡是可以看到过渡效果的基本都可以用到js动画，都能引用

<!--
ani() 作用：动画
给某个元素查看某个css 属性值 在某个时间中变化的过程。
el // 元素对象
str
// css
end
// 结束动画值
time
// 动画执行总时间
返回值为
'1' 表示动画执行完毕
-->

function $_animation(el, str, end, tm,fn) {
clearInterval(el.timer);
// 1：获取初始样式
var start = getSty(el,str);
start = parseFloat(start);
// 2: 求差
var s = end-start;
// 3；执行动画
el.timer = setInterval(function(){
start += s/tm*16.7; // 每次属性值的变化(例如每次移动距离)
if(s>0){// end>start 业务
if(start>=end){
start = end;
clearInterval(el.timer);
el.style[str]=
str==='opacity'?start:start+'px';
// 执行下一个动画业务从合理
fn?fn():null; // 判断是否有参数；如果有参数；执行回调函数
// 强制同步
flag = true
}else{
el.style[str]=
str==='opacity'?start:start+'px';
}
}else{
// 处理end <start 业务
if(start<=end){
start = end;
clearInterval(el.timer);
el.style[str]=
str==='opacity'?start:start+'px';
fn?fn():null;
// 强制同步
flag = true
}else{
el.style[str]=
str==='opacity'?start:start+'px';
}
}
},16.7)
}
function getSty(el, str) {
var res;
if (el.currentStyle) {
// ie
res = el.currentStyle[str];
} else {
// 非IE
res = getComputedStyle(el)[str];
}
return res;
}

最后

以上就是重要铃铛为你收集整理的js动画封装的全部内容，希望文章能够帮你解决js动画封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。