掌控物體運(yùn)動(dòng)藝術(shù)：圖撲 Easing 函數(shù)實(shí)踐應(yīng)用

現(xiàn)如今，前端開(kāi)發(fā)除了構(gòu)建功能性的網(wǎng)站和應(yīng)用程序外，還需要?jiǎng)?chuàng)建具有吸引力且尤為流暢交互的用戶(hù)界面，其中動(dòng)畫(huà)技術(shù)在其中發(fā)揮著至關(guān)重要的作用。在數(shù)字孿生領(lǐng)域，動(dòng)畫(huà)的應(yīng)用顯得尤為重要。數(shù)字孿生技術(shù)通過(guò)精確模擬現(xiàn)實(shí)世界中的對(duì)象、過(guò)程和系統(tǒng)，對(duì)動(dòng)畫(huà)的需求遠(yuǎn)遠(yuǎn)超過(guò)傳統(tǒng)前端開(kāi)發(fā)。

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

HT 動(dòng)畫(huà)介紹

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

ht.Default.startAnim 支持兩種動(dòng)畫(huà)模型：Frame-Based 和 Time-Based。這兩種類(lèi)型的動(dòng)畫(huà)所需的參數(shù)各不相同：

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

frames：動(dòng)畫(huà)的幀數(shù)。

Interval：動(dòng)畫(huà)幀間隔毫秒數(shù)。??

easing：動(dòng)畫(huà)緩動(dòng)函數(shù)，默認(rèn)為 ht.Default.animEasing。?

finishFunc：動(dòng)畫(huà)完成后的回調(diào)函數(shù)。?

action：必須提供 action 函數(shù)，用于實(shí)現(xiàn)動(dòng)畫(huà)過(guò)程。第一個(gè)參數(shù)代表通過(guò) easing 函數(shù)運(yùn)算后的值，第二個(gè)參數(shù)代表當(dāng)前動(dòng)畫(huà)進(jìn)度（0~1）。

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

duration：動(dòng)畫(huà)周期的毫秒數(shù)，默認(rèn)使用 ht.Default.animDuration。

easing：動(dòng)畫(huà)的緩動(dòng)函數(shù)，默認(rèn)使用 ht.Default.animEasing。

finishFunc：動(dòng)畫(huà)結(jié)束時(shí)的回調(diào)函數(shù)。

action：必須提供 action 函數(shù)，用于實(shí)現(xiàn)動(dòng)畫(huà)過(guò)程。

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

在上圖中，小球的落地動(dòng)畫(huà)效果已實(shí)現(xiàn)，但動(dòng)畫(huà)看起來(lái)仍顯得有些生硬。這是因?yàn)樵诂F(xiàn)實(shí)中，小球落地是加速運(yùn)動(dòng)的，并且當(dāng)小球接觸地面后，受力變化會(huì)導(dǎo)致回彈。因此，我們還需要在動(dòng)畫(huà)中控制小球的速度和運(yùn)動(dòng)趨勢(shì)，以便更真實(shí)地模擬這一過(guò)程。

那么如何在動(dòng)畫(huà)中控制速度呢？

這就需要引用下面的 easing 函數(shù)使用。

關(guān)于 Easing 函數(shù)

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

了解了 easing 函數(shù)的作用后，我們可以通過(guò)調(diào)整它來(lái)實(shí)現(xiàn)小球落地時(shí)的加速運(yùn)動(dòng)以及接觸地面后的回彈效果。

在實(shí)際項(xiàng)目中，物體的運(yùn)動(dòng)通常較為復(fù)雜，因此我們需要根據(jù)不同的運(yùn)動(dòng)類(lèi)型選擇合適的 easing 函數(shù)。以下示例展示了在場(chǎng)景內(nèi)的節(jié)點(diǎn)進(jìn)行不同運(yùn)動(dòng)時(shí)，不同 easing 函數(shù)所產(chǎn)生的效果。

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

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

審核編輯 黃宇