动画实现原理
简单动画函数封装
注意函数需要传递两个参数,动画对象
和移动距离
//简单动画函数封装obj目标对象 target目标位置
function animate(obj, target) {
var timer = setInterval(function () {
if (obj.offsetLeft >= target) {
//停止动画,本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 5 + 'px';//offsetLeft用来获取位置,style用来赋值,注意加单位px
}, 30);
}
var div = document.querySelector('div');
//调用函数
animate(div, 300);
动画函数给不同元素记录不同定时器
上边的代码还有很多不足:
- 每次调用函数,都会在内存中开辟内存空间,浪费内存资源
- 定时器的名字一样,容易引起歧义
- 需要一个触发事件来调用函数
优化后代码:
//简单动画函数封装obj目标对象 target目标位置
function animate(obj, target) {
//核心原理:js是动态语言,可以很方便的给对象加属性
//还有一个问题就是,加了按钮后,如果不断点击按钮,元素运动得会越来越快,这是因为开启了多个定时器
//解决方案就是先清除之前的定时器,只开启一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
//停止动画,本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 5 + 'px';//offsetLeft用来获取位置,style用来赋值,注意加单位px
}, 30);
}
var div = document.querySelector('div');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//调用函数
animate(div, 300);
})
缓动动画
之前的动画都是匀速动画,为了让用户体验感更好,我们还需要使用缓动动画
缓动动画原理
- 缓动动画基本代码:
//简单动画函数封装obj目标对象 target目标位置
function animate(obj, target) {
//核心原理:js是动态语言,可以很方便的给对象加属性
//还有一个问题就是,加了按钮后,如果不断点击按钮,元素运动得会越来越快,这是因为开启了多个定时器
//解决方案就是先清除之前的定时器,只开启一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//步长写在定时器里面
//把步长值改为整数,不要出现小数的问题 正数往上取整 负数往下取整
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';//offsetLeft用来获取位置,style用来赋值,注意加单位px
}, 30);
}
var div = document.querySelector('div');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//调用函数
animate(div, 300);
})
缓动动画添加回调函数
-
回调函数原理
:函数可以作为一个参数,将这个函数作为参数传到另一个函数里面,当另一个函数执行完毕,就会执行传入的函数,这个过程叫做回调
-
回调函数写到定时器结束的位置
//简单动画函数封装obj目标对象 target目标位置
function animate(obj, target, callback) {
//核心原理:js是动态语言,可以很方便的给对象加属性
//还有一个问题就是,加了按钮后,如果不断点击按钮,元素运动得会越来越快,这是因为开启了多个定时器
//解决方案就是先清除之前的定时器,只开启一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//步长写在定时器里面
//把步长值改为整数,不要出现小数的问题 往上取整
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画,本质是停止定时器
clearInterval(obj.timer);
//回调函数写到定时器结束里面
if (callback) {
//调用函数
callback();
}
}
//通过步长公式
obj.style.left = obj.offsetLeft + step + 'px';//offsetLeft用来获取位置,style用来赋值,注意加单位px
}, 30);
}
var div = document.querySelector('div');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
//调用函数
animate(div, 300, function () {
div.style.backgroundColor = 'pink';
});
})
总结
以上就是动画函数的封装,在具体使用的时候,我们就可以将其封装成一个js文件
,需要的时候就可以直接引用