js动画封装

84 阅读 0 评论 56 点赞

我是靠谱客的博主重要铃铛，这篇文章主要介绍js动画封装，现在分享给大家，希望可以做个参考。

js动画封装

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

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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;
}