JavaScript，同步動畫

?

將上一節的，移動透明動畫，修改成可以支持同步動畫，也就是可以給這個動畫方法多個動畫任務，讓它同時完成

?

原理：

?

向方法里添加一個屬性，這個屬性是一個對象，同步動畫屬性，屬性值為對象，對象里面是，動畫方式:目標量，組合的鍵值對，只能動畫方式加目標量的鍵值對

?

/** yi_dong_tou_ming()方法，動態改變css屬性說明* * yi_dong_tou_ming()方法，將一個元素，進行一下動畫操作* 1，x將元素橫向左移動或者右移動* 2, y將元素豎向上移動或者下移動* 3，w將元素動畫增加或者減少寬度* 4，h將元素動畫增加或者減少高度* 5，o將元素動畫增加或者減少透明度* 注意：也可以寫其他css屬性名稱（全稱），來動畫增加或者減少css屬性的數值，必須是值為數值的css屬性，如：font-size* ************************************** 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.為透明度動畫，【必填】注意：也可以寫其他css屬性名稱（全稱），來動畫增加或者減少css屬性的數值，必須是值為數值的css屬性，如：font-sizeo.為透明度動畫,設置透明度動畫時，必須先在css里設置初始透明度如：opacity:1;filter:alpha(opacity=100);否則IE9以下無法實現透明度動畫'type':'1', 【動畫模式】， 0.勻速模式，1.緩沖模式【可選，默認緩沖】'speed':6, 【緩沖速度】， 動畫模式為緩沖時設置，【可選，默認為6】,以此值改變跨度.每一次動畫動態增加或者減少，實現緩沖效果'start':50, 【動畫起始位置】， 起始的像素或者透明度【可選，默認為對象原始位置】一般不需要傳注意：動畫起始位置，一般按鈕動畫使用，如果是鼠標觸動動畫，會不停的初始化，因為鼠標一動就改變了動畫起始位置'target':100, 【目標量】， 就是在原始的像素或者透明度上，增加或者減少到目標量的像素或者透明度【可先，注意目標量不填，增量必填】'alter':50, 【增量】， 就是在對象原始的像素或者透明度上，增加或者減少像素或者透明度【可先，注意增量不填，目標量必填】'step':7, 【跨度】， 每一次動畫增加或者減少的，像素或者透明度,【可選，默認20】'danwei':'em', 【屬性值單位】 danwei.為屬性值單位，也就是以什么單位來計算css屬性，如是px還是em等，不傳默認px't':50 , 【每次動畫時間】， 也就是多少毫秒執行一次動畫【可選，默認10】fn:function () { 【回調函數，列隊】， 回調函數，用于動畫執行完畢后執行函數，在回調函數里在寫入動畫，就是列隊動畫，也就是一個動畫執行完畢后執行第二個動畫}mul:{ 【同步動畫對象】，用于同時要執行多個動畫，同步動畫屬性，屬性值為對象，對象里面是，動畫方式:目標量，組合的鍵值對，只能動畫方式加目標量的鍵值對同步動畫，除了動畫方式和目標量外，其他的都是在同步動畫對象外設置，因為他們是統一的其他參數'w':101,'h':500,'o':30}});**/ 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' : obj['attr'] != undefined ? obj['attr'] : '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;// danwei.為屬性值單位，也就是以什么單位來計算css屬性，如是px還是em等，不傳默認pxvar danwei = obj['danwei'] != undefined ? obj['danwei'] : 'px';// alter.為增量，就是在對象原始的像素或者透明度上，增加或者減少像素或者透明度var alter = obj['alter'];// target.為目標量，就是在原始的像素或者透明度上，增加或者減少到目標量的像素或者透明度// 注意，增量，是在原始上增加或者減少多少，目標量是在原始的基礎上增加或者減少到目標var target = obj['target'];//mul,接收的，obj對象里的mul屬性，而mul屬性是一個對象，由動畫方式加目標量組合的鍵值對，也就是要同步動畫的參數var mul = obj['mul']; //接收同步動畫（參數對象）// speed.為緩沖速度，動畫模式為緩沖時，以此值改變step.每一次動畫動態增加或者減少，實現緩沖效果// 不傳，默認為6var 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 && mul == 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 + danwei;}if (mul == undefined){ //判斷如果同步動畫對象沒有傳，說明是單個動畫mul = {}; //創建mul對象mul[attr] = target; //將單個動畫的，動畫方式當作對象鍵，將目標量當作值，組合成鍵值對到對象里 }clearInterval(element.timer); //給對每個象創建定時器并停止定時器element.timer = setInterval(function () { //將對象下的定時器開啟//創建一個布爾值，這個值可以了解對個動畫是否執行完畢var flag = true; //表示都執行完畢了//循環同步動畫對象for (var i in mul) {attr = i == 'x' ? 'left' : i == 'y' ? 'top' :i == 'w' ? 'width' : i == 'h' ? 'height' :i == 'o' ? 'opacity' : i != undefined ? i : 'left'; //得到同步動畫對象里的，動畫方式target = mul[i]; //得到同步動畫對象里的，目標量 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) + ')';}//判斷目標值不等于元素當前值，說明動畫還沒到達目標值，將flag修改成falseif (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;} 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 + danwei;}//判斷目標值不等于元素當前值，說明動畫還沒到達目標值，將flag修改成falseif (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;}}//判斷flag = true;了說明元素的當前值已經達到目標值，可以停止定時器了if (flag) {clearInterval(element.timer); //停止定時器if (obj.fn != undefined)obj.fn(); //判斷如果傳入了回調函數，動畫執行完畢后執行回調函數,列隊動畫 }}, t);function setTarget() {element.style[attr] = target + danwei;}function setOpacity() {element.style.opacity = parseInt(target) / 100;element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';}}return this; };

?

html代碼

<div id="ceshsdf">測試</div>

css代碼

/*測試*/ #ceshsdf{width:100px;height: 100px;background-color: #ff340e;position: absolute;top: 100px;left: 100px;opacity:1;filter:alpha(opacity=100); }

前臺js代碼

//測試$('#ceshsdf').on_click(function () {$('#ceshsdf').yi_dong_tou_ming({'t':30,'step':10,mul:{ //同步動畫屬性，屬性值為對象，對象里面是，動畫方式:目標量，組合的鍵值對，只能動畫方式加目標量的鍵值對'w':500,'h':500,'o':30}});});

首先要引入函數庫和封裝庫文件

轉載于:https://www.cnblogs.com/adc8868/p/6416743.html

總結

以上是生活随笔為你收集整理的第一百四十五节，JavaScript，同步动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。