JS简单的动画函数的封装(基于步长)

75 阅读 0 评论 50 点赞

我是靠谱客的博主精明戒指，最近开发中收集的这篇文章主要介绍JS简单的动画函数的封装(基于步长)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.匀速动画函数的封装

obj指的是运动的对象，target指的是运动对象的目标值。

function animate(obj,target) {
clearInterval(obj.timer);
//先判断是往前走还是往回走
var speed = target - obj.offsetLeft>0? 5: -5;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;
//这是目标值200 与obj盒子左侧的offsetLeft值的差，并且这两者的差值不会超过5，因为每次都是offsetLeft的值+5或者-5.
obj.style.left = obj.offsetLeft + speed +"px";
if(Math.abs(result) <= 5) {
// 这里是result取绝对值，因为当target<=obj.offsetLeft时，result是个负值。
clearInterval(obj.timer);
obj.style.left = target +"px";
// 有可能会出现最后一步是198或者203的情况，所以最后都让这个盒子停在offsetLeft = 200的位置上。
}
}, 30);
}

2.缓动动画函数的封装

obj指的是运动的对象，json指的是多个属性值，fn指的是回调函数。

function animate(obj,json,fn) {//加了个fn用来接收回调函数
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//for
in遍历json
var flag = true;//这是用来检测所有要改变的属性值是否都达到了目标值
//获取当前的对象的属性的值
var current = 0;
for(var k in json) {
// 因为opacity的值是小数，如果不这样处理，到后面算步长的时候是小数减去小数再除以10，
不太好算，所以这里current需要*100.
if(k == "opacity") {
current = parseInt(getstyle(obj,k)*100)||0;
}else {
current = parseInt(getstyle(obj,k));
}
//获取步长
var step = (json[k] - current) / 10;
step = step>0 ? Math.ceil(step) : Math.floor(step);
//并不是所有属性的属性值都有px。做个判断
if(k == "opacity")
// 判断用户有没有输入 opacity
{
if("opacity" in obj.style)
// 判断 我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{
// obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)*10+")";
}
}
else if (k == "zIndex") {
obj.style[k] = json[k];
}else {
// 如果不是更改透明度，则执行else里面的语句
obj.style[k] = current + step+"px";
}
//如何清除定时器
// if(current == target) {
//
clearInterval(obj.timer);
// }这种方法不可行，因为要改变的是三个属性的值，
//现在left=200,width=800,top=200,这三个当中肯定是left值先到达目标值，
//到了之后就会清除定时器，而此时width和top还没有到达目标值，所以这种方法不可行。
if(current != json[k]) {
flag = false;//只要这三个属性值中有一个没有达到目标值就让flag=flase。
}
}
// 遍历结束后也就有了结果，这时再决定是否清除定时器。
if(flag) {
clearInterval(obj.timer);
if(fn) {
// 定时器结束后才会执行回调函数，这里判断是否有回调函数，如果有就执行
fn();
}
}
}, 30);
}