JavaScript封装动画函数（三）

72 阅读 0 评论 48 点赞

我是靠谱客的博主平常小虾米，最近开发中收集的这篇文章主要介绍JavaScript封装动画函数（三），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

封装缓动动画函数，增加任意多个属性和回调函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
margin-top: 20px;
}
#box{
width: 200px;
height: 100px;
background-color: greenyellow;
margin-top: 20px;
position:absolute;
left: 20px;
}
</style>
</head>
<body>
<button id="btn">动画开始</button>
<div id="box"></div>
<script>
var box=document.getElementById("box");
document.getElementById("btn").οnclick=function () {
animate(box,{"width":400,"height":500,"top":200,"left":300},function(){
animate(box,{"width":40,"height":50,"top":20,"left":30},function(){
animate(box,{"width":200,"height":100,"top":100,"left":300});
});
});
};
//获得任一元素的任一属性的值————字符串型
function getStyle(element,attr){
return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
function animate(element,json,fn){
//先清理定时器，这样可以保证每次点击按钮都只产生一个定时器
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true; //假设全部到达目标位置
for(var attr in json) {
//获取元素属性当前的值
var current = parseInt(getStyle(element, attr));
//获得当前属性对应的目标值
var target = json[attr];
//设置每次移动多少像素
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//每次移动后的位置
current += step;
element.style[attr] = current + "px";
if(current != target){
flag=false;
}
}
//判断如果都到达目标位置
if(flag){
//清理定时器
clearInterval(element.timeId);
//动画都执行完毕后，如果有函数就执行函数
if(fn){
fn();
}
}
},10);
}
</script>
</body>
</html>

封装缓动动画函数，增加任意多个属性和回调函数，以及透明度和层级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
button{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#box{
width: 200px;
height: 100px;
background-color: greenyellow;
position:absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<button id="btn">动画开始</button>
<div id="box"></div>
<script>
var box=document.getElementById("box");
document.getElementById("btn").οnclick=function () {
animate(box,{"width":400,"height":500,"top":200,"left":300,"opacity":0.2},function(){
animate(box,{"width":100,"height":50,"top":0,"left":0,"opacity":0.8,"zIndex":10});
});
};
//获得任一元素的任一属性的值————字符串型
function getStyle(element,attr){
return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//动画函数
function animate(element,json,fn){
//先清理定时器，这样可以保证每次点击按钮都只产生一个定时器
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true; //假设全部到达目标位置
for(var attr in json) {
if(attr=="opacity"){
//获取元素当前的透明度，并放大100倍
var current = getStyle(element, attr)*100;
//获得对应的透明度目标值，并放大100倍
var target = json[attr]*100;
//设置每次移动多少
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//每次移动后的位置
current += step;
element.style[attr] = current/100;
}else if(attr=="zIndex"){
//层级属性直接赋值就行了
element.style[attr]=json[attr];
}else{
//获取元素属性当前的值
var current = parseInt(getStyle(element, attr));
//获得当前属性对应的目标值
var target = json[attr];
//设置每次移动多少像素
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//每次移动后的位置
current += step;
element.style[attr] = current + "px";
}
if(current != target){
flag=false;
}
}
//判断如果都到达目标位置
if(flag){
//清理定时器
clearInterval(element.timeId);
//动画都执行完毕后，如果有函数就执行函数
if(fn){
fn();
}
}
},10);
}
</script>
</body>
</html>