設置一個基於鼠標位置的旋轉：

1. 設定視角

2. 設定觸發器

3. 製作旋轉的動畫

4. 配置靜止狀態

5. 創建一個鏡面高光

設定視角

1. 確保您要做動畫的子元素的父元素被選中

2. 在過渡和變換下的樣式面板中，將子元素的視角改為1000像素

設定觸發器

1. 選擇您想作為觸發器的元素（例如卡片）

2. 在互動面板中，點擊選定元素旁邊的加號，從下拉選單中選擇鼠標在元素上移動

製作旋轉的動畫

1. 點擊互動面板 > 鼠標移動時 > 動作 > 播放鼠標動畫

2. 點擊鼠標動畫旁邊的加號

3. 命名它（例如在鼠標移動時旋轉）

4. 點擊鼠標X動作時間線下的加號，在0%處選擇旋轉

5. 在旋轉下，將Y軸改為-5度

6. 點擊100%處的卡片元素，在旋轉下將其Y軸改為5度

7. 在鼠標Y動作下，添加一個旋轉的動作

8. 在"旋轉"的0%處，將X軸改為5度

9. 在100%的旋轉下，將X軸改為-5度

10. 關閉動畫以調整平滑度

配置靜止狀態

1. 在交互面板中的鼠標移動時，將鼠標的X位置設置為50%。

2. 將鼠標的Y位置設置為50%。

創建一個鏡面高光

1. 在畫布上拖動一個新的Div塊到您正在使用的元素裡面（Card）

2. 創建一個class，並命名它（例如卡片-高光）

3. 設定其寬度和高度（例如400像素）

4. 將位置設置為絕對值

5. 從左上角開始定位

6. 設定背景顏色

7. 在邊框下，將半徑改為50%

8. 在"效果"下，將"不透明度"改為10%

9. 添加一個模糊過濾器，將半徑改為50像素

10. 在互動面板上，點擊鼠標移動時的旋轉

11. 在鼠標X時間線的0%處添加一個移動動畫，將其X軸改為100%

12. 在鼠標X時間線的100%處，添加一個移動動畫，並將其X軸改為-50%

13. 在鼠標Y軸的時間線0%處，添加一個移動動畫，並將其Y軸改為50%

14. 在鼠標Y軸的時間線上，在100%處添加一個移動動畫，並將其Y軸改為-50%

本文會提到：

1. 讓導航欄消失

2. 讓導航欄重新出現

讓導航欄消失

1. 選擇導航欄，確保它的位置固定在視窗上

2. 在互動面板中，從"When Scrolled Down"選單中選擇"Start an Animation"

3. 命名它（例如"nav leave"）

4. 點擊定時動作旁邊的加號

5. 在"Under Move"改變Y軸，直到導航條在視窗外

6. 調整您的緩和曲線和持續時間

讓導航欄重新出現

1. 選擇導航欄

2. 在互動面板中，從"When Scrolled Up"選單中選擇"Start an Animation"

3. 命名它（例如"nav enter"）

4. 點擊定時動作旁邊的加號

5. 在"Under Move"下把Y軸改回0

6. 調整您的緩和曲線和持續時間

本文會提到：

1. 創建動畫使一個元素出現

2. 創建動畫使一個元素消失

3. 添加第二個觸發元素來顯示，並將兩者設置為在點擊時顯示/隱藏

創建動畫使一個元素出現

1. 選擇想作為觸發器的元素

2. 在互動面板中，從選定元素選單中選擇鼠標點擊（輕擊）

3. 從"On 1st Click"中選擇"Start an Animation"

4. 點擊"Timed Actions"旁邊的加號

5. 將動畫命名為"Show"

6. 選擇想出現的元素（與觸發器不同）

7. 點擊定時動作旁邊的加號，選擇隱藏/顯示

8. 點擊眼睛圖標，將顯示設置為無

9. 點擊"Set as initial state"旁邊的方框

10. 當仍在互動面板顯示時，點擊加號，在定時動作下添加第二個隱藏/顯示動作

11. 在"Hide/Show"使顯示設定為原來的值

創建動畫使一個元素消失

1. 選擇元素，即上一步中的觸發元素

2. 在第二次點擊時選擇開始動畫

3. 點擊定時動作旁邊的加號

4. 將動畫命名為"Hide"

5. 選擇上一步中您想消失的元素

6. 點擊定時動作旁邊的加號，選擇隱藏/顯示

7. 點擊眼睛圖標，將顯示設定為無

添加第二個觸發元素，並將兩者設置為在點擊時顯示/隱藏

1. 點擊並複製原來的觸發元素（"顯示歌詞"）

2. 重新命名它（例如"隱藏歌詞"）

3. 創建一個動作並將其初始狀態顯示為無

4. 添加第二個動作，並使顯示設置為原始值

5. 點擊"顯示歌詞"並確保其顯示設置為無，以便在點擊時隱藏它

6. 點擊"隱藏歌詞"並添加一個動畫，將顯示設置設為無

7. 回到"顯示歌詞"，添加一個動畫，使其在第二次點擊時再次可見

8. 點擊並拖動，使定時動作中的所有內容在同一時間發生（0秒）

1. 將Lottie動畫添加到項目中

2. 設置觸發器

3. 配置動畫的消失

將Lottie動畫添加到項目中

從左邊的工具欄上點擊資產面板上的照片圖標，將動畫拖到頁面的頂部。

在Lottie動畫設置彈出窗口中勾選Loop(循環播放)。

關閉設置，在右邊的風格面板上，從位置旁邊的下拉菜單中選擇固定。這將控制動畫在屏幕上的位置。

設定100%的寬度和高度。

在Position（位置）下，將z-index（堆疊順序）設定成高數字（例如9999），確保動畫總是在最上層。

如果動畫背景為透明的，可以添加背景顏色。

設置觸發器

在互動面板上，點擊頁面觸發器旁邊的加號，從下拉選單中選擇Page load(頁面加載)。

當頁面完成加載時，從動作選單中選擇啟動動畫。

點擊定時動畫旁邊的加號，並為動畫命名（頁面加載）。

配置動畫的消失

在交互面板上點擊定時動作旁邊的加號，從下拉菜單中選擇隱藏/顯示。

在隱藏/顯示下，將顯示設置為無。

在定時動作下，點擊時間線中的0.00秒，從下拉菜單中選擇不透明度。

將不透明度滾動到0，持續時間滾動到1.5秒來淡化動畫。

在時間動作下，點擊時間線中1.5秒的Lottie動畫，在隱藏/顯示下，將其顯示設置為無。

在預覽模式下檢查--調整數值與動畫，使其正好適合頁面。

1. 設計進度條

2. 設置滾動觸發器

3. 設置滾動動畫

4. 覆蓋變換原點

設計進度條

1. 創建一個Div塊

2. 命名

3. 設置背景顏色

4. 把它放在想要的位置

5. 設定100%的寬度

6. 設定高度（例如，10像素）

7. 把它的位置固定在窗口的左上方

8. 設定足夠高的Z-index值，讓它總是在上層

設置滾動觸發器

在交互面板的頁面觸發器選單中，選擇"While page is scrolling(當頁面滾動的時候)"

設置滾動動畫

1. 從交互面板的"On scroll"選單中，選擇"Play scroll animation(播放滾動動畫)"

2. 在滾動動畫旁邊點擊加號

3. 給它命名（例如"滾動進度"）

4. 確保元素被選中，然後點擊0%處的加號，從下拉選單中選擇"Scale縮放"

5. 在Scale下，將X軸的位置改為0

6. 點擊100%處的進度條，在Scale下將X軸位置改為1

覆蓋變換原點

1. 在風格面板上，向下滾動到Effects

2. 點擊2D和3D變換旁邊的更多選項圖標

3. 將原點設為左邊

本文會提到：

1. 創建觸發器

2. 創建動畫

3. 將動畫應用於其他元素

創建觸發器

1. 選擇觸發器元素（例如項目連結），並點擊進入互動面板

2. 點擊元素觸發器旁邊的加號

3. 從下拉選單中選擇"Scroll Into View"

創建動畫

1. 從"When Scrolled Into View"下的"Action"菜單中，選擇"Start an Animation"

2. 點擊定時動作旁邊的加號

3. 命名它（例如"Move up on scroll"）

4. 點擊"Timed Actions"旁邊的加號，從下拉選單中選擇移動

5. 在移動下，將Y軸改為50像素

6. 在"Timing"旁邊，切換到 "Set as initial state"

7. 點擊"Timed Actions"旁邊的加號，從下拉選單中選擇不透明度

8. 將不透明度改為0%

9. 在"Timing"旁邊，切換到"Set as initial state"

10. 點擊"Timed Actions"旁邊的加號，從下拉選單中選擇"Move"

11. 在移動下，將y軸改為0像素

12. 調整緩和與持續時間

13. 點擊時間線中0秒處的加號，從下拉選單中選擇不透明度

14. 將不透明度改為100%

15. 調整緩和與持續時間

16. 在"影響"旁邊選擇"Class"

17. 點擊所有具有該類的元素，並選擇只有具有該類的子元素

將動畫應用於其他元素

1. 關閉動畫，點擊進入互動面板

2. 在觸發器設置下，確保此動畫應用於所有具有此類別的元素（例如"Class: Project Lin"）

在本課裡您會學到：

1. 了解2D基礎知識

2. 沿著X軸和Y軸的移動

3. 介紹Z軸

4. 視差概述

5. 三維空間中的二維物體

了解二維基礎知識

在我們進入三維空間之前，我們首先要了解前兩個維度是如何工作的。我們具體談論的是沿X軸的水平運動和沿Y軸的垂直運動。

網絡上的大部分內容都是由二維元素組成的。這包括您在網站上看到的任何東西，如圖片、標題、段落和按鈕。這些元素的寬度和高度以及它們與其他元素之間的距離都是在兩個維度上發生的，沒有實際的深度。

沿著X軸和Y軸的移動

當元素在水平方向移動時，我們要調整它的X位置。而當我們垂直移動時，我們要調整它的Y位置。當我們在對角線上移動時，我們要使用X和Y的組合。

介紹Z軸

現在讓我們來談談我們的第三個維度，Z軸。當我們在處理三維空間時，我們不僅僅是在左右和上下移動，我們還要處理深度問題。

因為網路是由很多這樣的2D元素組成的，並非所有的3D都必須是一個擠出物，或者一個3D物體。我們可以把單個的2D元素，沿著Z軸，在3D空間內與它們進行互動。我們可以移動它們，旋轉它們--我們可以對它們做任何我們想做的事情。

視差概述

三維運動最好的東西之一是視差的概念。在下面的例子中，我們把卡片放在桌子上來說明視差。這些卡片都沒有移動；我們只是將攝像機向左右移動。我們只是在沿X軸移動攝像機或我們的視野。

注意

離我們最近的名片似乎移動得更快。而遠處的卡片似乎移動得更慢。這種位移，或者說離我們較近和較遠的那些物體的速度之間的差異，就是視差。

三維空間中的二維物體

這些卡片都沒有任何深度，所以從側面看它們會消失--3D運動並不總是需要3D物體。

視差運動的概念可以給我們的項目帶來一點深度，以略微不同的速度移動不同的元素，可以真正為3D外觀設定一個舞臺。

多年來，網絡和我們的數字設備已經變得反應靈敏，功能強大。作為設計者和開發者，我們可以使用一些工具，讓我們建立複雜的互動和令人印象深刻的動畫。

傳統上，這些工具通常是用高度特定的JavaScript構建的，需要工具和插件來完成沖突和基於代碼的令人討厭的學習曲線。

在Webflow，我們可以使用所有我們需要的工具，通過可視化的方式建立互動，從而以極其精細的控制來操作這些內容。

什麽構成了互動？

互動圍繞著兩個強大的東西進行設計：觸發器和動畫。

觸發器--無論是點擊、滾動、懸停、移動鼠標、加載頁面--都會執行動畫（觸發器上發生的事情）。

而透過這種精確的控制，我們可以應用定時動畫、滾動動畫和基於位置的鼠標動畫。

透過Webflow的After Effects和Lottie集成，您可以在設計中使用After Effects（AE）動畫，甚至可以用Lottie元素設置和Webflow的交互和動畫工具控制其播放。

1. 獲取JSON動畫文件

2. 將動畫添加到網站上

3. 用互動方式控制動畫

獲取Lottie JSON動畫文件

您可以將AE動畫以Lottie JSON文件的形式上傳至您的網站。 您可以透過以下方式獲得這些文件：

1. 用免費的AE bodymovin插件將AE動畫導出為JSON文件

2. 從Lottiefiles（或其他在線動畫庫）下載免費的JSON動畫文件

將動畫添加到網站

您可以使用JSON或Lottie動畫作為圖標、縮略圖、頁面背景、頁面加載器、自定義動畫光標等。

就像其他圖片文件一樣，您可以把您的JSON動畫文件上傳到資產面板上，然後直接把它們放到網頁上。

另外，您可以使用一個Lottie動畫元素（位於添加元素面板>媒體）作為動畫的占位符，直到上傳您的JSON文件。然後您可以選擇用資產面板中的Lottie序列來替換這個占位符。

指定動畫的播放方式

Lottie元素的設置允許您控制動畫在頁面上的播放方式。您可以覆蓋默認的持續時間，將動畫設置為無限期循環，或者將動畫設置為反向播放

下面是您可以為每個Lottie動畫元素設置的所有參數的列表：

• 替換Lottie序列（按鈕）--用資產面板中的另一個動畫或上傳一個新的動畫來替換該動畫

• 預覽動畫（按鈕）--在畫布上播放和預覽動畫

• 使用內置時長（複選框）--默認勾選，使用動畫的默認時長，取消勾選以覆蓋持續時間

• 使用內置時長（輸入字段 - 當複選框未被選中時出現）--默認情況下，它顯示動畫的內置時長。使用一個較小的值來使它變快，或使用一個較高的值來使它變慢

• 循環（複選框）--讓動畫無限期地播放

• 反向播放（複選框）--讓動畫反向播放

• 渲染模式（預設切換）--切換動畫的渲染模式。默認是SVG。SVG很適合向量動畫。Canvas適合於圖像序列中最常見的光柵化層。如果動畫在選定的模式下不能正確播放，請切換渲染器。

用互動控制動畫

借助Webflow交互和Lottie集成的力量，您可以對這些動畫的播放方式和時間有更多的控制。透過這些選項，您可以在用戶互動時播放和暫停動畫。

您可以設置觸發器來啟動動畫，選擇動畫的哪一部分來播放，以及在哪裡停止動畫播放。 有兩種方法可以用互動來控制Lottie動畫：

1. Lottie播放動畫

2. Lottie動作

這兩個選項只對Lottie動畫元素有效，所以需要在畫布上選擇Lottie動畫。

範例1. 點擊時播放動畫 默認情況下，所有的動畫都在頁面加載時播放。所以，當您滾動到這些動畫時，您不會看到它們的播放，除非將它們設定為循環播放。透過互動，您可以控制播放。

假設您想在用戶點擊的時候播放一個動畫：

1. 選擇畫布上的Lottie動畫元素

2. 在互動面板中添加一個鼠標點擊（tap）元素觸發器

3. 在操作選單中的On 1st click下選擇Lottie playback。您可以選擇延遲播放、反向播放或設置為循環播放

如果需要改變動畫的持續時間/速度，您可以通過元素設置面板中的Lottie元素設定來實現。Lottie動畫設置中的所有其他設置將被互動面板中的Lottie播放設置所覆蓋。

範例2. 當滾動進入和離開視圖時播放動畫 您也可以將我們在上例中使用的快速動作用於鼠標懸停和滾動進入視窗的互動。

在這個例子中，讓我們把動畫設置為進入視窗時播放：

1. 選擇Lottie動畫元素

2. 在互動面板中添加一個滾動進入視圖元素的觸發器

3. 在滾動進入視圖時創建一個動畫

4. 在操作選單中選擇Lottie播放，在第一次點擊時播放

5. 如果動畫播放過快，可以選擇設置一個偏移量

6. 在動作選單中選擇"On 2nd click"下的Lottie回放

7. 反向播放

8. 可以選擇設定一個偏移量

範例3. 在頁面加載時只播放動畫的一部分 對於某些互動類型，您可能需要創建一個自定義的動畫，並使用Lottie動作，它讓動畫的播放方式有更多的控制。 這個選項允許您為動畫設定自定義的開始和結束幀。而且像其他定時動作一樣，您可以應用緩和效果並設置一個自定義的持續時間。此外，您還可以添加其他動作來創建更複雜的動畫。

如果想調整開始或結束的幀：

1. 選擇Lottie動畫元素

2. 在互動面板中添加壹個頁面加載元素的觸發器

3. 在頁面開始加載時創建一個動畫

4. 添加一個Lottie動作

5. 可以選擇，如果想讓動畫從不同的幀開始，在Lottie設置下調整開始幀並將其設置為初始狀態

6. 添加另一個Lottie動作

7. 如果想讓動畫在不同的幀上停止，將結束幀設置為100%或更小

8. 調整持續時間以控制動畫播放的速度

提示 如果您想使用動畫的默認持續時間，在畫布上雙擊動畫，取消勾選持續時間複選框，使用出現的內置持續時間。

本文會提到：

1. 建立一個懸停的動畫

2. 建立一個懸停的動畫

3. 將動畫應用於其他元素

建立一個懸停動畫

1. 選擇連結塊(使其成為觸發器)

2. 在互動面板上，點擊元素觸發器旁邊的加號，從下拉選單中選擇鼠標懸停

3. 在懸停時，從動作選單中選擇啟動一個動畫

4. 點擊時間動畫旁邊的加號

5. 命名它（例如"Fly in"）

6. 選擇想做動畫的元素

7. 點擊定時動作旁邊的加號，從下拉選單中選擇移動

8. 在"Move"給X軸一個數值（例如，-100）

9. 在"Timing"旁邊，將開關切換到設置為初始狀態

10. 對於您想做動畫的其他元素，重複步驟6到9

11. 互動面板，（點擊shift）並選擇時間軸上的元素

12. 右鍵單擊以複製

13. 在"Move"把X軸改回原點（0像素）

14. 在"Timing"改變Easing（例如Ease Out）

15. 縮短持續時間（例如縮短到0.2秒）

建立一個懸停的動畫

1. 點擊離開您剛剛建立的動畫

2. 在互動面板中，在懸停時，從動作選單中選擇開始一個動畫

3. 在定時動畫下，點擊飛入旁邊的齒輪圖標並選擇複製

4. 啟動飛入2

5. 重新命名它

6. 從時間軸上刪除重複的動畫

7. 選擇時間線中的其餘動畫

8. 在"Timing"旁邊關掉"Set as initial state"

9. 調整緩和與持續時間

將動畫應用於其他元素

1. 選擇時間線中的任何一個定時動作

2. 在"Affect"旁邊選擇"Class"

3. 點擊所有具有這個類別的元素，並選擇只有具有這個類別的子元素

4. 重複1-3的懸停出入動作