Day 9：【高階商務計算機】五大網格規格秒速切換與平滑形變動畫

18th鐵人賽

shaoan_1211

2026-09-12 11:34:09

70 瀏覽

分享至

在昨天的文章中，我們深入解剖了自訂鍵盤佈局的動態彈性空間機制——智慧空白格區域吸收（Smart Blank Absorption）自動定位離目標最近的空白佔位格（⬚），透過定向收縮讓位填補空白格，保護現有按鍵完全不被擠出版面；同時介紹了拖回庫存區時原槽位即時轉化為微光虛線空白格的流體視覺動態。

今天，我們要邁入鍵盤結構體系的幾何躍遷：網格規格秒速切換與平滑形變動畫 (Morphing Transition)。不管是需要完整高階科學函數的進階佈局，還是追求純粹大面積盲打的精簡規格，系統都能在一鍵之間完成轉化，並透過頂部智慧緊湊控制列、幾何校正選項滑塊與正弦呼吸光澤，呈現極具現代感的流體介面體驗。

專案正式上線體驗與開源倉庫

線上體驗 Live Demo：https://410355-collab.github.io/Premium-Business-Calculator/
(強烈建議使用 iPhone Safari 或 Android 手機開啟體驗！)
GitHub 開源倉庫：https://github.com/410355-collab/Premium-Business-Calculator
開發環境：Google Antigravity IDE + Google Gemini 協同開發

一、網格規格體系與設計定位

為了滿足商務、日常、工程與大字體盲打的多重情境，自訂鍵盤系統內建了嚴謹的網格幾何架構：

6 × 4 佈局 (24 鍵)：橫向寬螢幕極致擴充型，預設提供六欄全寬商務與科學混合配置。
5 × 4 佈局 (20 鍵)：橫向五欄中型配置，適合寬螢幕比例之便利四則與商務運算。
4 × 6 佈局 (24 鍵)：科學函數進階型，預設注入 sin, cos, tan, xʸ 等高階數學函數。
4 × 5 佈局 (20 鍵)：全功能商務/工程型，兼具科學運算與商務快捷鍵的標準配置（直向預設）。
4 × 4 佈局 (16 鍵)：精簡核心型，提供大按鍵面積與極致純粹的四則運算。
3 × 4 佈局 (12 鍵)：大數字專用型，最大化手指觸碰面積，提供極致盲打體驗。

二、頂部智慧緊湊控制列與選項滑塊幾何校正

在自訂選單頂部的視覺呈現上，為了在極致緊湊的空間中維持極佳操作手感，我們進行了精密的像素級工程：

頂部智慧緊湊控制列：

將規格切換選擇器與佈局快照欄位橫向整合於頂部控制列，消除了多餘的縱向留白，最大化下方自訂工作區面積。

精確幾何校正選項滑塊：

規格切換器內部採用原生動態滑塊機制。透過 updateGliders() 即時計算啟用中按鈕的相對座標：

const sRect = selector.getBoundingClientRect();
const bRect = activeBtn.getBoundingClientRect();
const targetLeft = bRect.left - sRect.left;
glider.style.width = `${bRect.width}px`;
glider.style.transform = `translate3d(${targetLeft}px, 0, 0)`;

徹底消除了 3px 的幾何偏移，讓藍色膠囊高亮底框與規格文字（6×4、5×4、4×6、4×5、4×4）達到 1:1 絕對居中對齊。滑塊配合 --ios-spring-snappy 彈簧動態與 translate3d GPU 硬體加速，滑動流暢俐落。

三、直橫向獨立雙模式與 1:1 正圓貼身排版

為了杜絕旋轉螢幕時單純拉伸寬度造成的版面失真，系統在架構底層實作了獨立雙模式：

直向與橫向獨立持久化：

系統自動監聽視窗長寬比例，直向 (Portrait) 與橫向 (Landscape) 模式分別擁有獨立的網格規格與鍵盤佈局快取（bCalc_keyboard_grid 與 bCalc_keyboard_grid_landscape），旋轉螢幕即時無縫切換。

1:1 正圓動態排版：

自訂網格所有按鍵嚴格鎖定 aspect-ratio: 1 / 1 與 border-radius: 50%，按鍵上下左右間距完全均等，徹底消滅多餘左右空隙。

動態容器佔比調整：

自訂選單外層透過 data-grid 屬性動態分配左側鍵盤預覽區的寬度佔比（3×4 佔 52%、4×4 佔 58%、4×5 佔 62%、4×6 佔 65%、5×4 佔 70%、6×4 佔 74%），將釋放的空間最大化提供給右側擴充候選庫。

四、平滑形變過渡 (Morphing Transition) 與正弦呼吸光澤

當點擊切換網格規格時，系統不會生硬地重新閃爍刷新 DOM，而是透過 GPU 硬體加速關鍵影格動態完成平滑形變過渡：

@keyframes keyGridMorph {
    0% {
        transform: scale(0.72) translate3d(0, 4px, 0);
        opacity: 0;
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 1;
    }
}
.custom-keyboard-grid.is-morphing .key {
    animation: keyGridMorph 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

搭配 cubic-bezier(0.16, 1, 0.3, 1) 貝茲曲線與微光正弦呼吸光澤，按鍵在新幾何座標下以純 GPU 合成層迅速彈性就位，光暈無縫延續，維持極致高級的流體幾何美學。

五、規格狀態機與編輯歷史堆疊 (script.js)

當點擊規格按鈕時，系統透過 setGridPreset 進行狀態轉換、出廠配置載入或動態補齊，並同步推入歷史堆疊：

function setGridPreset(gridKey) {
    if (!GRID_CONFIGS[gridKey]) return;
    triggerVibration();
    currentKeyboardGrid = gridKey;
    saveKeyboardGrid(currentKeyboardGrid, activeEditOrientation);

    if (PRESET_DEFAULT_LAYOUTS[gridKey]) {
        currentKeyboardLayout = [...PRESET_DEFAULT_LAYOUTS[gridKey]];
    } else {
        const targetCount = GRID_CONFIGS[gridKey].total;
        if (currentKeyboardLayout.length > targetCount) {
            currentKeyboardLayout = currentKeyboardLayout.slice(0, targetCount);
        } else if (currentKeyboardLayout.length < targetCount) {
            while (currentKeyboardLayout.length < targetCount) {
                currentKeyboardLayout.push('blank');
            }
        }
    }

    saveKeyboardLayout(currentKeyboardLayout, activeEditOrientation);
    pushUndoState();
    updateGridCols();
    renderCustomKeyboard();
    renderMainKeyboard();
}

配合自訂選單底部的 Undo (復原) 與 Redo (重做) 實體按鈕，每次切換規格都會記錄進高達 40 步的歷史堆疊中，使用者可隨時無損倒回上一個網格狀態。

明日預告：無縫 L 型自適應候選庫、三大快照與核心防呆

今天我們解剖了六大網格規格秒速切換、頂部智慧緊湊控制列、幾何校正選項滑塊與平滑形變動畫。明天我們將解剖鍵盤自訂系統的空間分配與防呆架構——左上主網格 + 右側/下方全寬庫（無縫 L 型候選庫，徹底消滅手機螢幕空白死角）、5 大分類頁籤（ALL/BIZ/MATH/MEM/UTIL）24+ 功能鍵、商務/旅遊/工程快照一鍵切換，以及核心按鍵缺失警告與末尾空白列自動縮容！