js运动

Posted 2020-11-30

目录

• 缓冲运动
• 弹性运动

缓冲运动

   function startMove(ele, attrs, callBack) {
            var curr = 0,
                speed = null;
            ele.timer = setInterval(function () {
                var stop = true; //如果有某一个不满足条件,则为false。
                for (var attr in attrs) {

                    if (attr === ‘opacity‘)
                        curr = parseFloat(getStyle(ele, ‘opacity‘)) * 100; //如果为背景色,将值扩大100倍,在赋值的时候将值转换回去
                    else
                        curr = parseInt(getStyle(ele, attr));

                    speed = (attrs[attr] - curr) / 7 //由快到慢
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                    if (attr === ‘opacity‘)
                        ele.style.opacity = (curr + speed) / 100;
                    else
                        ele.style[attr] = curr + speed + ‘px‘;

                    if (curr !== attrs[attr])
                        stop = false;
                }

                if (stop) {
                    clearInterval(ele.timer);
                    typeof callBack == ‘function‘ && callBack();
                }
            }, 30)
        }

        //获取元素某个样式
        function getStyle(ele, attr) {
            if (window.getComputedStyle) return getComputedStyle(ele, null)[attr];
            return ele.currentStyle[attr];
        }

弹性运动