前端开发者| web前端开发 技能 |
| web前端开发必备技能 |
| 前端开发技能点 |
代码：
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>缓动动画</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<button id=”btn”>点击</button>
<div id=”box” class=”box”>
</div>
<script>
window.onload = function () {
var btn = document.getElementById(‘btn’);
var btn2 = document.getElementById(‘btn2’);
var box = document.getElementById(‘box’);
btn.onclick = function () {
buffer(box, { width: 400, top: 200, left: 200 });
};
}
var speed = 0, target = 0, begin = 0;
function buffer(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var key in json) {
target = json[key];
begin = parseInt(getCssAttr(obj, key));
speed = (target – begin) / 20;
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);//判断方向
box.style[key] = begin + speed + ‘px’;//如果你不需要判断方向，那么就可以合写成公式形式
if (target != begin) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
}
}, 20)
}
function getCssAttr(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, null)[attr];
}
}
</script>
</body>
</html>
缓动动画在应用中还是蛮多的。
缓动动画是一个速度从快到慢的过程，先快后慢的过程。知道这个过程，那就是如同上图所说的一样，每次相同时间内，所移动的距离要比上一次要少。
y2的距离要比y1的距离小，每次距离终点的距离是越来越小的，以为终点值end是个定值，begin是个逐渐变大值，每次end减去begin就会得到一个越来越小的值，这个值再除以一个0~1之间的系数，也是越来越小，所以速度会越来越慢，这样就促成了缓动动画。这个是上图的推导过程：
1.第一次走的距离y1=s1K;
2.第二次走的距离y2 =s2k; 推导 => y2=(s1-y1)k
总体蓝块所走的距离
3.第一次：begin1 = 0+(s1-0)k => y1;第一我们起点是：0,所以与y1是相等的；
4.第二次：begin = begin1+(s1-y1)*k,这次走的时候你要加上上次走过的距离；
以此类推，每次走的距离都不一样，每次基本都是要比上次的距离要少一些。
| 前端开发的专业技能 |
| web前端开发师具备技能 |
| web前端开发技能技巧 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册