动画缓动效果
缓动效果原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路∶
1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
2.核心算法∶(目标值-现在的位置)/ 10做为每次移动的距离步长
<style>
div {
/* 注意:一定要添加定位 */
position: absolute;
left: 0px;
height: 100px;
width: 100px;
background-color: skyblue;
}
span {
position: absolute;
top: 150px;
left: 0;
display: block;
height: 100px;
width: 100px;
background-color: orange;
}
</style>
<button class="btn300">让第二个盒子开始移动300</button>
<button class="btn800">让第二个盒子开始移动800</button>
<div>第一个盒子,到400时停下</div>
<span>第二个盒子,到300时停下</span>
<script>
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
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';
}, 30);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn300 = document.querySelector('.btn300');
var btn800 = document.querySelector('.btn800');
// 调用函数
animate(div, 400);
btn300.addEventListener('click', function() {
animate(span, 300);
})
btn800.addEventListener('click', function() {
animate(span, 800);
})
// 匀速动画 就是 盒子当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
</script>
原文地址:http://www.cnblogs.com/chichi0002/p/16889734.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性