js--动画函数（最全版）

一、简单版

可以实现动画移动的效果

function animate(obj, target) {
//Obj目标对象 target目标位置
var timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(timer);
}
else {
obj.style.left = obj.offsetLeft + 1 + 'px';
}
}, 30)
}

二、

思考：如果有多个对象点用函数就会在内存中开辟多个空间，浪费资源

2、多次调用，函数名在内存空间中都一样，容易混乱

 js是一个动态语言，很方便添加属性

function animate(obj, target) {
//把对象作为obj的属性
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
}
else {
obj.style.left = obj.offsetLeft + 1 + 'px';
}
}, 30)
}

三、

思考：如果按钮调用动画函数，点击按钮次数越多动画速度越快   怎么办？

点的次数越多，开启的定时器就越多。让元素只有一个定时器在运行就可以解决

function animate(obj, target) {
//清除定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
}
else {
obj.style.left = obj.offsetLeft + 1 + 'px';
}
}, 30)
}

四、

思考：以上都是匀速动画，如何让它缓动？

一开始快，越来越放慢步伐

 应该用一个步长公式来控制每次行走的步长

step=（目标值-当前位置）/10  

这样就会有规律的缓动

function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//添加步长公式
step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
}
else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 30)
}

五、

思考：打开浏览器控制台你会发现它到不了精准的值，是因为步长会有小数存在

而也会有负数存在，所以我们要考虑两个方面：一个是步长为正数（取大）一个是步长为负数（取小）

 用到了数学函数：Math.ceil取大     Math.floor取小

function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
step = (target - obj.offsetLeft) / 10;
//正数取大
负数取小
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
}
else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 30)
}

六、

 callback回调函数：将函数传递到另一个函数中

function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
step = (target - obj.offsetLeft) / 10;
//正数取大
负数取小
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
//放在函数结束的条件里 因为回调函数等函数结束后才执行
if (callback) {
//判断如果有就执行
callback();
}
}
else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 30)
}

好,动画函数就总结到这里了，我要继续苦研轮播图去咯

希望下一篇是我写得手写轮播图！加油

最后

以上就是香蕉网络为你收集整理的js--动画函数（最全版）的全部内容，希望文章能够帮你解决js--动画函数（最全版）所遇到的程序开发问题。

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