这是我的第一篇博客。为了成为合格的前端开发工程师而努力。
利用自己所学的内容,将缓动动画和均速动画结合,封装了一个JS原生的动画函数。但是这个函数有很大的问题,即缓动动画只能执行减速,不能执行加速。
function getStyle(obj, attr) { //获取对象的属性,并进行了兼容处理 if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr]; } else { return obj.currentStyle[attr]; } } //动画函数,obj为对象,json为包含改变属性为指定值的对象集合,speed为速度值,不用加单位,boolean是布尔值,true为匀速,false为变速,func为动画执行完成后的回 调函数 function animate(obj, json, speed, boolean, func) { clearInterval(obj.timer); obj.timer = setInterval(function(){ //flag标记,动画执行完成后再执行回调函数 var flag = true; for (var k in json) { var leader,target,step; if (k === "zIndex") { //改变层级 obj.style[k] = json[k]; } else if (k === "opacity") { //改变透明度 leader = getStyle(obj, k) * 100; target = json[k] *100; if (boolean) { //匀速 step = Math.abs(speed); step = target > leader ? step : -step; } else { //变速 step = (target - leader) / 10; step = target > leader ? Math.ceil(step) : Math.floor(step); } leader += step; if (boolean) { //匀速 if (Math.abs(target - leader) > Math.abs(step)) { obj.style[k] = leader / 100 ; } else { //变速 obj.style[k] = target / 100; } } else { obj.style[k] = leader / 100; } } else { //改变其他属性 leader = parseInt(getStyle(obj, k)) || 0; target = json[k]; if (boolean) { //匀速 step = Math.abs(speed); step = target > leader ? step : -step; } else { //变速 step = (target - leader) / 10; step = target > leader ? Math.ceil(step) : Math.floor(step); } leader += step; if (boolean) { //匀速 if (Math.abs(target - leader) > Math.abs(step)) { obj.style[k] = leader + "px"; } else { obj.style[k] = target + "px"; } } else { //变速 obj.style[k] = leader + "px"; } if (leader !== target) { flag = false; } } } if (flag) { clearInterval(obj.timer); if (func) { func(); } } },15) }