原生运动解析
1.匀速运动
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
}
#btn {
margin-top: 120px;
}
.line{position: absolute;left:500px;top: 0;height: 200px;background-color: green;width: 1px;}
</style>
</head>
<body>
<div id="div"></div>
<input id="btn" type="button" value="点击运动" />
<span class="line"></span>
<script type="text/javascript">
var div = document.getElementById("div")
var btn = document.getElementById("btn")
div.timer = null;
var target = 500;
btn.onclick = function() {
div.timer = setInterval(function() {
var speed = 10;
if(div.offsetLeft >= target) {
clearInterval(div.timer)
} else {
div.style.left = div.offsetLeft + speed + 'px'
}
}, 30)
}
</script>
</body>
</html>
2.缓冲运动
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>2</title> <style> #div { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background-color: red; } #btn { margin-top: 120px; } .line{position: absolute;left:500px;top: 0;height: 200px;background-color: green;width: 1px;} </style> </head> <body> <div id="div"></div> <input id="btn" type="button" value="点击运动" /> <span class="line"></span> <script type="text/javascript"> var div = document.getElementById("div") var btn = document.getElementById("btn") div.timer = null; var target = 500; btn.onclick = function() { div.timer = setInterval(function() { var speed =(target-div.offsetLeft)/15; // iSpeend=Math.ceil(iSpeend) //向下取整 left0 目标500 // iSpeend=Math.floor(iSpeend) //向上取整 left500 目标0 speed=speed>0?Math.ceil(speed):Math.floor(speed); // 不写 if else存在回味不准的问题 if(div.offsetLeft == target) { clearInterval(div.timer) } else { div.style.left = div.offsetLeft + speed + 'px' } }, 30) } </script> </body> </html>
3.加速运动
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> #div { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background-color: red; } #btn { margin-top:120px; } </style> </head> <body> <div id="div"></div> <input id="btn" type="button" value="点击运动" /> <script type="text/javascript"> var div = document.getElementById("div") var btn = document.getElementById("btn") div.timer = null; var speed = 30; var target = 1000; btn.onclick = function() { timer = setInterval(function() { //注意 定时器作用域的问题。 speed++; if(div.offsetLeft >= target) { clearInterval(div.timer) div.style.left = target + 'px' } else { div.style.left = div.offsetLeft + speed + 'px' } }, 10) } </script> </body> </html>
4.减速运动
5.弹性运动
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>2</title> <style> #div { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background-color: red; } #btn { margin-top: 120px; } .line { position: absolute; left: 500px; top: 0; height: 200px; background-color: green; width: 1px; } </style> </head> <body> <div id="div"></div> <input id="btn" type="button" value="点击运动" /> <span class="line"></span> <script type="text/javascript"> var div = document.getElementById("div") var btn = document.getElementById("btn") div.timer = null; var speed = 0; var target = 500; var inPos = 0 btn.onclick = function() { div.timer = setInterval(function() { speed += (target - inPos) / 5; //这就是弹性运动 取5是最合适的 speed *= 0.7; //加上摩擦力 取0.7是最合适的 //摩擦力运动 每次速度越来越慢直到停下来 . 用缓冲需要个固定点 ,用减速最后还会往会走不好不自由 if(Math.abs(speed) < 1 && Math.abs(target - inPos) < 1) { clearInterval(div.timer); div.style.left = target + "px"; } else { inPos += speed; div.style.left = inPos + "px"; } //不写if else startMove(obj,iTarget)弹性运动存在回位不准的问题 //div.style.left = div.offsetLeft + speed + 'px' }, 30) } </script> </body> </html>
5.碰撞运动
6.碰撞运动+重力 重力实际就是让它的纵轴速度不断的相加
7.运动库封装 隐藏初始高度为0 变化高度为200
startMove3(odiv,{height:300,width:500},function(){
startMove3(odiv,{opacity:50})
})
function getStyle(obj, attr) { //下面开始就是个任意运动值的框架
if(obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
//新加一个函数 fn 就可以链式运动了
function startMove3(obj, josn, fn) { //定义一个运动框架 obj这个参数表示要让那个div动
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true; //标志这次运动就结束了-----所有的值都到达了
for(var attr in josn) {
//var iCur=parseInt(getStyle(obj,attr));
//01取当前值
var iCur = 0;
if(attr == "opacity") { //如果要动的这个属性attr是opacity
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); //就小数取整, *100后面的速度是处理整数的,做这个是不改后面的速度
} else { //如果要动的这个属性attr是opacity
iCur = parseInt(getStyle(obj, attr)); //就取整数
}
//02算速度
var iSpeed = (josn[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//03检测停止
if(iCur != josn[attr]) {
bStop = false;
}
if(attr == "opacity") {
obj.style.filter = "alpha(opacity:" + (iCur + iSpeed) + ")";
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + "px"; //是整数 比如宽高一类的
}
}
if(bStop) {
clearInterval(obj.timer);
if(fn) {
fn(); //新加一个函数就可以链式运动了
}
}
}, 30);
}
浙公网安备 33010602011771号