- 个人主页:Aic山鱼
个人社区:山鱼社区
- 如果文章对你有所帮助请点个吧!
- 欢迎关注、点赞、收藏(一键三连)和订阅专哦
目录
前言
1.动画原理
2.动画函数的封装
3.给不同元素添加定时器
4.缓动动画原理
5.给动画添加回调函数
6.动画函数的使用
写在最后
动画对于我们来说都不陌生,css里面就有很多动画,2d,3d等各种动画,本篇主要是如何使用js实现动画效果,如果本篇文章对你有帮助,点赞支持一下吧!
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动距离
3.利用定时器不断重复这个操作
4.加一个结束定时器的条件
5.注意该元素需要添加定位,才能使用element.style.left
把这个动画封装成一个函数,方便以后的使用,该封装函数里的obj是哪个元素要进行动画的实现rug是该元素要移动多少距离
这样就能实现多个元素进行动画的使用了,并且每个元素都有属于自己的定时器
公式:目标值-现在的位置/10 ,作为每次的移动距离
Document
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面 ,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。
当跑完800米后,会弹出一个框“hello”,这个就是在执行完800米这个动画后再次进行的函数,这就是回调函数
实现侧边栏滑动效果
当鼠标经过slider就会让con这 个盒子滑动到左侧
当鼠标离开slider就会让con这 个盒子滑动到右侧
Document
←
问题反馈
function animate(obj, rug, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值
// var step = Math.ceil((rug - obj.offsetLeft) / 10);
var step = (rug - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == rug) {
clearInterval(obj.timer);
if (callback) {
callback();
}
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
// 回调函数写道计时器结束里
}, 15)
}
我是Aic山鱼,感谢您的支持
原 创 不 易 ✨还希望支持一下
点赞:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!
山鱼社区:山鱼社区希望三连下⭐✍支持一下博主