現(xiàn)如今，前端開發(fā)除了構建功能性的網站和應用程序外，還需要創(chuàng)建具有吸引力且尤為流暢交互的用戶界面，其中動畫技術在其中發(fā)揮著至關重要的作用。在數字孿生領域，動畫的應用顯得尤為重要。數字孿生技術通過精確模擬現(xiàn)實世界中的對象、過程和系統(tǒng)，對動畫的需求遠遠超過傳統(tǒng)前端開發(fā)。

在這種環(huán)境中，動畫不僅僅是為了美觀，更是用于實現(xiàn)系統(tǒng)與現(xiàn)實的同步、演示復雜過程和數據可視化的關鍵手段。

HT 動畫介紹

在足夠短的時間內快速連續(xù)地改變物體的某個屬性，人的眼睛會感知到物體在平滑移動，這種利用人類視覺持續(xù)性產生的效果就是動畫。圖撲自研 HT for Web 產品中提供了多種創(chuàng)建動畫方式，其中很常見的是使用 ht.Default.startAnim 創(chuàng)建動畫。

ht.Default.startAnim 支持兩種動畫模型：Frame-Based 和 Time-Based。這兩種類型的動畫所需的參數各不相同：

Frame-Based 幀動畫具有固定的幀數，即 action 被調用的次數，創(chuàng)建動畫時需傳入一下參數：

frames：動畫的幀數。

Interval：動畫幀間隔毫秒數。??

easing：動畫緩動函數，默認為 ht.Default.animEasing。?

finishFunc：動畫完成后的回調函數。?

action：必須提供 action 函數，用于實現(xiàn)動畫過程。第一個參數代表通過 easing 函數運算后的值，第二個參數代表當前動畫進度（0~1）。

Time-Based 周期動畫，動畫幀數（action 的調用次數）取決于系統(tǒng)環(huán)境，創(chuàng)建動畫需要傳入的參數：

duration：動畫周期的毫秒數，默認使用 ht.Default.animDuration。

easing：動畫的緩動函數，默認使用 ht.Default.animEasing。

finishFunc：動畫結束時的回調函數。

action：必須提供 action 函數，用于實現(xiàn)動畫過程。

以小球落地過程為例，只需在動畫過程中不斷調整小球的位置屬性，就能實現(xiàn)小球落地的動畫效果：

在上圖中，小球的落地動畫效果已實現(xiàn)，但動畫看起來仍顯得有些生硬。這是因為在現(xiàn)實中，小球落地是加速運動的，并且當小球接觸地面后，受力變化會導致回彈。因此，我們還需要在動畫中控制小球的速度和運動趨勢，以便更真實地模擬這一過程。

那么如何在動畫中控制速度呢？

這就需要引用下面的 easing 函數使用。

關于 Easing 函數

Easing（緩動函數）是用于調整動畫速度的函數，它們定義了動畫在開始、進行中和結束時的速度變化。這些函數允許動畫以非線性方式運行，使動畫效果更自然、流暢和有吸引力。緩動函數在坐標軸中的表現(xiàn)可以看作是一個以時間（t）為橫軸、值為縱軸的圖表。以下附圖展示了一些常用的 easing 函數，從圖中可以清晰地看到不同 easing 的變化趨勢。

了解了 easing 函數的作用后，我們可以通過調整它來實現(xiàn)小球落地時的加速運動以及接觸地面后的回彈效果。

在實際項目中，物體的運動通常較為復雜，因此我們需要根據不同的運動類型選擇合適的 easing 函數。以下示例展示了在場景內的節(jié)點進行不同運動時，不同 easing 函數所產生的效果。

大家也可以該通過鏈接進行操作感受，通過切換不同的 easing 函數將呈現(xiàn)出不一樣的動畫效果。示例展示了多個動畫的連續(xù)播放效果。我們可以在動畫的 finishFunc 回調結束時，調用下一個動畫，從而實現(xiàn)連續(xù)的動畫效果。

常聽人說 Easing 是動畫的靈魂，就如同生命的節(jié)奏。有些人厚積薄發(fā)，有些人平穩(wěn)一生，而也有些人起起伏伏，經歷著高山低谷的跌宕起伏。無論過程如何多樣精彩，終點都是一致的——正如動畫中無論怎樣變化的 Easing 曲線，最終都通向同一個終點幀。動畫和人生一樣，豐富的過渡和變化，賦予它們獨特的美感和深意。

審核編輯 黃宇