原生JS封装缓动画函数

60 阅读 0 评论 40 点赞

我是靠谱客的博主醉熏咖啡，最近开发中收集的这篇文章主要介绍原生JS封装缓动画函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

以前没有CSS3的时候,动画都是使用js配合定时器实现的，现在有CSS3以后,可以使用CSS3过渡属性或者CSS3动画完成，这里使用的是原生JS实现的缓动画封装。

JS代码

/**
* 封装缓慢动画函数
* @param {object} dom 要做动画dom对象
* @param {object} obj 哪些CSS属性要做动画
* @param {function} callback 所有属性的动画完成以后,调用的回调函数
* @returns 无
*/
function animate(dom, obj, callback) {
// 清除之前的定时器
window.clearInterval(dom.timer)
dom.timer = window.setInterval(function () {
// 定义一个变量,这个标识是否所有属性都达到了目标值
// 标识为true，假设所有属性已经都达到目标值
var flag = true
// for...in遍历对象
// attr是属性名
for (var attr in obj) {
// 设置的属性值是原素的堆叠顺序则直接设置
if (attr == 'z-index' || attr == 'zIndex') {
dom.style[attr] = obj[attr]
// 设置的属性是透明度
} else if (attr == 'opacity') {
// target是目标值
var target = obj[attr] * 1000
// 获取当前CSS属性值
var currentValue = parseFloat(getStyle(dom, attr)) * 1000
// 计算速度 缓慢动画 速度要有变化 先快后慢
// 计算速度
公式: (目标值 - 当前值) / 10
var steep = (target - currentValue) / 10
// 速度如果是正值向上取整，速度如果是负值向下取整
steep = steep > 0 ? Math.ceil(steep) : Math.floor(steep)
// 设置CSS属性
dom.style[attr] = (currentValue + steep) / 1000
// 判断当前CSS属性值是否已经达到目标值
if (target != currentValue) {
flag = false
}
} else {
// 这里就是正常设置元素的动画
// target是目标值
var target = obj[attr]
// 获取当前CSS属性值
var currentValue = parseInt(getStyle(dom, attr))
// 计算速度 缓慢动画 速度要有变化 先快后慢
// 计算速度
公式: (目标值 - 当前值) / 10
var steep = (target - currentValue) / 10
// 速度如果是正值向上取整，速度如果是负值向下取整
steep = steep > 0 ? Math.ceil(steep) : Math.floor(steep)
// 设置CSS属性
dom.style[attr] = currentValue + steep + 'px'
// 判断当前CSS属性值是否已经达到目标值
if (target != currentValue) {
flag = false
}
}
// 判读flag的值
if (flag) {
// 清除定时器
window.clearInterval(dom.timer)
if (typeof callback === 'function') {
//如果调用animate传递了回调函数
//那么这个回调函数需要在动画执行完毕以后调用该回调函数
callback()
}
}
}
}, 15)
}

HTML以及CSS部分

<div>div的内容</div>
<style>
div{
width: 100px;
height: 80px;
background: #ff0000;
margin-left: 90px;
margin-top: 50px;
opacity: 0.5;
}
</style>

可以参考以下使用方式

var objDiv = document.querySelector("div");
objDiv.onclick = function(){
// 调用自定义的animate函数
// animate( objDiv, "width", 300 );
/* animate( objDiv , {
"width": 300,
"height": 200
}); */
/* animate( objDiv , {
"width": 500
}, function(){
console.log("宽度改变完毕");
}); */
// 可以一直嵌套回调，这里以先改变宽度，再改变高度为例
animate( objDiv , {
"width": 500
}, function(){
animate( objDiv , {
"height": 500
});
});
}