js 变速动画函数
程序员文章站
2022-08-10 15:16:09
变速动画函数 ......
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getstyle(element, attr) { return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr] || 0; }
//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度 //element元素 json对象 存储属性与值 fn为回调函数 function animate(element, json, fn) { //清理定时器 clearinterval(element.timeid); //设置定时器 element.timeid = setinterval(function () { //假设全部到达目标 var f = true; //循环去获取传入的数据 for (var i in json) { //判断传入的值 是不是opacity if (i == 'opacity') { //获取当前opacity的值 并且放大100倍 var current = getstyle(element, i) * 100; //把目标值也放大100倍 var target = json[i] * 100; //移动的步数 var step = (target - current) / 10; //判断是不是为0 step = step > 0 ? math.ceil(step) : math.floor(step); //移动后的位置 current += step; //移动元素属性 element.style[i] = current / 100; //判断属性是不是zindex } else if (i == 'zindex') { //直接设置zindex element.style[i] = json[i]; } else { //普通属性获取(转化成数字) var current = parseint(getstyle(element, i)); //目标属性值 var target = json[i] //移动的步骤(渐变) var step = (target - current) / 10; //判断移动的值取整 step = step > 0 ? math.ceil(step) : math.floor(step); //移动后的位置 current += step; //移动元素 element.style[i] = current + 'px'; } //只要有一个没达到目标就设置f为false if (current != target) { f = false; } //目标到达 清理定时器 判断有没有回调函数 if (f) { clearinterval(element.timeid); if (fn) { fn(); } } } console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20) }
上一篇: 结合JDK源码看设计模式——原型模式
推荐阅读