封装CSS动画

写在前面：感谢腾讯课堂与妙味课堂的移动端公开课 

　　对于需要设置动画的元素需要提前设置css()样式，这样数据才会被记录起来。

function css(ele, attr, val) {
    if (/rotate/.test(attr) || /scale/.test(attr) || /skew/.test(attr) || /translate/.test(attr)) {
        return cssTransform(ele, attr, val);
    }
    if (arguments.length == 2) {
        var val = getComputedStyle(ele)[attr];
        if (attr == 'opacity') {
            val = Math.round(val * 100);
        }
        return parseFloat(val)
    }
    if (attr == 'opacity') {
        ele.style.opacity = val / 100;
    } else {
        ele.style[attr] = val + 'px'
    }
}

这里需要判断属于transform的值

/*
 *  设置transform  只能在这里设置 不能在css设置
 *  ele.transform ={
 *     rotate: 40,
 *     scale: 100,
 *     skew:
 *     translate
 *  }
 * */
function cssTransform(ele, attr, val) {
    ele.transform = ele.transform || {}
    if (typeof val == "undefined") {
        //get
        if (typeof ele.transform[attr] == 'undefined') { //代表没有设置transform 返回默认值
            switch (attr) {
                case 'scale':
                case 'scaleX':
                case 'scaleY':
                case 'scaleZ':
                    ele.transform[attr] = 100;
                    break;
                default:
                    ele.transform[attr] = 0;
                    break;
            }
        }
        return ele.transform[attr];
    } else {
        //set
        var transformVal = '';
        ele.transform[attr] = val;

        for (s in ele.transform) {
            switch (s) {
                case 'scale':
                case 'scaleX':
                case 'scaleY':
                case 'scaleZ':
                    transformVal += " " + s + "(" + ele.transform[s]/100 + ")";
                    break;
                case 'rotate':
                case 'rotateX':
                case 'rotateY':
                case 'rotateZ':
                case 'skew':
                case 'skewX':
                case 'skewY':
                    transformVal += " " + s + "(" + ele.transform[s] + "deg)";
                    break;
                default:
                    transformVal += " " + s + "(" + ele.transform[s] + "px)";
                    break;
            }
        }

        ele.style.WebkitTransform = ele.style.transform = transformVal;
    }
}

通过检测，在合适位置调用MTwen函数

/*
* @param el:控制元素 (element)
* @param target:想要达成效果的数据 例如：translateY (string)
* @param time:历时 (number)
* @param type:运动效果 (string)
* @param callIn:运动中执行的函数 (fn)
* @param callBack:运动结束执行的函数 (fn)
* */
function MTween(init) {
    var t = 0;
    var b = {};
    var c = {};
    var d = init.time / 20;
    for (var s in init.target) {
        b[s] = css(init.el, s);
        c[s] = init.target[s] - b[s];
    }
    clearInterval(init.el.timer);
    init.el.timer = setInterval(function () {
            t++;
            if (t > d) {
                clearInterval(init.el.timer);
                init.callBack && init.callBack.call(init.el);
            } else {
                init.callIn && init.callIn.call(init.el);
                for (var s in b) {
                    var val = Number((Tween[init.type](t, b[s], c[s], d)).toFixed(2));
                    css(init.el, s, val)
                }
            }
        },20)
}

先上完整的代码

function css(ele, attr, val) {


    if (/rotate/.test(attr) || /scale/.test(attr) || /skew/.test(attr) || /translate/.test(attr)) {
        return cssTransform(ele, attr, val);
    }
    if (arguments.length == 2) {
        var val = getComputedStyle(ele)[attr];
        if (attr == 'opacity') {
            val = Math.round(val * 100);
        }
        return parseFloat(val)
    }
    if (attr == 'opacity') {
        ele.style.opacity = val / 100;
    } else {
        ele.style[attr] = val + 'px'
    }
}
/*
* @param el:控制元素 (element)
* @param target:想要达成效果的数据 例如：translateY (string)
* @param time:历时 (number)
* @param type:运动效果 (string)
* @param callIn:运动中执行的函数 (fn)
* @param callBack:运动结束执行的函数 (fn)
* */
function MTween(init) {
    var t = 0;
    var b = {};
    var c = {};
    var d = init.time / 20;
    for (var s in init.target) {
        b[s] = css(init.el, s);
        c[s] = init.target[s] - b[s];
    }
    clearInterval(init.el.timer);
    init.el.timer = setInterval(function () {
            t++;
            if (t > d) {
                clearInterval(init.el.timer);
                init.callBack && init.callBack.call(init.el);
            } else {
                init.callIn && init.callIn.call(init.el);
                for (var s in b) {
                    var val = Number((Tween[init.type](t, b[s], c[s], d)).toFixed(2));
                    css(init.el, s, val)
                }
            }
        },20)
}

/*
 *  设置transform  只能在这里设置 不能在css设置
 *  ele.transform ={
 *     rotate: 40,
 *     scale: 100,
 *     skew:
 *     translate
 *  }
 * */
function cssTransform(ele, attr, val) {
    ele.transform = ele.transform || {}
    if (typeof val == "undefined") {
        //get
        if (typeof ele.transform[attr] == 'undefined') { //代表没有设置transform 返回默认值
            switch (attr) {
                case 'scale':
                case 'scaleX':
                case 'scaleY':
                case 'scaleZ':
                    ele.transform[attr] = 100;
                    break;
                default:
                    ele.transform[attr] = 0;
                    break;
            }
        }

        return ele.transform[attr];
    } else {
        //set
        var transformVal = '';
        ele.transform[attr] = val;

        for (s in ele.transform) {
            switch (s) {
                case 'scale':
                case 'scaleX':
                case 'scaleY':
                case 'scaleZ':
                    transformVal += " " + s + "(" + ele.transform[s]/100 + ")";
                    break;
                case 'rotate':
                case 'rotateX':
                case 'rotateY':
                case 'rotateZ':
                case 'skew':
                case 'skewX':
                case 'skewY':
                    transformVal += " " + s + "(" + ele.transform[s] + "deg)";
                    break;
                default:
                    transformVal += " " + s + "(" + ele.transform[s] + "px)";
                    break;
            }
        }

        ele.style.WebkitTransform = ele.style.transform = transformVal;
    }
}


/*
 * t : time 已过时间
 * b : begin 起始值
 * c : count 总的运动值
 * d : duration 持续时间
 * */

//Tween.linear();

var Tween = {
    linear: function (t, b, c, d) {  //匀速
        return c * t / d + b;
    },
    easeIn: function (t, b, c, d) {  //加速曲线
        return c * (t /= d) * t + b;
    },
    easeOut: function (t, b, c, d) {  //减速曲线
        return -c * (t /= d) * (t - 2) + b;
    },
    easeBoth: function (t, b, c, d) {  //加速减速曲线
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b;
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeInStrong: function (t, b, c, d) {  //加加速曲线
        return c * (t /= d) * t * t * t + b;
    },
    easeOutStrong: function (t, b, c, d) {  //减减速曲线
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeBothStrong: function (t, b, c, d) {  //加加速减减速曲线
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b;
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    elasticIn: function (t, b, c, d, a, p) {  //正弦衰减曲线（弹动渐入）
        if (t === 0) {
            return b;
        }
        if ((t /= d) == 1) {
            return b + c;
        }
        if (!p) {
            p = d * 0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    elasticOut: function (t, b, c, d, a, p) {    //正弦增强曲线（弹动渐出）
        if (t === 0) {
            return b;
        }
        if ((t /= d) == 1) {
            return b + c;
        }
        if (!p) {
            p = d * 0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
    },
    elasticBoth: function (t, b, c, d, a, p) {
        if (t === 0) {
            return b;
        }
        if ((t /= d / 2) == 2) {
            return b + c;
        }
        if (!p) {
            p = d * (0.3 * 1.5);
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        }
        else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        }
        return a * Math.pow(2, -10 * (t -= 1)) *
            Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
    },
    backIn: function (t, b, c, d, s) {     //回退加速（回退渐入）
        if (typeof s == 'undefined') {
            s = 1.70158;
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    backOut: function (t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 3.70158;  //回缩的距离
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    backBoth: function (t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 1.70158;
        }
        if ((t /= d / 2 ) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    },
    bounceIn: function (t, b, c, d) {    //弹球减振（弹球渐出）
        return c - Tween['bounceOut'](d - t, 0, c, d) + b;
    },
    bounceOut: function (t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b;
        } else if (t < (2 / 2.75)) {
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
        } else if (t < (2.5 / 2.75)) {
            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
        }
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
    },
    bounceBoth: function (t, b, c, d) {
        if (t < d / 2) {
            return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
        }
        return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
    }
}

 

接下来说一下使用方式

1.设置css(el,'translateY',) //获取translateY的值

2.处理后 css(el, 'translateY', -translateY*scale)//获设置translateY的值

3.运行动画

 MTween({
            el: el,
            target: {
                translateY: target
            },
            time:3,
            type: 'backOut',
            callBack: function () {
                (init.offBar)|| (scrollBar.style.opacity = 0);
            },
            callIn: function () {
                var translateY = css(inner, 'translateY');
                (init.offBar)|| css(scrollBar, 'translateY', -translateY*scale);
            }
        })

接下来的完整的代码

可以自己去尝试下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        body, html {
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        header {
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            text-align: center;
            background: #000;
            color: #fff;
            width: 100%;
        }

        footer {
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #000;
            color: white;
        }

        #wrap {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 40px;
            top: 40px;
            overflow: hidden;
        }

        #list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #list li {
            height: 30px;
            border-bottom: 1px solid #000;
            line-height: 30px;
            text-indent: 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<header id="header">测试滑屏动画</header>
<section id="wrap">
    <ul id="list"></ul>
</section>
<footer id="footer">慢慢的干活，还是很不错</footer>
<script src="m.Tween.js"></script>
<script>
    /*
     * 缓冲动画
     *     获取最后一次速度=位移/时间
     *
     * */
    document.addEventListener('touchstart', function (ev) {
        ev.preventDefault();
    })
    function setListInner() {
        var list = document.querySelector('#list');
        var inner = '';
        for (var i = 0; i < 100; i++) {
            inner += '<li>这是第' + i + '个li</li>'
        }
        list.innerHTML = inner
    }
    window.onload = function () {
        setListInner();
        var wrap = document.querySelector('#wrap');
        mScroll({
            el: wrap,
            offBar : false,
            start : function(e){

            },
            move : function(e){

            },
            end:function(e){

            },
            over:function(e){

            }
        })
     };


//添加父级
function mScroll(init){
    if(!init.el){
        return;
    }

    var inner = init.el.children[0];
    var scrollBar = document.createElement('div');


    var startPoint = 0;
    var startEl = 0;
    var lastDis = 0; //最后一次距离
    var lastY = 0; //上一次距离
    var lastTime = 0;
    var lastTimeDis = 0;
    var maxTranslate = init.el.clientHeight - inner.offsetHeight;
    var scale = init.el.clientHeight / inner.offsetHeight;

    inner.style.minHeight = '100%';

    if(!init.offBar){
        scrollBar.style.cssText = 'width:6px;background:rgba(0,0,0,.5);' +
                'position:absolute;right:0;top:0;border-radius:3px;opacity:0;transition:opacity .3s';
        init.el.appendChild(scrollBar);
    }


    //设置动画
    css(inner, 'translateZ', 0.01);

    inner.addEventListener('touchstart', function (e) {
        clearInterval(inner.time);
        //预留后面高度被改变
        maxTranslate = init.el.clientHeight - inner.offsetHeight;
        //内容太少
        if(!init.offBar){
            if(maxTranslate >= 0){
                scrollBar.style.display = 'none'
            }else{
                scrollBar.style.display = 'block'

            }
            scale = init.el.clientHeight / inner.offsetHeight;
            scrollBar.style.height = init.el.clientHeight * scale+'px';
        }


        startPoint = e.changedTouches[0].pageY;
        startEl = css(inner, 'translateY');  //获得点击下去的translateY 的值
        lastY = startEl; //赋值每一次开始的位置
        lastTimeDis = lastDis = 0;
        lastTime = new Date().getTime();

        (init.offBar)||(scrollBar.style.opacity = 1);
    });
    inner.addEventListener('touchmove', function (e) {

        var nowPoint = e.changedTouches[0].pageY;
        var dis = nowPoint - startPoint;
        var translateY = dis + startEl;
        var nowTime = new Date().getTime();
        css(inner, 'translateY', translateY);
        (init.offBar)||css(scrollBar, 'translateY', -translateY*scale);

        lastDis = translateY - lastY;
        lastY = translateY;
        lastTimeDis = nowTime - lastTime;
        lastTime = nowTime;

    });
    inner.addEventListener('touchend', function (e) {
        var type = 'easeOut';
        var speed = Math.round(lastDis / lastTimeDis * 10);
        speed = lastTimeDis <= 0 ? 0 : speed;
        var target = Math.round(speed * 30 + css(inner, 'translateY'));//缓冲距离

        if (target > 0) {
            target = 0;
            type = 'backOut'
        } else if (target < maxTranslate) {
            target = maxTranslate;
            type = 'backOut'
        }

        MTween({
            el: inner,
            target: {
                translateY: target
            },
            time: Math.round(Math.abs(target - css(inner, 'translateY')) * 1.5),
            type: type,
            callBack: function () {
                (init.offBar)|| (scrollBar.style.opacity = 0);
            },
            callIn: function () {
                var translateY = css(inner, 'translateY');
                (init.offBar)|| css(scrollBar, 'translateY', -translateY*scale);
            }
        })

    })

}

</script>
</body>
</html>