高級時機和寬鬆的網絡動畫，thumult炒作

鑰匙要點

• 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的動畫師的生存工具
• 結論
  • >操縱時序功能是創建有意義的動畫的高級步驟。 它們可以幫助建模物理，情感或簡單地減少密鑰幀結構。 Tumult Hype的自定義正時功能編輯器賦予了功能和靈活性，以幫助您製作最佳動畫。

    如果您想試一試，現在作為站點點用戶，您可以以24.99美元的價格獲得50％的炒作標準。

    或如果您追求所有鈴鐺和哨子的版本，我們還為炒作專業人士提供25％的折扣，價格為74.99美元。

    經常詢問有關高級定時功能和放鬆網絡動畫的問題
    Web動畫的CSS和JavaScript之間的關鍵差異是什麼？
    CSS和JavaScript都是創建Web動畫的強大工具，但它們具有一些關鍵差異。 CSS通常更簡單，更易於使用，這是簡單動畫的理想選擇。在大多數情況下，它的性能也比JavaScript更好，因為它可以將動畫任務卸載到瀏覽器的渲染引擎中。但是，JavaScript提供了更多的控制和靈活性，可以進行複雜的動畫和互動。它還與較舊的瀏覽器具有更好的兼容性。
    >如何使用Web Animations API？ 如何優化我的網絡動畫以提高性能？
    有幾種方法可以優化Web動畫以獲得更好的方法表現。首先，盡可能將CSS用於簡單的動畫，因為它的性能比JavaScript更好。其次，將requestAnimationFrame（）方法用於JavaScript動畫，因為它允許瀏覽器優化動畫循環。第三，避免動畫觸發佈局或繪畫的屬性，因為它們在性能方面更昂貴。

    Web動畫中的關鍵幀是什麼？

    密鑰幀是動畫中特定的時間點，您可以在其中定義元素的外觀。它們用於控制CSS動畫序列中的中間步驟。您可以根據需要指定任意數量的關鍵幀，並且瀏覽器將插值它們之間的動畫。

    >

    >如何使我的Web動畫響應？
    使您的Web動畫響應，您需要確保它們適應不同的屏幕尺寸和方向。這可以通過使用類似百分比之類的相對單元而不是像像素這樣的絕對單元來實現，並使用媒體查詢根據視口大小來調整動畫參數。

    >

    > Web動畫的最佳實踐是什麼？ >

    > Web動畫的一些最佳實踐包括保持動畫簡單和微妙，使用寬鬆的功能使動畫感覺更自然，優化動畫以進行性能以及使動畫響應。同樣重要的是要確保動畫增強用戶體驗而不是分心。用於測試和調試網絡動畫。這些工具使您可以檢查動畫屬性，控制動畫播放並可視化動畫時間表。您還可以使用JavaScript來記錄動畫事件和狀態。

    >我可以使用Web動畫來改善可訪問性嗎？指導用戶進行互動，並增強整體用戶體驗。但是，重要的是要確保動畫不會給運動靈敏度或其他可訪問性需求的用戶引起問題。您可以使用偏好的動作媒體查詢來調整或禁用這些用戶的動畫。

    >

以上是高級時機和寬鬆的網絡動畫，thumult炒作的詳細內容。更多資訊請關注PHP中文網其他相關文章！