                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

同時運動的另外一種解決方案，拿走，不謝

????UtilJS.DOMUtil?=?function(){};

????/**
?????*?獲取元素當前的樣式（即計算后的樣式）
?????*?
?????*?@param??{Element}?element??目標元素
?????*?@param??{String}?attrName?指定樣式屬性的名稱
?????*?@return?{String}??????????指定樣式屬性的值
?????*/
????UtilJS.DOMUtil.getSpecifiedStyleOnElement?=?function(element,?attrName){
????????if(getComputedStyle){
????????????return?getComputedStyle(element,?null)[attrName];//只能用[]，卻不能用getPropertyValue，為啥？？？
????????}
????????else{
????????????return?element.currentStyle[attrName];
????????}
????};
????UtilJS.AnimationUtil?=?function(){};
????/**
?????????*?封裝幾種常見CSS樣式屬性變化的運動（1個或幾個CSS屬性的同時緩沖運動，通過endFun參數可以變為鏈式緩沖運動）
?????????*?
?????????*?@param??{Element}?element?????目標元素
?????????*?@param??{String}?attrName????樣式名
?????????*?@param??{Number}?targetValue?運動結束的條件-目標值
?????????*?@param??{Number}?msec????????運動定時器的間隔時間
?????????*?@param??{Function}?endFun??????可選，定時器結束后觸發該函數
?????????*/
????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed?=?function(element,?attrName,?targetValue,?msec,?endFun){
????????????//給元素綁定一個定時器數組對象（該元素每一個需要改變的樣式對應一個定時器）
????????????if(!element.timers)
????????????????element.timers?=?{};

????????????//給需要運動的元素添加定時器屬性
????????????if(!element.timers[attrName]){
????????????????element.timers[attrName]?=?null;
????????????}
????????????else
????????????????clearInterval(element.timers[attrName]);

????????????//判斷是否為“透明度運動”
????????????if(attrName?==?"opacity"){
????????????????var?isOpacityAttr?=?true;
????????????????if(!element.alpha)
????????????????????element.alpha?=?Math.round(parseFloat(UtilJS.DOMUtil.getSpecifiedStyleOnElement(element,?attrName))?*?100);
????????????}

????????????//定時器函數
????????????element.timers[attrName]?=?setInterval(function(){
????????????????//1.獲取目標元素的指定的樣式值
????????????????if(isOpacityAttr)
????????????????????var?styleValue?=?Math.round(parseFloat(UtilJS.DOMUtil.getSpecifiedStyleOnElement(element,?attrName))?*?100);
????????????????else
????????????????????var?styleValue?=?parseInt(UtilJS.DOMUtil.getSpecifiedStyleOnElement(element,?attrName));

????????????????//2.計算緩沖運動的速度
????????????????var?speed?=?(targetValue?-?styleValue)?/?8;
????????????????speed?=?speed>0???Math.ceil(speed)?:?Math.floor(speed);

????????????????//3.運動結束判斷
????????????????if(styleValue?==?targetValue){//3.1運動結束
????????????????????clearInterval(element.timers[attrName]);
????????????????????if(endFun?&&?(typeof?endFun?==?"function"))
????????????????????????endFun();
????????????????}
????????????????else{//3.2運動沒有結束
????????????????????if(isOpacityAttr){
????????????????????????element.alpha?+=?speed;
????????????????????????element.style.filter?=?"alpha(opacity:"?+?element.alpha?+?")";
????????????????????????element.style.opacity?=?element.alpha?/?100;
????????????????????}
????????????????????else{
????????????????????????element.style[attrName]?=?styleValue?+?speed?+?"px";
????????????????????}
????????????????}
????????????},?msec);
????????}
????}

老師的這個運動框架不能說完美，應該適合于解決幾種常見CSS樣式屬性變化的情況；
上面的代碼，包括緩沖運動、鏈式運動和同時運動；

風_起

2016-04-21

源自：JS動畫效果 6-2

關注問題我要回答

720

操作

收起

3 回答

風_起提問者
2016-04-21

再補充一點：后面的element.alpha可以換成styleValue，并且isOpactiy也不需要了。（代碼忘記更新了）

0 回復有任何疑惑可以回復我~

收起回答

風_起提問者
2016-04-21

好吧，并沒有bug，在實現同時和鏈式運動的時候只要注意函數調用順序即可。（并不是bug）親測可以哦：

<body>
????<ul?class="multi_ul">
????????<li?id="li1"></li>
????????<li?id="li2">同時運動</li>
????????<li?id="li3">不要移開，會有驚喜&nbsp;&nbsp;:)<br/>鏈式運動</li>
????</ul>
</body>

body,?div,?span{
????????????margin:?0px;
????????}

????????.multi_ul?li{
????????????border:?5px?solid?blue;
????????????width:?200px;
????????????height:?100px;
????????????background-color:?yellow;
????????????margin-bottom:?20px;
????????}

????????#li2,?#li3{
????????????font-size:?12px;
????????????filter:?alpha(opacity:30);/*?IE8之前?*/
????????????opacity:?0.3;
????????}

????????#li3{
????????????border:?10px?solid?black;
????????}

????????????var?li2?=?document.getElementById('li2');
????????????//移入時，寬高同時運動，透明度隨后運動
????????????UtilJS.EventUtil.addBubblingHandler(li2,?"mouseover",?function(){
????????????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed(li2,?"width",?400,?30,?function(){
????????????????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed(li2,?"fontSize",?48,?100);
????????????????});
????????????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed(li2,?"height",?400,?30);
????????????});
????????????//移出時，透明度先運動，寬高再同時運動
????????????UtilJS.EventUtil.addBubblingHandler(li2,?"mouseout",?function(){
????????????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed(li2,?"fontSize",?12,?100,?function(){
????????????????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed(li2,?"width",?200,?30);
????????????????????UtilJS.AnimationUtil.changeElementStyleAtVariableSpeed(li2,?"height",?100,?30);
????????????????});
????????????});