本人编程小白,个人理解可能不到位望谅解
代码样式如上:
前言
今天主要来说的就是动画,动画对于大家来说都不陌生,但是作为前端人员来说一般情况使用的都是css动画,今天要使用的是js的动画。
一、首先写入HTML和CSS的代码
二、使用步骤
1.编写HTML部分
代码如下:
<!--点击按钮移动到距离页面左侧500px -->
<button class="btn500">点击动500</button>
<!--点击按钮移动到距离页面左侧800px -->
<button class="btn800">点击动800</button>
<!--打开页面自动移动的盒子 -->
<div></div>
<!--点击移动的盒子 -->
<span>是小韩呀</span>
2.编写CSS部分
代码如下:
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
/*一定要加定位*/
position: absolute;
left: 0;
}
span {
width: 150px;
height: 150px;
background-color: blueviolet;
display: block;
/*一定要加定位*/
position: absolute;
left: 0;
top: 200px;
}
</style>
3.编写JS部分
代码如下:
<script>
// 封装函数
// 添加定时器
function animate(obj, target, callback) {
//callback=function(){} 调用 callback()
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 设置缓动动画
// 缓动动画原理(目标值-现在的长度)/10 做为每次移动的距离 步长
var step = (target - obj.offsetLeft) / 10;
// 左右取整,为了代码移动位置的准确性
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
//回调函数
callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
// 获取元素
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
//调用函数,移动到500px变换颜色 执行完毕,执行回调函数
animate(div, 600);
btn500.addEventListener('click', function() {
animate(span, 500, function() {
span.style.backgroundColor = 'blue';
});
});
//调用函数,移动到800px变换颜色 执行完毕,执行回调函数
btn800.addEventListener('click', function() {
animate(span, 800, function() {
span.style.backgroundColor = 'red';
});
});
</script>
总结
对于JS动画来说其实主要注意几点,获得盒子当前位置,让盒子在当前位置加上1个移动距离,利用定时器不断重复这个操作,加一个结束定时器的条件,注意该元素需要添加定位,才能使用element.style.left
然后进行动画函数的封装,给不同的元素添加定时器,为了效果的美观添加缓动动画,最后再给动画添加回调函数,让他可以一直执行。