效果簡介

矩陣遮罩是指將遮罩層劃分為多個小區塊（矩陣狀），每個區塊獨立控制顯示/隱藏或動畫時序，產生類似數位雨、像素化轉場、馬賽克揭露等效果。這是進階遮罩技術的經典應用。

核心實現邏輯

1. 建立 N×M 矩陣的小矩形遮罩元件（通常用程式碼動態生成）
2. 每個小矩形擁有獨立的延遲時間、動畫參數
3. 通過 setMask() 或時間軸遮罩關係，控制底層內容逐塊顯示
4. 配合隨機/序列/波浪等時序演算法，產生豐富視覺變化

AS3 完整實作範例

package {
    import flash.display.*;
    import flash.events.*;
    import flash.geom.Rectangle;

    public class MatrixMask extends Sprite {
        private var content:MovieClip;      // 被遮罩內容
        private var maskContainer:Sprite;   // 遮罩矩陣容器
        private var cols:int = 20;          // 列數
        private var rows:int = 15;          // 行數
        private var cellW:Number;
        private var cellH:Number;
        private var cells:Array = [];       // 遮罩格子陣列
        private var revealOrder:Array;      // 揭露順序索引

        public function MatrixMask(target:MovieClip) {
            content = target;
            addChild(content);
            
            maskContainer = new Sprite();
            addChild(maskContainer);
            content.mask = maskContainer;   // 設定遮罩關係
            
            initCells();
            shuffleRevealOrder();
            startReveal();
        }

        private function initCells():void {
            cellW = content.width / cols;
            cellH = content.height / rows;
            
            for (var r:int = 0; r < rows; r++) {
                for (var c:int = 0; c < cols; c++) {
                    var cell:Sprite = new Sprite();
                    cell.graphics.beginFill(0xFFFFFF);
                    cell.graphics.drawRect(c * cellW, r * cellH, cellW, cellH);
                    cell.graphics.endFill();
                    cell.alpha = 0;  // 初始全透明（隱藏內容）
                    maskContainer.addChild(cell);
                    cells.push({sprite: cell, row: r, col: c});
                }
            }
        }

        private function shuffleRevealOrder():void {
            revealOrder = [];
            for (var i:int = 0; i < cells.length; i++) revealOrder.push(i);
            // 費雪耶茨洗牌
            for (i = revealOrder.length - 1; i > 0; i--) {
                var j:int = Math.random() * (i + 1);
                var tmp:int = revealOrder[i];
                revealOrder[i] = revealOrder[j];
                revealOrder[j] = tmp;
            }
        }

        private function startReveal():void {
            var index:int = 0;
            var timer:Timer = new Timer(30);  // 每 30ms 揭露一格
            timer.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void {
                if (index >= revealOrder.length) {
                    timer.stop();
                    return;
                }
                var cellInfo:Object = cells[revealOrder[index]];
                // 彈性動畫讓格子從 0→1
                animateCell(cellInfo.sprite);
                index++;
            });
            timer.start();
        }

        private function animateCell(cell:Sprite):void {
            // 簡單緩動：每幀 alpha += 0.1
            cell.addEventListener(Event.ENTER_FRAME, function(e:Event):void {
                cell.alpha += 0.1;
                if (cell.alpha >= 1) {
                    cell.alpha = 1;
                    cell.removeEventListener(Event.ENTER_FRAME, arguments.callee);
                }
            });
        }
    }
}

使用方式

// 主場景或文件類別
var myContent:MovieClip = new MyContentMC();  // 你的圖片/動畫/文字內容
addChild(myContent);
var matrixMask:MatrixMask = new MatrixMask(myContent);
matrixMask.x = 100;
matrixMask.y = 50;

變化玩法

效能優化建議

• 格子數量： 20×15=300 格平衡細節與效能；手機端建議 10×8
• cacheAsBitmap： maskContainer.cacheAsBitmap = true; content.cacheAsBitmap = true;
• 位圖填充： 格子用 beginBitmapFill 而非向量繪製
• 對象池： 重複使用格子 Sprite，避免大量 new
• GPU 模式： AIR/行動端發布啟用 renderMode="gpu"

設計師非程式實作法（時間軸版）

1. 手動建立網格狀遮罩元件（或用 JSFL 腳本批量生成）
2. 每個格子為獨立影片剪輯，時間軸做 0→100% Alpha 動畫
3. 主時間軸用幀標籤/動作控制各格子播放時機
4. 適合格子數少（<50）、一次性專案、不懂程式設計師

經典應用案例

• 《駭客任務》風格數位雨片頭
• APP 啟動畫面 Logo 矩陣揭露
• 遊戲關卡轉場、技能特效展開
• 數位展覽互動投影牆面轉場
• 音樂視覺化：頻譜數據驅動矩陣格子高度/顏色