<ul id="kaami"></ul>

<del id="kaami"></del>

<strike id="kaami"></strike>

JS實現css屬性動畫效果

LoftySoul 發布于2019-08-21 17:31 / 2864人閱讀

摘要：代碼屬性運動框架高動畫寬動畫透明度動畫高寬透明度鏈式動畫高寬透明度同時動畫引入的代碼運動框架運動標桿假設所有運動都達到了目標值去當前的值獲取小數四舍五入獲取整數算速度檢測屬性動畫是否全部達到目標值如果不是所有的動畫都達到目標值，標桿

html代碼



    
        
        css屬性運動框架
 
 
 
    
    
        
            高動畫
            寬動畫
            透明度動畫
            高寬透明度鏈式動畫
            高寬透明度同時動畫

引入的JS代碼,運動框架move.js

//運動
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag=true;//標桿,假設所有運動都達到了目標值
                for(var attr in json)
            {
                    //1.去當前的值
                    var icur = 0;
                    if(attr == "opacity") {
                        icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat獲取小數.Math.round四舍五入
                    } else {
                        icur = parseInt(getStyle(obj, attr)); //parseInt獲取整數
                    }
                    //2.算速度
                    var speed = (json[attr] - icur) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //3.檢測屬性動畫是否全部達到目標值
                    if(icur !== json[attr]) 
                    {
                        flag=false;//如果不是所有的動畫都達到目標值，標桿設為false
                    }        
                    if(attr == "opacity") 
                    {
                            obj.style.filter = "alpha(opacity:" + (icur + speed) + ")";
                            obj.style.opacity = (icur + speed) / 100;
                        }
                    else 
                    {
                            obj.style[attr] = icur + speed + "px";
                    }
                }
                //在動畫結束的時候檢測是否有回調函數,如果檢測到有回調函數，執行
                    if(flag)
                    {
                        clearInterval(obj.timer);
                        if(fn)
                        {
                            fn();
                        }
                    }
                }, 30)
            }
     //獲取對象屬性
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];//IE
        }
        else{
            return getComputedStyle(obj,false)[attr];//火狐 chrome
        }
    }

GPU云服務器云服務器 js動畫效果 js 漂浮動畫效果 js 消失動畫效果 js動畫效果瀑布

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89621.html

JavaScript是如何工作的: CSS 和 JS 動畫底層原理及如何優化它們的性能

摘要：貝塞爾曲線貝塞爾曲線是應用于二維圖形應用程序的數學曲線。通過調整控制點，貝塞爾曲線的形狀會發生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個值，或者更準確地說它需要兩對數字。每對描述立方貝塞爾曲線控制點的和坐標。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 13 篇。如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是如何工作的：...

darcrand 2019-08-23 14:47 評論0 收藏0
[練習]利用CSS steps 實現逐幀動畫

摘要：網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用控制，和單純使用實現，兩者的優劣總體概括來說就是動畫可控性更強，但開銷大，實現復雜。網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用JS控制，和單純使用CSS實現，兩者的優劣總體概括來說就是： JS動畫可控性更強，但開銷大，實現復雜。 CSS動畫實現相對JS更簡單。常見的網...

RiverLi 2019-08-30 12:55 評論0 收藏0
兩種方案開發小程序動畫

摘要：通過這種方法產生的動畫，無法按照原有軌跡收回，所以在事件之后設置了定時器，定義在執行動畫之后，執行另一個動畫。方式存在較多局限性動畫只能執行一次，循環效果需要通過定時器完成。在普通的網頁開發中，動畫效果可以通過css3來實現大部分需求，在小程序開發中同樣可以使用css3，同時也可以通過api方式來實現。指路：小程序animatiom動畫API API解讀小程序中，通過調用api來...

MingjunYang 2019-08-23 12:58 評論0 收藏0
兩種方案開發小程序動畫

摘要：通過這種方法產生的動畫，無法按照原有軌跡收回，所以在事件之后設置了定時器，定義在執行動畫之后，執行另一個動畫。方式存在較多局限性動畫只能執行一次，循環效果需要通過定時器完成。在普通的網頁開發中，動畫效果可以通過css3來實現大部分需求，在小程序開發中同樣可以使用css3，同時也可以通過api方式來實現。指路：小程序animatiom動畫API API解讀小程序中，通過調用api來...

chengjianhua 2019-08-29 17:13 評論0 收藏0