鑰匙要點
- thumult Hype是一種現代的Web動畫工具，允許動畫劑創建密鑰幀（啟動和停止點），並且計算機動態填充了所有內部框架。計算機生成這些幀的方式會影響觀眾的注意力和情感聯繫。
時序功能在人性化您正在動畫的元素中起著至關重要的作用。他們可以幫助清晰，清晰地展示信息，直接關注，傳達情感以及娛樂和參與。定時功能還可以模擬“無生命”和“動畫”對象的運動。
Tumult Hype提供了一個自定義的定時功能編輯器，該編程允許操縱控制點並在曲線上添加新點以形成您自己的自定義計時功能。這些功能可以被命名並保存在炒作文檔中，也可以將其設置為任何新動畫的默認計時函數。 -
使用定時功能的實用技巧包括讓您的動畫“休息”幾天，以查看您回來時是否仍然喜歡它，從同齡人那裡獲得反饋，避免了通過用戶操作觸發的動畫的大量寬鬆，因為它將觸發它感到遲鈍，觀察自然並理解重力/物理學的數學，以告知如何撰寫動畫。
- 本文由tumult 贊助。感謝您支持使SitePoint成為可能的合作夥伴。
- >
>動畫可以大致定義為顯示連續的圖像或幀，以給予平滑更改的錯覺。諸如Tumult Hype之類的現代Web動畫工具沒有手工製作每個幀，而是讓動畫儀創建關鍵幀（通常啟動和停止點），並且計算機動態填充了所有框架之間的所有框架。計算機決定生成這些幀的方式可能會影響觀眾的注意力和情感聯繫。本文探討了一個關鍵的生成動畫，計時功能以及如何最佳地利用動畫的高級計時函數編輯器。
>
閱讀之前，第一步是下載Tumult Hype。該試驗持續14天。 Tumult Hype具有兩種風味模式：標準和專業。為了製作自定義定時功能（並與本文一起使用！），您需要使用Hype Professional。
線性和寬鬆的計時函數
>假設您想在屏幕上移動一個盒子。在兩秒鐘的過程中，您將其向左移動300像素。在生成動畫時，計算機需要及時確定盒子的位置，這是正時函數的作用。其中最基本的是線性插值，它均勻地將距離劃分為框架數。因此，每秒30幀的動畫將使每個步驟移動框5像素，為300px /（2s * 30fps）= 5px。這成功創建了一個動畫：
是主觀的，這個動畫很平淡！它移動而沒有任何自然的身體或體重。觀眾的眼睛必須趕上盒子的移動速度，然後當動畫突然結束時，他們的目光可能會超越他們的目光。最常見的解決方案是將基本的加速度和減速應用於盒子。此計時功能稱為“易於”：
>
這看起來更好，並且是動畫的最常見選擇。這是騷擾炒作和大多數其他動畫工具中的默認計時函數。
>
表示正時函數的表示
更確切地說，定時函數輸入時間（x）的值並輸出動畫屬性（y）的值。召回回到中學代數，F（x）= y風格的功能是可以在2D圖上表示的形式。基本的線性正時函數看起來正如人們所期望的，一行：
輕鬆的是一條柔和的曲線，它以較慢的速度啟動和結束：
>
使用CubicBézier曲線的數學創建此計時函數。通過更改影響曲率的控制點，可以實現不同的加速度和減速：
屬性值甚至可以低於最小值或最大值以上，創建預期和過時的正時函數：
>
Tumult Hype提供了更多的功能：可以將幾條Bézier曲線組合在一起以形成多曲線路徑。這些可用於各種效果，例如彈跳或彈性：
>專注於動畫中的定時功能的一般推理
自然不像上面的線性正時函數那樣機械移動。因此，定時功能諸如放鬆之類的功能在人性化您正在動畫的元素中起著至關重要的作用。這有助於清晰，清晰地提供信息。它指導焦點。
良好的時機有助於為動畫提供意義。它使毫無生氣的形狀變成現實。有些可以幫助傳達對品牌至關重要的情感。 其他時機可以娛樂和參與。
“無生命”對象的運動更多地受到物理的控制。 “動畫”對象由自己的思想和情感支配。兩種樣式都可以通過定時功能進行建模。
在騷擾中應用時序函數
編輯動畫在騷動炒作中的時序函數很容易。 步驟零是製作動畫的，因此，如果您不熟悉，請查看教程和文檔。
要調整單個動畫的計時函數，您可以雙擊“按專業”區域中的密鑰幀之間的動畫指示欄：>
如果選擇了多個動畫，則可以使用時間表接口右側的“計時函數”彈出按鈕：>
未選擇動畫時，默認的時間函數將顯示為“正時功能”彈出按鈕的標題。
在Hype Professional中，此接口允許操縱控制點並在曲線上添加新點以形成您自己的自定義定時功能。 可以命名正時功能，以便將其保存在炒作文檔中。它們也可以將其設置為任何新動畫的默認計時函數：
>
該編輯器類似於其他向量編輯應用程序。這是操縱控制點的備忘單：
- 單擊曲線：添加新點
- 刪除鍵：刪除控制點
- >選件單擊：轉換為角度頂點
- 選項拖拉：拖出新的控制點
- >選項（拖動控制點）：鏡像
- >命令（拖動控制點）：斷開連接
-
無（只是拖動控制點）：非對稱
- shift（拖動控制點時）：保持45°角
使用定時功能的實用提示
- >手工藝和選擇定時功能是一種技能，經驗將使人們變得更好。
>讓您的動畫“休息”幾天而無需查看它，看看您回來時是否仍然喜歡它。或從同齡人那裡獲得反饋。 -
循環動畫通常應使用線性正時函數。基於輕鬆的計時功能將在循環週期的開始時創建一個停止點或跳躍。 >
- >避免在用戶動作觸發的動畫中避免（緩慢加速），因為它會感到緩慢。
>
- >過衝（背部）和期望（反向背面）可能是看起來光榮的效果，但通常這違背了幫助觀眾關聯動作的動畫的目的。此外，這些可能會浪費用戶的時間，因為它們傾向於花費更長的時間。很少使用。
- >嘗試使用相同的動畫持續時間和不同的時序函數，以進行更多的視覺陰謀或表達不同的體重/慣性，這可能是一件好事。也就是說，除非自然模型或角色動畫，否則最好不要過多地使用太多不同的計時功能。不要忘記也嘗試使用驚人的動畫開始時間或稍微更改持續時間。
就像視覺效果通常具有控制線的重量和調色板一樣，最好為動畫提出一種設計語言，包括持續時間和時序功能，以及用於選擇哪種時間定時功能的基本原理。 >
觀察自然並了解重力/物理學的數學，因為這可以幫助告知如何創作動畫。例如，要製作彈跳對象，y值應使用彈跳正時函數。 X值應該具有線性時序函數，因為沒有作用在該軸上的力。即使理解良好，有時也更容易使用物理引擎。 - >
>從大自然或大師動畫師那裡獲得靈感：
-
John Halas和Harold Whitaker的動畫時機
>
Richard Williams的動畫師的生存工具
-
- 結論
以上是高級時機和寬鬆的網絡動畫，thumult炒作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
未選擇動畫時，默認的時間函數將顯示為“正時功能”彈出按鈕的標題。
在Hype Professional中，此接口允許操縱控制點並在曲線上添加新點以形成您自己的自定義定時功能。 可以命名正時功能，以便將其保存在炒作文檔中。它們也可以將其設置為任何新動畫的默認計時函數：
