【JavaScript】explode動畫

標籤：寬高   ati   取數   line   ...   nts   元素   middle   調用   

這是一個js實現的粒子彙總文字或圖片的動畫特效

部分程式如下

        n.container = n.container[0] || n.container;   /*有且僅有一個container*/        var width = n.params.width;        var height = n.params.height;        var wWidth = document.body.clientWidth;        var wHeight = document.body.clientHeight;        n.container.width = width;        n.container.height = height;        var ctx = n.container.getContext(‘2d‘);        var c = document.createElement(‘canvas‘);        var ct = c.getContext(‘2d‘);   /*用於繪製圖片或文字*/        var items = [];        var picture = null;        var requestId = null;        var total = 0;        var getRandom = function(max, min) {            min = arguments[1] || 0;            return Math.floor(Math.random() * (max - min + 1) + min); /*取min和max之間的隨機數*/        };        function cutSlice() {/*cutSlice()方法，實現粒子動畫，讓其往最終位置運動*/            ctx.clearRect(0, 0, n.container.width, n.container.height);            for(var i = 0; i < c.width * c.height; i++) {                var item = items[i];                var targetX = item.targetX;                var targetY = item.targetY;                var currentX = item.currentX;                var currentY = item.currentY;                var ax = false;                var ay = false;                if(!item.isLock) {                    if(Math.abs(targetX - currentX) <= .5) {                        item.currentX = targetX;                        ax = true;                    } else {                        item.currentX += (targetX - currentX) * item.ax;                    };                    if(Math.abs(targetY - currentY) <= .5) {                        item.currentY = targetY;                        ay = true;                    } else {                        item.currentY += (targetY - currentY) * item.ay;                    };                    if(ax && ay) {/*只有ax和ay同時到達終點時，total才會減1*/                        total--;                        item.isLock = true;                    }                };                var ix = item.currentX;                var iy = item.currentY;                ctx.putImageData(item.data, ix, iy); /*putImageData() 方法將映像資料（從指定的 ImageData 對象）放回畫布上。*/            };            if(total > 0) {                requestId = requestAnimationFrame(cutSlice); /*不用設定間隔,反覆調用*/            } else {                cancelAnimationFrame(requestId);            };        }        function Item(data, targetX, targetY, currentX, currentY) {/*建立一個Item建構函式，用來放置每一個粒子*/            this.data = data;            this.targetX = targetX; /*彙總的最終位置*/            this.targetY = targetY;            this.currentX = currentX;/*當前位置*/            this.currentY = currentY;            this.ax = .13 - Math.random() * .06;  /*ax和ay分別表示運動速度*/            this.ay = .16 - Math.random() * .08;        }        function drawCanvas() {            if(n.params.type == 2) {  /*針對圖片*/                picture = new Image();                picture.crossOrigin = "";                picture.onload = function() {                    var pw = picture.width;                    var ph = picture.height;                    c.width = pw;   /*設定canvas的寬度*/                    c.height = ph;                    ct.drawImage(picture, 0, 0, pw, ph, 0, 0, pw, ph);  /*把映像中的某個地區繪製到上下文中，源映像（起點和寬高），上下文中的起點和寬高*/                    draw(pw, ph);                };                picture.src = n.params.img;            } else {  /*針對文字*/                var word = n.params.text;                ct.font = ‘60px Arial‘;   /*這裡指定用於測文本寬度*/                var w = ct.measureText(word).width;   /*測文本寬度*/                var h = 100;                c.width = w;                c.height = h;                ct.fillStyle = ‘deepskyblue‘;                ct.font = ‘60px Arial‘;   /*這裡指定用於繪製文本，應與之前設定保持一致*///                ct.textAlign = ‘center‘;                ct.textBaseline = ‘middle‘;                ct.fillText(word, 0, 50);  /*繪製文本,這裡為什麼沒有直接繪製上去？而要調用draw？？？*/                draw(w, h);            }            function draw(pw, ph) {/*draw 方法用來分解粒子，先分成cols 列和rows 行，每一個粒子高度都為1，然後用getImageData() 來擷取ImageData對象，然後建立新的Item執行個體，然後添加到items數組中。*/                var w = 1;                var h = 1;                var cols = Math.floor(pw / w);/*圖片或文字的寬度高度*/                var rows = Math.floor(ph / h);                for(var i = 0; i < c.width * c.height; i++) {                    var x = Math.floor(i % cols); /*通過xy找到每一行的所有元素(0,0)(1,0)...(0,1)(1,1)(2,1)*/                    var y = Math.floor(i / cols);                    var data = ct.getImageData(x * w, y * h, w, h);/* 文字也能擷取？？拷貝！取得原始映像資料,要取得取資料的畫面地區的xy座標以及該地區的像素寬度和高度，這裡每次取1*1像素*/                    var vx = getRandom(300, -300);                    var vy = getRandom(500, -500); /*擴大範圍，使圖片周圍也有粒子*/                    var item = new Item(data, x, y, x + vx, y + vy);                    items.push(item);                };                total = items.length;                cutSlice();            }        }

 

【JavaScript】explode動畫