JavaScript 详解缓动动画的封装与使用
实现过程分析
（1）如何重复调用？
答：封装一个函数，用一次调用一次
代码分析：
function animate(obj, target, callback) { //详细实现步骤 };
animate ：（动画函数）
obj（动画对象）：给谁添加动画效果
target（目标值）：移动到什么距离
callback（回调函数）：同时要执行什么功能
（2）如何实现缓动效果？（缓动动画核心算法）
答：移动距离 =（目标值 - 现在盒子位置）/ 10，移动距离会慢慢变小，直至停下，就实现了缓动原理
代码分析：
var step = (target - obj.offsetLeft) / 10;
step（移动距离）： 元素要移动的距离
target（目标值）：移动到什么距离
obj.offsetLeft（盒子现在的位置）：盒子现在距离左侧的距离
（3）为什么移动不到指定位置？（给的目标距离是500px，移动到496.4就停下了）
答：因为需要取整，正数往上取整，负数向下取整
代码分析：
step = step > 0 ? Math.ceil(step) : Math.floor(step);
如果setp要移动的距离是正数，就向上取整，如果是负数，就向下取整，采取三元表达式以优化代码，提升整体质量
（4）如何让目标元素真正移动起来？
答：添加定时器，并将实时移动距离（步长）赋值给元素
代码分析：
var timer = setInterval(function () { //详细实现代码 }, 15); //添加定时器
obj.style.left = obj.offsetLeft + step + 'px'; //步长
1.给定时器添加名字是为了好清除定时器，时间设置为15（实际开发常用15）
2.元素的左侧的值 = 元素离左侧的距离 + 移动距离 + 'px' （记得一定要加px单位），实现原理就是不断将最新的值赋值给元素，实现动起来的效果
（5）为什么会鬼畜或者越点越快？
答：因为定时器重复添加，需要每次调用时清除定时器
代码分析：
clearInterval(timer);
两个地方需要清除，第一是刚调用缓动动画函数时，避免鬼畜和破速，第二是判断元素到达指定位置没有，如果到达了就停止定时器
案例测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sliderbar {
/* width: 240px; */
/* height: 40px; */
/* 父盒子定位根据实际要求来 */
position: absolute;
right: 0;
top: 100px;
text-align: center;
line-height: 40px;
/* display: block; */
width: 40px;
height: 40px;
cursor: pointer;
}
.sp {
position: relative;
color: #fff;
}
.con {
/* 设置了绝对定位就在父盒子里飘起来 */
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: pink;
z-index: -1;
color: #fff;
}
</style>
<script src="./animate.js"></script>
</head>
<body>
<div class="sliderbar">
<span class="sp">←</span>
<div class="con">问题反馈</div>
</div>
<script>
var sliderbar = document.querySelector('.sliderbar');
// var sp = document.querySelector('.sp');
var con = document.querySelector('.con');
sliderbar.addEventListener('mouseenter', function() {
//animate(obj, target, callback);
animate(con, -160, function() {
sliderbar.children[0].innerHTML = '→';
});
})
sliderbar.addEventListener('mouseleave', function() {
//animate(obj, target, callback);
animate(con, 0, function() {
sliderbar.children[0].innerHTML = '←';
});
})
</script>
</body>
</html>
整体思路：通过给盒子添加鼠标事件来调用动画函数，最终实现效果
运行效果：
缓动动画函数最终封装代码(animate.js)：
function animate(obj, target, callback) {
//调用函数就清除一次定时器，避免问题发生
clearInterval(obj.timer)
//添加定时器
obj.timer = setInterval(function () {
//步长值写到计时器里面 改为整数(往上取整)
var step = (target - obj.offsetLeft) / 10;
//整数往大了取，负数往小了取
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//如果已经到达指定位置就停止定时器
clearInterval(obj.timer);
//回调函数写到定时器结束之后
callback && callback();
}
//把每次加一步长值改变为慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
生命不息，学习不止，键盘敲烂，月薪过万 ！加油，代码人
到此这篇关于JavaScript 详解缓动动画的封装与使用的文章就介绍到这了,更多相关JavaScript 缓动动画 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
有些朋友在做div css js切换时,会碰到很多的问题，于是搜集整理了一下，拿出来和大家分享，希望可以帮助你们2012-12-12
Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。2016-07-07
缓动函数requestAnimationFrame 更好的实现浏览器经动画
requestAnimationFrame是什么?一直是我们大家所疑惑的，缓动函数requestAnimationFrame 更好的实现浏览器经动画,接下来将为大家详细介绍2012-12-12
在初学JS的时候就知道这个函数，却一直没有了解过他的用途，也一直都是睁一只眼闭一只眼，这次来深入地了解一下这个函数的作用。2010-01-01
这篇文章主要给大家介绍了关于JavaScript数值类型知识汇总的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-11-11
JS排序方法（sort，bubble，select，insert）代码汇总
新技术一直在不断变化，掌握一些基础是未来学习不断更新的技术的坚实基础。近来闲来无事,为了温习一下从前学的数据结构，将数据结构中的排序算法用JS实现了一遍，2016-01-01
这篇文章主要为大家详细介绍了JavaScript面向对象中的封装和继承，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
js split 的用法和定义 js split分割字符串成数组的实例代码
关于js split的用法，我们经常用来将字符串分割为数组方便后续操作，今天写一段广告判断代码的时候，竟然忘了split的用法了，特整理下，方便需要的朋友2012-05-05
基于JavaScript 下namespace 功能的简单分析
前些天在剥离 百度随心听 的播放器引擎时，看到了一个namespace方法，觉得新奇，当然只是对于我自己而言，我入门js不久，经验尚浅2013-07-07
本文详细讲解了javascript中instanceof运算符的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论