昨天我们看过匀速,加速,缓冲,折返运动的实现方法,那么今天就来看看如何实现透明度的变化。
透明度的变化跟之前的差不多，透明度的变化范围是0-1，假设定时器间隔还是50ms，那么我们设置一个透明度的变化速度speed=0.1，这样每次加上0.1即可。但是js有个问题，计算小数的精准度没那么高，所以只能将其转化为整数才能提高精准度。
由不透明到透明
html代码
透明度的变化
css代码
#box {
width: 100px;
height: 100px;
background: seagreen;
position: absolute;
left: 0;
top: 50px;
opacity: 1;
}
js代码
window.onload = function () {
let start = $("start");
let box = $("box");
let speed = 5;
start.onclick = function () {
//清除定时器
clearInterval(box.timer);
//开启新的定时器
box.timer = setInterval(function () {
//获得当前box的透明度
let currentOpacity = getStyle(box, "opacity") * 100;
//计算下一次box的透明度
let nextOpacity = (currentOpacity - speed) / 100;
//设置透明度
box.style.opacity = nextOpacity;
//如果透明度小于0就设为0
if (nextOpacity < 0) {
box.style.opacity = 0;
//兼容IE
box.style.filter = "alpha(opacity=0)";
clearInterval(box.timer);
}
}, 50);
}
}
//工具类 ↓↓↓
function $(id) {
return document.getElementById(id);
}
function getStyle(element, attr) {
let result = element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr];
return Number.parseFloat(result);
}
由透明到不透明，首先将初始opacity设为0，然后将速度改为正的，然后如果透明大于1，则设为1，
window.onload = function () {
let start = $("start");
let box = $("box");
let speed = 5;
const LIMT_OPACITY = 1;
start.onclick = function () {
//清除定时器
clearInterval(box.timer);
//开启新的定时器
box.timer = setInterval(function () {
//获得当前box的透明度
let currentOpacity = getStyle(box, "opacity") * 100;
//计算下一次box的透明度
//let nextOpacity = (currentOpacity - speed) / 100;
let nextOpacity = (currentOpacity + speed) / 100;
//设置透明度
box.style.opacity = nextOpacity;
//如果透明度小于0就设为0,大于1设为1
if (nextOpacity > LIMT_OPACITY) {
box.style.opacity = LIMT_OPACITY;
//兼容IE
box.style.filter = "alpha(opacity=" + LIMT_OPACITY + ")";
clearInterval(box.timer);
}
}, 50);
}
}
是的，这样就好了。接下来我们来封装一下这个透明度函数。
//0-1,透明到不透明
function fadein(obj) {
let speed = 5;
clearInterval(obj, obj.timer);
obj.timer = setInterval(function () {
//获得当前透明度
let currentOpacity = getStyle(obj, "opacity") * 100;
//计算下一次透明度
let nextOpacity = (currentOpacity + speed) / 100;
obj.style.opacity = nextOpacity;
if (nextOpacity > 1) {
obj.style.opacity = 1;
//兼容IE
obj.style.filter = "alpha(opacity=1)";
clearInterval(obj.timer);
}
}, 50);
}
//1 - 0，不透明到透明
function fadeout(obj) {
let speed = 5;
clearInterval(obj, obj.timer);
obj.timer = setInterval(function () {
//获得当前透明度
let currentOpacity = getStyle(obj, "opacity") * 100;
//计算下一次透明度
let nextOpacity = (currentOpacity - speed) / 100;
obj.style.opacity = nextOpacity;
if (nextOpacity < 0) {
obj.style.opacity = 0;
//兼容IE
obj.style.filter = "alpha(opacity=0)";
clearInterval(obj.timer);
}
}, 50);
}
现在看宽度的运动，只贴js代码，其他都一样
window.onload = function () {
let start = $("start");
let box = $("box");
let speed = 10;
let maxWidth = 400;
start.onclick = function () {
//清除旧定时器
clearInterval(box.timer);
//开启新定时器
box.timer = setInterval(function () {
//获得当前box的宽度
let currentWidth = getStyle(box, "width");
//计算下一次box的宽度
let nextWidth = currentWidth + speed;
//设置宽度
box.style.width = nextWidth + "px";
if (nextWidth > maxWidth) {
box.style.width = maxWidth + "px";
clearInterval(box.timer);
}
}, 50);
}
}
我们发现，这些运动大同小异，流程都差不多，都得设置一个速度，最大路程，然后清除就定时器，在开启新定时器，判断如果到达某一临界值会怎样。所以接下来封装js运动的函数，可以适用于大部分情况。
let MotionUtils = {
/**
*
* @param obj 要改变的对象
* @param attr 要改变的对象的属性
* @param finalValue 要改变对象的属性的最大值
*/
bufferMove: function (obj, attr, finalValue) {
//清除旧定时器
clearInterval(obj.timer);
//开启新定时器
obj.timer = setInterval(function () {
//获得当前obj属性值
let currentValue;
if (attr === "opacity") {
currentValue = Number.parseFloat(getStyle(obj, attr)) * 100;
} else {
currentValue = Number.parseInt(getStyle(obj, attr));
}
//计算速度
let speed = (finalValue - currentValue) / 8;
//计算物体运动方向
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//计算下一次obj的属性值
let nextValue = currentValue + speed;
//设置属性值
if (attr === "opacity") {
obj.style[attr] = nextValue / 100;
obj.style.filter = "alpha(opacity=" + nextValue + ")";
} else {
obj.style[attr] = nextValue + "px";
}
//到达极限该怎么版办
if (nextValue === finalValue) {
if (attr === "opacity") {
obj.style[attr] = finalValue;
} else {
obj.style[attr] = finalValue + "px";
}
//清除定时器
clearInterval(obj.timer);
}
}, 50);
}
}
这样封装就可对不同的属性进行不同的操作,例如宽度,高度,透明度,left,top等,
那好,我们现在增加一个需求,如何对box改变高度的同时,改变宽度。我们可以这样。
let MotionUtils = {
/**
*
* @param obj 要改变的对象
* @param data 把要改变的属性和值放在对象里
*/
bufferMove: function (obj, data) {
//清除旧定时器
clearInterval(obj.timer);
//开启新定时器
obj.timer = setInterval(function () {
//flg标识运动是否完毕
let flg = true;
for (let attr in data) {
//获得当前obj属性值
let currentValue;
if (attr === "opacity") {
currentValue = Number.parseFloat(getStyle(obj, attr)) * 100;
} else {
currentValue = Number.parseInt(getStyle(obj, attr));
}
//计算速度
let speed = (data[attr] - currentValue) / 8;
//计算物体运动方向
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//计算下一次obj的属性值
let nextValue = currentValue + speed;
//设置属性值
if (attr === "opacity") {
obj.style[attr] = nextValue / 100;
obj.style.filter = "alpha(opacity=" + nextValue + ")";
} else {
obj.style[attr] = nextValue + "px";
}
//判断当前属性是否运动完毕
if (nextValue !== data[attr]) {
flg = false;
}
}
//清除定时器
if (flg) {
clearInterval(obj.timer);
}
}, 50);
}
}
链式运动
什么是链式运动。链式运动就是连续的，当第一个运动完后，紧接着进行第二个运动，然后第三，第四...这就是链式运动。我们在上面的基础上再传一个参数callback，作为回调函数，当第一个运动运动完后，清除了定时器，然后判断是否传了这个函数，传了，就执行这个函数，否则直接结束
let MotionUtils = {
/**
*
* @param obj 要改变的对象
* @param data 把要改变的属性和值放在对象里
* @param callback 在上一次运动完后下一次要运动的函数，回调自己
*/
bufferMove: function (obj, data, callback) {
//清除旧定时器
clearInterval(obj.timer);
//开启新定时器
obj.timer = setInterval(function () {
//flg标识运动是否完毕
let flg = true;
for (let attr in data) {
//获得当前obj属性值
let currentValue;
if (attr === "opacity") {
currentValue = Number.parseFloat(getStyle(obj, attr)) * 100;
} else {
currentValue = Number.parseInt(getStyle(obj, attr));
}
//计算速度
let speed = (data[attr] - currentValue) / 8;
//计算物体运动方向
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//计算下一次obj的属性值
let nextValue = currentValue + speed;
//设置属性值
if (attr === "opacity") {
obj.style[attr] = nextValue / 100;
obj.style.filter = "alpha(opacity=" + nextValue + ")";
} else {
obj.style[attr] = nextValue + "px";
}
//判断当前属性是否运动完毕
if (nextValue !== data[attr]) {
flg = false;
}
}
//清除定时器
if (flg) {
clearInterval(obj.timer);
//如果传了callback，那么就执行这个函数
if (callback) {
callback();
}
}
}, 50);
}
};
/**
*
*获取样式
*/
let StyleUtils = {
getStyle:function (element, attr) {
let result = element.currentStyle ? element.currentStyle[attr] :getComputedStyle(element, null)[attr];
return Number.parseFloat(result);
}
};