BOM ------ 缓动效果
效果 ------ bom
2023-09-11 14:15:54 时间
缓动效果原理
- 思路:让盒子每次移动的距离慢慢变小 速度就会慢下来
- 核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长
- 停止的条件是:让当前盒子位置等于目标位置就停止定时器
缓动效果代码实现
点击按钮, 粉色盒子先快后慢移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缓动效果代码实现</title>
<style>
div{
position: absolute;
left: 0px;
width: 100px;
height: 100px;
background-color: lightblue;
}
span{
position: absolute;
left: 0px;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<button>点击BOM盒移动</button>
<div></div>
<span>BOM</span>
<script>
//简单动画函数封装obj目标对象 target 目标位置
//给不同的元素指定不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器 只保留当前的一个定时器执行
clearInterval(obj.timer)
obj.timer = setInterval(function () {
//步长值写到定时器的里面
// 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整
var step = Math.ceil((target - obj.offsetLeft) / 10)
if(obj.offsetLeft == target){
//停止动画 本质是停止定时器
clearInterval(obj.timer)
}
// 获取是offsetLeft 赋值是style.left
// 把每次加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>
缓动动画原理
点击按钮, 可以让div在两个位置之间移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缓动动画原理</title>
<style>
div{
position: absolute;
left: 0px;
width: 100px;
height: 100px;
background-color: lightblue;
}
span{
position: absolute;
left: 0px;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<button class="btn500">点击BOM盒移动500</button>
<button class="btn800">点击BOM盒移动800</button>
<span>BOM</span>
<script>
//简单动画函数封装obj目标对象 target 目标位置
//给不同的元素指定不同的定时器
function animate(obj, target) {
// 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器 只保留当前的一个定时器执行
clearInterval(obj.timer)
obj.timer = setInterval(function () {
//步长值写到定时器的里面
// 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整
// var step = Math.ceil((target - obj.offsetLeft) / 10)
var step = ((target - obj.offsetLeft) / 10)
// step > 0 向上取整 step < 0 向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step)
if(obj.offsetLeft == target){
//停止动画 本质是停止定时器
clearInterval(obj.timer)
}
// 获取是offsetLeft 赋值是style.left
// 把每次加1 这个步长值 改为一个慢慢变小的值 (目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px'
},15)
}
var span = document.querySelector('span')
var btn500 = document.querySelector('.btn500')
var btn800 = document.querySelector('.btn800')
//调用函数
btn500.addEventListener('click',function(){
animate(span,500)
})
btn800.addEventListener('click',function(){
animate(span,800)
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子的当前位置 + 变化的值( (目标值 - 现在的位置) / 10 )
</script>
</body>
</html>
缓动动画添加回调函数
移动后可以改变div的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缓动动画添加回调函数</title>
<style>
div{
position: absolute;
left: 0px;
width: 100px;
height: 100px;
background-color: lightblue;
}
span{
position: absolute;
left: 0px;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<button class="btn500">点击BOM盒移动500</button>
<button class="btn800">点击BOM盒移动800</button>
<span>BOM</span>
<script>
//简单动画函数封装obj目标对象 target 目标位置
//给不同的元素指定不同的定时器
function animate(obj, target, callBack) {
console.log(callBack);
// 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器 只保留当前的一个定时器执行
clearInterval(obj.timer)
obj.timer = setInterval(function () {
//步长值写到定时器的里面
// 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整
// var step = Math.ceil((target - obj.offsetLeft) / 10)
var step = ((target - obj.offsetLeft) / 10)
// step > 0 向上取整 step < 0 向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step)
if(obj.offsetLeft == target){
//停止动画 本质是停止定时器
clearInterval(obj.timer)
//回调函数写到定时器结束里面
if(callBack){
//调用函数
callBack()
}
}
// 获取是offsetLeft 赋值是style.left
// 把每次加1 这个步长值 改为一个慢慢变小的值 (目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px'
},15)
}
var span = document.querySelector('span')
var btn500 = document.querySelector('.btn500')
var btn800 = document.querySelector('.btn800')
//调用函数
btn500.addEventListener('click',function(){
animate(span,500)
})
btn800.addEventListener('click',function(){
//回调函数
animate(span,800, function(){
span.style.backgroundColor = 'red'
})
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子的当前位置 + 变化的值( (目标值 - 现在的位置) / 10 )
</script>
</body>
</html>
不积跬步无以至千里 不积小流无以成江海
相关文章
- 【学习笔记47】开关变量和拖拽效果
- setAnimationStyle实现的popwindow显示消失的动画效果
- 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
- SwiftUI Button精品组件之完美的SwiftUI抖动按钮效果(教程含源码)
- SwiftUI 动画之如何给Text设置淡入淡出效果 教程含源码opacity
- SwiftUI代码控制视图那个位置圆角效果
- Qt编写雷达模拟仿真工具(模拟点/歼击机/航母/发射导弹/爆炸效果/激光雷达等)
- IoT半导体购并案效果难现 服务器合作案后来居上
- CSS3实现的超酷动态圆形悬浮效果
- 15个CSS3和jQuery的超棒页面过渡效果教程
- 企业如何确定SDN部署是有效果的?