JS基础-特效篇-透明度动画
程序员文章站
2024-03-24 08:28:16
...
1.设置opacity。1-0。高版本用：filter。alpha()。
2.特殊属性特殊处理：
1）页面元素和样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000000;
}
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<button id="btn">向左走</button>
<button id="btn1">向右走</button>
<div id="box"></div>
<script src="MyTool/MyTool.js"></script>
</body>
2)动画函数
/*
*@description:[缓动动画函数]
*@param:{Object}[eleObj]
*@param:{Object}[json]
*@param:{Object}[fn]
*@date:2021/5/11
*/
function buffer(eleObj, json, fn) {
clearInterval(eleObj.timer);
var speed = 0, begin = 0, target = 0, flag = false;
eleObj.timer = setInterval(function () {
flag = true;
//下面的处理是增加的部分！当是opcity的时候，要乘以一百，因为它是0-1之间的！
for (var key in json) {
if (key === 'opacity'){
begin = parseInt(myTool.getStyleAttr(eleObj, key)*100) || 100;
target = parseInt(json[key]*100);
}else{
begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 100;
target = parseInt(json[key]);
}
speed = (target - begin) * 0.2;
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
if(key === 'opacity'){
//因为它是0-1之间，所以前面乘了一百，后面就得除个一百！
eleObj.style.opacity = (begin + speed)/100;
}else{
eleObj.style[key] = begin + speed + 'px';
}
if (begin !== target) {
flag = false;
}
}
if (flag) {
clearInterval(eleObj.timer);
//开启另外的动画
// if(fn){
// fn();
// }
fn && fn();
}
}, 20)
}
上一篇： Js动画-改变透明度（二）
下一篇： 获取Drawable目录下的资源