运动的封装资源-CSDN文库

90 浏览量 2021-01-08 16:30:44 上传评论收藏 34KB PDF 举报

资源详情

资源评论

资源推荐

运动的封装运动的封装

以下是运动的简单封装

带有px的css属性和透明度，可以运动

背景色不可以

// 参数2被修改成了对象，那么在使用之前需要解析（遍历）

function move(ele,obj,cb){

clearInterval(ele.t);

ele.t = setInterval(() => {

// 假设状态为：可以清除计时器

var i = true;

// 因为在计时器中才开始使用到对象中的信息，所以在计时器中遍历

// 并提前换来的属性和目标变量

for(var attr in obj){

if(attr == "opacity"){

var iNow = getStyle(ele,attr) * 100;

}else{

var iNow = parseInt(getStyle(ele,attr));

}

let speed = (obj[attr] - iNow)/10;

speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);

// 只要有一个属性到目标，就停了，不对

// 必须所有属性到目标，才能停

// 只要有一个属性没到目标，绝对不能停

// 用状态来标记到底要不要停止计时器

// 只要有一个属性没到目标：绝对不能清除计时器

if(iNow !== obj[attr]){

i = false;

}

if(attr == "opacity"){

ele.style.opacity = (iNow + speed)/100;

}else{

ele.style[attr] = iNow + speed + "px";

}

}

// 如果每次计时器执行结束，所有属性都执行了一遍之后，状态还是true，表示，没有被改成false，如果没有被改成false，表

示没有属性没到终点，那么状态还是false就不清除

if(i){

clearInterval(ele.t);

// 用户决定在动画结束时要执行的功能，万一用户没传参，做个默认判断

if(cb){

cb();

}

// cb && cb();

}

}, 30);

}

function getStyle(ele,attr){

if(ele.currentStyle){

return ele.currentStyle[attr];

}else{

return getComputedStyle(ele,false)[attr];

}

}

进行简单运动时，将上述引进可以快速解决，同时避免了重复代码，能够有效提高效率

作者：LL-Echo

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

内容反馈

weixin_38707061

粉丝: 2
资源: 921

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip