17. 运动
DOM高级
运动原理--->匀速运动--->加减速运动----->缓冲运动
抛物线运动--->圆周运动
1.运动原理
运动原理：JavaScript 实现运动的原理，就是通过定时器不断改变元素的位置，直至到达目标点后停止运动。通常，要让元素动起来，我们会通过改变元素的 left 和 top 值来改变元素的相对位置。
方法：
1.运动的物体使用绝对定位
2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetLeft（offsetRight）来控制左右移动。
步骤：
1、开始运动前，先清除已有定时器 （因为：是连续点击按钮，物体会运动越来越快,造成运动混乱）
2、开启定时器，计算速度
3、把运动和停止隔开（if/else),判断停止条件，执行运动
2.匀速运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
}
#box{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<button id="btn1" onclick="startMove()">开始</button>
<div id="box"></div>
</body>
</html>
<script>
let box = document.getElementById("box");
let time = null;
function startMove(){
clearInterval(time);
time = setInterval(function(){
box.style.left = box.offsetLeft + 5 + "px";
if(box.offsetLeft > 300){
box.style.left = "300px";//注意边界问题
clearInterval(time);
}
},50);
}
</script>
//问题 频繁点击按钮 由于每次点击 都要重新启动定时器 相当于加速
//解决 每次启动定时器时,将上一个定时器清除
3.匀速运动的优化：往返运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
}
#box{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<button id="btn1" onclick="startMove(300)">开始</button>
<button id="btn2" onclick="startMove(0)">开始</button>
<div id="box"></div>
</body>
</html>
<script>
let box = document.getElementById("box");
let time = null;function startMove(targat){
clearInterval(time);
time = setInterval(function(){
let speed = targat - box.offsetLeft > 0 ? 5:-5;
box.style.left = box.offsetLeft + speed + "px";
if(box.offsetLeft >= 300 || box.offsetLeft <=0){
clearInterval(time);
}
},50);
}
</script>
//问题 频繁点击按钮 由于每次启动 都要重新启动定时器 相当于加速
//解决 每次启动定时器时,将上一个定时器清除
4.匀速透明运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
}
#box{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 200px;
left: 200px;
opacity: 0.3;
}
</style>
</head>
<body>
<div id="box" onmouseover="startMove(0.1)" onmouseout="startMove(1)">
</div>
</body>
</html>
<script>
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
let box = document.getElementById("box");
let opa = getStyle(box,"opacity");//这货的返回值为字符串
let time = null;
function startMove(target){
clearInterval(time);
time = setInterval(function(){
let speed = target-opa>0?0.01:-0.01;
// 字符串相加结果不是数字而是字符串
box.style.opacity = Number(getStyle(box,"opacity"))+speed;
if(getStyle(box,"opacity") == 1 || getStyle(box,"opacity") == 0){
clearInterval(time);
}
},50);
}
</script>
5.缓冲运动与封装
原理：//缓冲运动原理
let speed = (target-obj.offsetLeft)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);//核心算法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 200px;
left: 0px;
}
</style>
</head>
<body>
<button id = "btn">起飞</button>
<div id="box"> </div>
</body>
</html>
let box = document.getElementById("box");
box.time = null;
function startMove(obj,target){
clearInterval(obj.time);
obj.time = setInterval(function(){
let speed = (target-obj.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.style.left = obj.offsetLeft + speed + "px";
},50);
}
let btn = document.getElementById("btn");
btn.onclick = function(){
startMove(box,300);
}
6.反弹运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
height: 25px;
width: 25px;
position: absolute;
border-radius: 50%;
background: red;
top: 50%;
}
</style>
</head>
<body>
<button onclick="startMove()">点击</button>
<div id="box"></div>
</body>
</html>
<script>
var box = document.getElementById("box");
var time = null;
var speedX = 5;
var speedY = 5;
function startMove(){
clearInterval(time);
time = setInterval(function(){
box.style.left = box.offsetLeft + speedX + "px";
box.style.top = box.offsetTop + speedY + "px";
if(box.offsetLeft<0){
speedX *= -1;
}
var maxX = window.innerWidth-box.offsetWidth;
if(box.offsetLeft>maxX){
speedX *= -1;
}
if(box.offsetTop<0){
speedY *= -1;
}
var maxY = window.innerHeight-box.offsetHeight;
if(box.offsetTop>maxY){
speedY *= -1;
}
},50);
}
</script>
7.*圆周运动
必须已知大圆r以及角度,否则没法玩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#ball{
height: 30px;
width: 30px;
background: red;
position: absolute;
left: 400px;
top:100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
let r = 200;
//角度
let deg = 90;
let time = null;
let ball = document.getElementById("ball");
//圆心坐标
let circleCenter = {
x:ball.offsetLeft + ball.offsetWidth/2,
y:r+ball.offsetHeight+ball.offsetTop
}
time = setInterval(function(){
ball.style.left = circleCenter.x + r*Math.cos(deg*Math.PI/180) + "px";
ball.style.top = circleCenter.y - r*Math.sin(deg*Math.PI/180) + "px";
deg--;
},30);
浙公网安备 33010602011771号