1. 首页
  2. 文章中心
  3. JavaScript学习笔记

动画函数封装实现原理二、缓动效果

84 阅读 0 评论
我是靠谱客的博主 害怕吐司，最近开发中收集的这篇文章主要介绍动画函数封装实现原理二、缓动效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

目录

实现原理

一、匀速动画

1、实现步骤：

2、动画函数的封装

二、缓动效果

1、原理：

2、步骤：

3、使动画在多个目标值之间移动

案例：从500到800 再从800到500

4、动画函数添加回调函数

案例：到达500之后背景颜色由skyblue变成pink

总结

案例：滑动效果

实现原理

        通过定时器setInterval()不断移动盒子位置

一、匀速动画

1、实现步骤：

  • 获得盒子当前位置
  • 让盒子在当前位置加上一个移动距离
  • 利用定时器不断重复这个操作
  • 加一个结束定时器的条件
  • 注意此元素需要添加定位，才能使用element.style.left
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
var timer = setInterval(function () {
if (div.offsetLeft >= 400) {
//停止动画 本质是停止定时器
clearInterval(timer);
} else {
div.style.left = div.offsetLeft + 1 + "px";
}
}, 30);
</script>
</body>
</html>

2、动画函数的封装

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);
}
animate(obj, target);

问题：当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

解决方案：先清除以前的定时器，只保留当前的一个定时器执行

clearInterval(obj.timer);

完整代码： 


<head>
<style>
div {
position: absolute;
top: 50px;
left: 0;
height: 100px;
width: 100px;
background-color: pink;
}
span {
position: absolute;
top: 200px;
left: 0;
height: 200px;
width: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<button>点击skyblue开始动画</button>
<div></div>
<span></span>
<script>
// obj是目标对象 target是目标位置
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);
}
var div = document.querySelector("div");
var span = document.querySelector("span");
var btn = document.querySelector("button");
animate(div, 300);
btn.addEventListener("click", function () {
animate(span, 200);
});
</script>
</body>
</html>

二、缓动效果

1、原理：

        让元素运动速度有所变化，常见：让速度慢慢停下来

2、步骤：

  • 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
  • 核心算法：每次移动的距离步长=（目标值-现在的位置）/ 10 
  • 停止定时器条件：当前盒子位置=目标位置

注意：步长值需要取整

function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
// 给不同的元素指定不同的定时器
obj.timer = setInterval(function () {
// 因为是动态变化的 所以步长值写到定时器的里面
var step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
} else {
// 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + "px";
}
}, 15);
}

3、使动画在多个目标值之间移动

        判断步长是正值还是负值——正值往大取，负值往小取

var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);

案例：从500到800 再从800到500


<head>
<style>
span {
position: absolute;
top: 200px;
left: 0;
height: 200px;
width: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<button class="btn500">点击走到500</button>
<button class="btn800">点击走到800</button>
<span></span>
<script>
// obj是目标对象 target是目标位置
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
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);
} else {
// 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + "px";
}
}, 15);
}
var span = document.querySelector("span");
var btn500 = document.querySelector(".btn500");
var btn800 = document.querySelector(".btn800");
btn500.addEventListener("click", function () {
animate(span, 500);
});
btn800.addEventListener("click", function () {
animate(span, 800);
});
</script>
</body>
</html>

4、动画函数添加回调函数

回调函数原理

        函数可以作为一个参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

案例：到达500之后背景颜色由skyblue变成pink


<head>
<style>
span {
position: absolute;
top: 200px;
left: 0;
height: 200px;
width: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<button class="btn500">点击走到500</button>
<span></span>
<script>
// obj是目标对象 target是目标位置
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);
// 回调函数写到定时结束里面
if (callback) {
// 调用函数
callback();
}
} else {
// 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + "px";
}
}, 15);
}
var span = document.querySelector("span");
var btn500 = document.querySelector(".btn500");
btn500.addEventListener("click", function () {
animate(span, 500, function () {
span.style.backgroundColor = "pink";
});
});
</script>
</body>
</html>

总结

  • 匀速动画=盒子当前位置-固定的值
  • 缓动动画=盒子当前的位置+变化的值[（目标值-现在的位置）/10]

案例：滑动效果

此处将动画函数直接封装成了animate.js文件。

滑动.html


<head>
<style>
.sliderbar {
position: fixed;
right: 0;
bottom: 100px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #fff;
}
.con {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 40px;
background-color: purple;
z-index: -1;
}
</style>
<script src="animate.js"></script>
</head>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script>
var sliderbar = document.querySelector(".sliderbar");
var con = document.querySelector(".con");
sliderbar.addEventListener("mouseenter", function () {
animate(con, -160, function () {
sliderbar.children[0].innerHTML = "→";
});
});
sliderbar.addEventListener("mouseleave", function () {
animate(con, 0, function () {
sliderbar.children[0].innerHTML = "←";
});
});
</script>
</body>
</html>

animate.js

// obj是目标对象 target是目标位置
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);
// 回调函数写到定时结束里面
if (callback) {
// 调用函数
callback();
}
} else {
// 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + "px";
}
}, 15);
}

最后

以上就是害怕吐司为你收集整理的动画函数封装实现原理二、缓动效果的全部内容，希望文章能够帮你解决动画函数封装实现原理二、缓动效果所遇到的程序开发问题。

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

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(56)

相关文章

JavaScript animate动画函数封装
JavaScript animate动画函数封装
jquery封装的固定动画
jquery封装的固定动画
animate用法 js原生_原生js实现jquery函数animate()动画效果的简单实例
animate用法 js原生_原生js实现jquery函数animate()动画效果的简单实例
jQuery：jQuery库中封装的一些常见动画效果
jQuery：jQuery库中封装的一些常见动画效果
动画函数封装实现原理二、缓动效果
动画函数封装实现原理二、缓动效果
原生js实现jquery函数animate()动画效果
原生js实现jquery函数animate()动画效果
封装多属性运动函数
封装多属性运动函数
封装简单动画函数
封装简单动画函数

评论列表共有 0 条评论

立即
投稿
返回
顶部