javascript匀速动画和缓冲动画
2016-09-16 12:14
246 查看
关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。
使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。
老规矩，先上代码，能直接看懂的可以节省时间。
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>move</title>
<link rel="stylesheet" href="move1.css">
</head>
<body>
<input type="button" value="匀速移动" id="move1">
<input type="button" value="渐变移动" id="move2">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<script type="text/javascript" src="move1.js"></script>
</body>
</html>
css部分：
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-top: 10px;
}
js部分：
/**
* Created by siri on 2016/9/10.
*/
window.onload=function () {
var btn1 = document.getElementById('move1');
var btn2 = document.getElementById('move2');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
btn1.onclick = function () {
animate1(box1,500);
}
btn2.onclick = function () {
animate2(box2,500);
}
//匀速动画
function animate1(ele,target){
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target>ele.offsetLeft?3:-3;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长，那么就不能再前进了
//因为步长有正有负，所有转换成绝对值来比较
console.log(val);
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
//缓动动画封装
function animate2(ele,target) {
clearInterval(ele.timer); //清楚历史定时器
ele.timer = setInterval(function () {
//获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
var step = (target-ele.offsetLeft)/10;
//对步长进行二次加工(大于0向上取整,小于0项下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理： 目标位置 = 当前位置 + 步长
console.log(step);
ele.style.left = ele.offsetLeft + step + "px";
//检测缓动动画有没有停止
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px"; //直接移动指定位置
clearInterval(ele.timer);
}
},30);
}
}
html和css基本就是为了我们的js部分搭框架，不讲太多，要注意的是，一定要对全局的margin和padding清零，否则的话他在计算的时候初始的margin和padding会影响计算，从而导致有时候运动不停止的情况。
javascript部分代码的解析在源码中已经很详细了，下面主要讲解原理。
匀速运动：
通过setInterval函数我们控制每多少毫秒运动的距离，然后在快要到达指定位置的时候，判断步长（每多少毫秒运动的距离）和此时和目标位置的距离，如果步长大于此时和目标位置的距离，则直接定位到目标位置，这样做是为了避免步长和总距离不是整数倍关系而产生最后到达位置和目标位置有差值的错误。
缓冲运动：
缓冲运动的基本函数是和匀速运动一样的，只是缓冲运动的步长我们是通过和目标位置的距离来确定的，这样我们的步长是不断变小的，从而实现缓冲运动的效果。在确定步长的时候我们使用Math.ceil和Math.floor对步长值进行取整是为了避免出现小数，因为如果出现小数后面最后到达的位置肯定是和目标位置有误差的。
注意事项：在每次移动开始前一定要使用clearInterval清除定时器。
使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。
老规矩，先上代码，能直接看懂的可以节省时间。
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>move</title>
<link rel="stylesheet" href="move1.css">
</head>
<body>
<input type="button" value="匀速移动" id="move1">
<input type="button" value="渐变移动" id="move2">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<script type="text/javascript" src="move1.js"></script>
</body>
</html>
css部分：
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
margin-top: 10px;
}
js部分：
/**
* Created by siri on 2016/9/10.
*/
window.onload=function () {
var btn1 = document.getElementById('move1');
var btn2 = document.getElementById('move2');
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
btn1.onclick = function () {
animate1(box1,500);
}
btn2.onclick = function () {
animate2(box2,500);
}
//匀速动画
function animate1(ele,target){
//要用定时器，先清除定时器
//一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
//目标值如果大于当前值取正，目标值如果小于当前值取负
var speed = target>ele.offsetLeft?3:-3;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长，那么就不能再前进了
//因为步长有正有负，所有转换成绝对值来比较
console.log(val);
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
//缓动动画封装
function animate2(ele,target) {
clearInterval(ele.timer); //清楚历史定时器
ele.timer = setInterval(function () {
//获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
var step = (target-ele.offsetLeft)/10;
//对步长进行二次加工(大于0向上取整,小于0项下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理： 目标位置 = 当前位置 + 步长
console.log(step);
ele.style.left = ele.offsetLeft + step + "px";
//检测缓动动画有没有停止
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px"; //直接移动指定位置
clearInterval(ele.timer);
}
},30);
}
}
html和css基本就是为了我们的js部分搭框架，不讲太多，要注意的是，一定要对全局的margin和padding清零，否则的话他在计算的时候初始的margin和padding会影响计算，从而导致有时候运动不停止的情况。
javascript部分代码的解析在源码中已经很详细了，下面主要讲解原理。
匀速运动：
通过setInterval函数我们控制每多少毫秒运动的距离，然后在快要到达指定位置的时候，判断步长（每多少毫秒运动的距离）和此时和目标位置的距离，如果步长大于此时和目标位置的距离，则直接定位到目标位置，这样做是为了避免步长和总距离不是整数倍关系而产生最后到达位置和目标位置有差值的错误。
缓冲运动：
缓冲运动的基本函数是和匀速运动一样的，只是缓冲运动的步长我们是通过和目标位置的距离来确定的，这样我们的步长是不断变小的，从而实现缓冲运动的效果。在确定步长的时候我们使用Math.ceil和Math.floor对步长值进行取整是为了避免出现小数，因为如果出现小数后面最后到达的位置肯定是和目标位置有误差的。
注意事项：在每次移动开始前一定要使用clearInterval清除定时器。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript匀速动画和缓冲动画
- JavaScript动画缓冲算法总结 转
- JavaScript中的匀速运动和变速(缓冲)运动详细介绍
- JavaScript 缓冲动画代码样例
- JavaScript动画：offset和匀速动画详解(含轮播图的实现)
- JavaScript匀速动画封装
- JavaScript中的匀速运动和变速(缓冲)运动详细介绍
- JavaScript 动画 3---缓冲动画
- JavaScript 特效之匀速动画
- JavaScript原生折叠扩展收缩菜单带缓冲动画
- javascript动画效果之匀速运动
- JavaScript动画2-缓冲运动
- javascript动画效果之多物体缓冲运动
- 利用javascript实现在圆周上匀速划动的动画效果
- JavaScript动画篇之缓冲运动
- javascript动画效果之匀速运动(修订版)
- JavaScript 动画之缓冲运动
- javascript-缓冲动画
- JavaScript 动画之匀速运动
- 原生javascript实现匀速运动动画效果