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 缓动动画 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JavaScript缓动动画函数的封装方法
本文实例为大家分享了JavaScript缓动动画函数的封装代码,供大家参考,具体内容如下 本文将从封装缓动动画的以下几个部分进行封装(1.单个属性,2.多个属性,3.缓动框架之回调函数,4.缓动框架之层级与透明度) 首先:获取元素样式的兼容方式 function getStyle(ele,attr){ //获取任意类型的CSS样式的属性值 if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; }
-
JavaScript实现缓动动画
JavaScript原生定时器实现动画的缓动效果,供大家参考,具体内容如下 原理很简单通过定时器修改边距达到移动动画效果 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = (指定移动位置边距 - obj.offsetLeft) / 10; var step = (ydpx - obj.offsetLeft) / 10; 有一个细节需要注意下: 移动的步数应该去掉小数,否者因为除法的原因无法移动到指定位置,会有一些差距 当step小于0对应的是向左移动舍去
-
js实现带缓动动画的导航栏效果
话不多说,请看实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> ul,li { padding: 0; margin: 0; } li { list-style: none; } #box{ height: 48px; width: 900px; bac
-
js实现缓动动画
本文实例为大家分享了js实现缓动动画的具体代码,供大家参考,具体内容如下 利用定时器来控制元素的offsetLeft的值,offsetLeft = 开始位置 + (最终位置 - 开始位置)* 缓动系数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
-
tween.js缓动补间动画算法示例
一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开始前,是需要先确定好的. 首先引入一个概念就补间动画 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. tween.js在Flash中可以解释为补间动画. 那么问题来了,什么是补间动画呢? 相信学过Flash的都知道补间动画是flash主要的非常重要的表现手段之一
-
javascript实现左右缓动动画函数
本文实例为大家分享了js实现左右缓动动画函数的封装代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-4.4.1.css" > <style> .box{ width: 100px; height: 100px;
-
javascript实现缓动动画效果
本文实例为大家分享了javascript实现缓动动画效果的具体代码,供大家参考,具体内容如下 实现思路 1.主要使用setInterval定时函数 2.给需要动画的元素添加绝对定位和偏移量,注意它的父元素要给相对定位 3.多个元素执行动画,可以将动画代码封装成一个函数 4.元素调用定时函数,定时移动,定时函数里- - -计算出每次移动距离, 公式:var step = (target - obj.offsetLeft) / 20; obj 动画对象, target 目标左偏移量,20 控制的是动
-
JavaScript 详解缓动动画的封装与使用
实现过程分析 (1)如何重复调用? 答:封装一个函数,用一次调用一次 代码分析: function animate(obj, target, callback) { //详细实现步骤 }; animate :(动画函数) obj(动画对象):给谁添加动画效果 target(目标值):移动到什么距离 callback(回调函数):同时要执行什么功能 (2)如何实现缓动效果?(缓动动画核心算法) 答:移动距离 =(目标值 - 现在盒子位置)/ 10,移动距离会慢慢变小,直至停下,就实现了缓动原理 代
-
jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. 仔细查看createTweens函数,实际上就是遍历调用了tweeners ["*"]的数组中的函数(实际上就只有一个元素). function createTweens( animation, props ) { jQuery.each( props, function( prop, v
-
JS轮播图中缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1.我想让页面中的一个盒子从开始的位置匀速向右运动到200px的地方,该怎么实现? 分析: 1)我们需要知道盒子在哪个地方,这个可以通过offsetLeft属性去获取: 2)要让盒子匀速运动,对于js肯定需要setInterval了: 3)要让盒子向右边跑起来?那就是需要不停改变盒子与左边起始点的距离,
-
JavaScript详解使用Promise处理回调地狱与async await修饰符
目录 Promise 回调地狱 Promise简介 Promise简单使用 async和await 修饰符 小结 Promise Promise能够处理异步程序. 回调地狱 JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么时候返回结果是不可控的,如果我们希望几个异步请求按照顺序来执行,那么就需要将这些异步操作嵌套起来,嵌套的层数特别多,就会形成回调地狱 或者叫做 横向金字塔. 案例:有a.txt.b.txt.c.txt三个文件,使用fs模板按照顺序来读取里面的内容,代码:
-
详解java调用存储过程并封装成map
详解java调用存储过程并封装成map 本文代码中注释写的比较清楚不在单独说明,希望能帮助到大家, 实例代码: public List<Map<String , Object>> doCallProcedure(String procedureString,String[] parameters) throws PersistentDataOperationException { if (!isReady ()) { throw new PersistentDataOperatio