javascript实现匀速动画效果
更新时间：2021年09月30日 08:49:35 作者：qq_39111074
这篇文章主要为大家详细介绍了javascript实现匀速动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript实现匀速动画的具体代码，供大家参考，具体内容如下
实现思路：
1、主要使用定时函数setInterval()来实现动画效果
2、可以将动画封装成一个函数，这样可以多个元素调用，不用重复写
3、动画函数接收参数- - -元素对象、目标偏移量、回调函数
①函数里添加一个定时函数，给定时函数一个名字，后面清除定时函数要使用定时函数名
②定时函数里面处理程序：
a. 给一个固定的每步移动值，设置元素对象的偏移量匀速变化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判断偏移量是否达到目标值，达到的话停止动画- - -
clearInterval(obj.timer);
并且在动画停止时判断是否存在回调函数，有回调函数的话执行回调函数
4、在动画函数的最前面添加清除定时器函数，清除之前的动画影响- - -clearInterval(obj.timer);
有时需要点击按钮后，触发动画这种，没有添加清除的话，重复点击按钮，动画效果会叠加，越来越快
5、也可以将动画函数封装到js文件中进行引用
小提示：以上只是一种方法，不同动画效果根据所需进行调整实现方法
代码示例：
<!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>
.box {
position: relative;
width: 1000px;
margin-top: 20px;
}
.xiaohuli {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
.pikaqiu {
position: absolute;
top: 150px;
left: 0;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<button class="btn1">点击移动小狐狸</button>
<button class="btn2">点击移动皮卡丘</button>
<div class="box">
<img src="images/小狐狸.jpg" alt="" class="xiaohuli">
<img src="images/皮卡丘.jpg" alt="" class="pikaqiu">
</div>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var xiaohuli = document.querySelector('.xiaohuli');
var pikaqiu = document.querySelector('.pikaqiu');
btn1.addEventListener('click', function() {
animate(xiaohuli, 300);
})
btn2.addEventListener('click', function() {
animate(pikaqiu, 450);
})
// 动画函数 obj动画对象, target目标左偏移量, callback回调函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
obj.style.left = obj.offsetLeft + 5 + 'px';
if (obj.offsetLeft >= target) {
// 停止动画
clearInterval(obj.timer);
// 如果有回调函数，执行回调函数
if (callback) {
callback();
}
}
}, 30);
}
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript 闭包机制详解及实例代码的相关资料,需要的朋友可以参考下2016-10-10
下面小编就为大家带来一篇基于input框覆盖掉数字英文的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了JS简单编号生成器实现方法,涉及JavaScript针对表单与字符串操作的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了JS获取表格内指定单元格html内容的方法,涉及javascript中innerHTML属性的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了谷歌地图打不开的解决办法,本文给出了一个可以正常使用的谷歌地图调用案例,需要的朋友可以参考下2014-08-08
JavaScript对象数据结构基本形式:{ key : value},其中key:value就为对象的一个属性,key作为属性名称,value为属性值,这值可以是任何JavaScript数据类型。2009-10-10
这篇文章主要介绍了js比较日期大小的方法,涉及javascript日期的转化、匹配、比较等常用操作技巧,需要的朋友可以参考下2015-05-05![this[] 指的是什么内容 讨论](//img.jbzj.com/images/xgimg/bcimg7.png)
this[] 指的是什么内容 讨论...2007-03-03
这篇文章主要给大家简单介绍了JavaScript声明变量名的语法规则，非常有助于大家学习javascript，有需要的小伙伴可以参考下。2015-07-07
下面小编就为大家带来一篇javascript中异常处理案例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
![this[] 指的是什么内容 讨论](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论