BOM ------ animate缓动动画效果
动画 效果 ------ bom animate
2023-09-11 14:15:54 时间
缓动动画效果实例
鼠标经过前
鼠标经过后
<!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>引用animate动画函数</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>
</head>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">问题反馈</div>
</div>
<script src="animate.js"></script>
<script>
// 1.获取元素
var sliderbar = document.querySelector(".sliderbar")
var con = document.querySelector(".con")
// 当我们鼠标经过 sliderbar 就会让 con 这个盒子滑动到左侧
// 当我们鼠标离开 sliderbar 就会让 con 这个盒子滑动到右侧
sliderbar.addEventListener('mouseenter', function(){
animate(con, -160, function(){
// 当我们动画执行完毕, 就把 <-- 改为 -->
sliderbar.children[0].innerHTML = '→'
})
})
sliderbar.addEventListener('mouseleave', function(){
animate(con, 0, function(){
sliderbar.children[0].innerHTML = '←'
})
})
</script>
</body>
</html>
animate.js
//简单动画函数封装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 )
不积跬步无以至千里 不积小流无以成江海
相关文章
- 前端每日实战:89# 视频演示如何用 CSS 和 D3 创作旋臂粒子动画
- UITableView中cell点击的绚丽动画效果
- Android系统的定制---定制系统开机动画
- iOS 开发之动画篇 - Transform和KeyFrame动画
- Shimmer辉光动画效果
- POP数值动画
- [翻译] AnimatedPath 动画路径(持续更新)
- css3动画(animation)效果1-漂浮的白云
- 如何快速把ps序列图层建立帧动画?
- android桌面小火箭升空动画
- OpenGL—Android 开机动画源码分析二
- 简单的一个盒子移动到另一个盒子,你用什么方式实现动画效果
- 72. SAP UI5 页面路由的动画效果设置
- SAP UI5 应用开发教程之七十二 - SAP UI5 页面路由的动画效果设置试读版
- Fiori应用的花瓣动画效果是怎么画出来的
- 360度不停旋转动画demo效果示例(整理)
- 分享一个纯css制作的动画化,在网页(手机)载入等的时候能够引用!
- 【Qt】实现按钮透明的动画效果
- 【动画详解原理系列】3.事件驱动和异步编程(线程、协程)
- HTML5 Canvas动画效果实现原理
- animation js 和cc 的动画变形渲染
- 一起学android之设置ListView数据显示的动画效果(24)
- paip.关于动画效果的原则 html js 框架总结
- Canvas组件:画布,可以实现动画操作