JavaScript 动画
程序员文章站
2022-06-25 08:30:31
动画原理 Document 动画原理 Document 夏雨荷 动画封装 Document 点击夏雨荷才走 夏雨荷 不同动画缓动动画 Document 点击夏雨荷才走 夏雨荷 ... ......
动画原理
<!doctype html>
<html lang="en">
<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;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.queryselector('div');
var tinner = setinterval(function () {
if (div.offsetleft > 400) {
clearinterval(tinner);
}
div.style.left = div.offsetleft + 1 + 'px'
}, 30)
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<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;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<span>夏雨荷</span>
<script>
function animate(obj, target) {
var inner = setinterval(function () {
if (obj.offsetleft >= target) {
clearinterval(inner)
}
obj.style.left = obj.offsetleft + 1 + 'px'
},30)
}
var div = document.queryselector('div');
var span = document.queryselector('span');
animate(div, 200);
animate(span, 300);
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<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;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>点击夏雨荷才走</button>
<div></div>
<span>夏雨荷</span>
<script>
var btn = document.queryselector('button');
var div = document.queryselector('div');
var span = document.queryselector('span');
function move(obj, target) {
clearinterval(obj.tinner); // 防止多次点击
obj.tinner = setinterval(function () {
if (obj.offsetleft >=target) {
clearinterval(tinner)
}
obj.style.left = obj.offsetleft + 1 + 'px'
},10)
}
move(div, 300);
btn.addeventlistener('click', function () {
move(span,400)
})
</script>
</body>
</html>
缓动动画
<!doctype html>
<html lang="en">
<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;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>点击夏雨荷才走</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路：
// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearinterval(obj.timer);
obj.timer = setinterval(function() {
// 步长值写到定时器的里面
var step = (target - obj.offsetleft) / 30;
if (obj.offsetleft == target) {
// 停止动画 本质是停止定时器
clearinterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetleft + step + 'px';
}, 15);
}
var span = document.queryselector('span');
var btn = document.queryselector('button');
btn.addeventlistener('click', function() {
// 调用函数
animate(span, 500);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<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>
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">点击夏雨荷到500</button>
<button class="btn800">点击夏雨荷到800</button>
<span>夏雨荷</span>
<script>
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);
}
obj.style.left = obj.offsetleft + step + 'px'
}, 15);
}
var btn500 = document.queryselector('.btn500');
var btn800 = document.queryselector('.btn800');
var span = document.queryselector('span');
btn500.onclick = function () {
animate(span, 500);
};
btn800.onclick = function () {
animate(span, 800);
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<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>
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">点击夏雨荷到500</button>
<button class="btn800">点击夏雨荷到800</button>
<span>夏雨荷</span>
<script>
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()
}
}
obj.style.left = obj.offsetleft + step + 'px'
}, 15);
}
var btn500 = document.queryselector('.btn500');
var btn800 = document.queryselector('.btn800');
var span = document.queryselector('span');
btn500.onclick = function () {
animate(span, 500);
};
btn800.onclick = function () {
animate(span, 800, function () {
span.style.backgroundcolor = 'red'; // 回调函数
});
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<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>
.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.onmouseenter = function () {
animate(con, -160, function() {
// 当我们动画执行完毕，就把 ← 改为 →
sliderbar.children[0].innerhtml = '→';
});
};
sliderbar.onmouseleave = function () {
animate(con, 0, function() {
// 当我们动画执行完毕，就把 → 改为 ←
sliderbar.children[0].innerhtml = '←';
});
}
</script>
</body>
</html>
相关资料:
下一篇： 推荐一款Mac系统清理工具