第一百四十二節，JavaScript，封裝庫--運動動畫和透明度動畫

JavaScript，封裝庫--運動動畫和透明度動畫

 

/** yi_dong_tou_ming()方法，說明
 * * yi_dong_tou_ming()方法，將一個元素，進行一下動畫操做
 * 1，x將元素橫向左移動或者右移動
 * 2, y將元素豎向上移動或者下移動
 * 3，w將元素動畫增長或者減小寬度
 * 4，h將元素動畫增長或者減小高度
 * 5，o將元素動畫增長或者減小透明度
 * *************************************
 *  x將元素橫向左移動或者右移動，首先將目標設置定位，position:absolute;
 *  o將元素動畫增長或者減小透明度，結合css裏元素原始透明度filter: alpha(opacity=0);opacity: 0;
 *  *************************************
 *  yi_dong_tou_ming()方法，參數說明
 *  參數是一個對象以下
 *  yi_dong_tou_ming({
            'attr':'x',        【爲動畫方式】，   x.爲橫向移動，y.爲豎向移動，w.爲增長寬度動畫，h.爲增長高度動畫，o.爲透明度動畫，【必填】
            'type':'1',        【動畫模式】，     0.勻速模式，1.緩衝模式【可選，默認緩衝】
            'speed':6,         【緩衝速度】，     動畫模式爲緩衝時設置，【可選，默認爲6】,以此值改變跨度.每一次動畫動態增長或者減小，實現緩衝效果
            'start':50,        【動畫起始位置】， 起始的像素或者透明度【可選，默認爲對象原始位置】
            'target':100,      【目標量】，       就是在原始的像素或者透明度上，增長或者減小到目標量的像素或者透明度【可先，注意目標量不填，增量必填】
            'alter':50,        【增量】，         就是在對象原始的像素或者透明度上，增長或者減小像素或者透明度【可先，注意增量不填，目標量必填】
            'step':7,          【跨度】，         每一次動畫增長或者減小的，像素或者透明度,【可選，默認20】
            't':50             【每次動畫時間】， 也就是多少毫秒執行一次動畫【可選，默認10】
        });
 **/
feng_zhuang_ku.prototype.yi_dong_tou_ming = function (obj) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        var element = this.jie_dian[i];
         // attr，爲動畫方式，
         // x.爲橫向移動
         // y.爲豎向移動
         // w.爲增長寬度動畫
         // h.爲增長高度動畫
         // o.爲透明度動畫
        var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
            obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
                obj['attr'] == 'o' ? 'opacity' : 'left';

        // start.爲動畫起始位置，
        // 若是輸入了動畫起始位置，值就爲輸入的起始位置，移動動畫是像素值（如100），透明度動畫是透明度百分比（如50）
        // 若是沒輸入，默認移動動畫獲取的對象原始像素位置，透明度動畫獲取的對象原始透明度，除以100等於原始透明度百分比
        var start = obj['start'] != undefined ? obj['start'] :
            attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
                parseInt(getStyle(element, attr));

         // t.爲每次動畫時間，也就是多少毫秒執行一次動畫
         // 不傳默認，是10毫秒執行一次動畫
        var t = obj['t'] != undefined ? obj['t'] : 10;

         // step.爲跨度，每一次動畫增長或者減小的，像素或者透明度
        var step = obj['step'] != undefined ? obj['step'] : 20;

         // alter.爲增量，就是在對象原始的像素或者透明度上，增長或者減小像素或者透明度
        var alter = obj['alter'];

         // target.爲目標量，就是在原始的像素或者透明度上，增長或者減小到目標量的像素或者透明度
         // 注意，增量，是在原始上增長或者減小多少，目標量是在原始的基礎上增長或者減小到目標
        var target = obj['target'];

         // speed.爲緩衝速度，動畫模式爲緩衝時，以此值改變step.每一次動畫動態增長或者減小，實現緩衝效果
         // 不傳，默認爲6
        var speed = obj['speed'] != undefined ? obj['speed'] : 6;

         // type.爲動畫模式，勻速爲勻速模式，緩衝爲緩衝模式
         // 不傳，默認爲緩衝模式
        var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
        if (alter != undefined && target == undefined) {
            target = alter + start;
        } else if (alter == undefined && target == undefined) {
            throw new Error('alter增量或target目標量必須傳一個！');
        }
        if (start > target) step = -step;
        if (attr == 'opacity') {
            element.style.opacity = parseInt(start) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(start) + ')';
        } else {
            element.style[attr] = start + 'px';
        }
        clearInterval(window.timer);
        timer = setInterval(function () {
            if (type == 'buffer') {
                step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
                (target - parseInt(getStyle(element, attr))) / speed;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
            }
            if (attr == 'opacity') {
                if (step == 0) {
                    setOpacity();
                } else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
                    setOpacity();
                } else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
                    setOpacity();
                } else {
                    var temp = parseFloat(getStyle(element, attr)) * 100;
                    element.style.opacity = parseInt(temp + step) / 100;
                    element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')'
                }
            } else {
                if (step == 0) {
                    setTarget();
                } else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
                    setTarget();
                } else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
                    setTarget();
                } else {
                    element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
                }
            }
            //document.getElementById('aaa').innerHTML += step + '<br />';
        }, t);
        function setTarget() {
            element.style[attr] = target + 'px';
            clearInterval(timer);
        }
        function setOpacity() {
            element.style.opacity = parseInt(target) / 100;
            element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
            clearInterval(timer);
        }
    }
    return this;
};