Ae表達式-14：AE loop循環表達式深度詳解

最新 03-04

嗨，大家好，我是阿璨，今天開始我就給大家帶來的的是AE的 loop循環表達式深度詳解，ae循環表達式用的頻率很高的一個表達式，但很多小夥伴不是很清楚具體的用法與區別，這裡我給大家詳細講解下：

AE 循環表達式深度詳解

首先我們來看一下從AE里截出來的圖：

從圖中可知AE中給出的loop表達式分為以下四種（注意區分大小寫）：

loopIn(type="cycle", numKeyframes=0)

loopOut(type="cycle", numKeyframes=0)

loopInDuration(type="cycle", duration=0)

loopOutDuration(type="cycle", duration=0)

但是這些遠遠不止，因為type又分為cycle、pingpong、offset、continue四種，下面我們來一點一點分解這個表達式：

解釋點1：loop方式

loop方式包括loopIn、loopOut、loopInDuration、loopOutDuration四種

1、loopIn：循環表達式作用的時間段為從圖層入點一直到圖層的最後一個關鍵幀（循環在所有關鍵幀之前），循環從圖層入點開始播放，要循環的段由numKeyframes的值指定。

2、loopOut：循環表達式作用的時間段為從圖層的第一個關鍵幀一直到圖層出點（循環在所有關鍵幀之後），循環從圖層第一個關鍵幀開始播放，要循環的段由numKeyframes的值指定。

3、loopInDuration：循環表達式作用的時間段為從圖層入點一直到圖層的最後一個關鍵幀（循環在所有關鍵幀之前），循環從圖層入點開始播放，要循環的段由duration的值指定。

4、loopOutDuration：循環表達式作用的時間段為從圖層的第一個關鍵幀一直到圖層出點（循環在所有關鍵幀之後），循環從圖層第一個關鍵幀開始播放，要循環的段由duration的值指定。

其實這裡只用分為loopIn和loopOut兩種就行了，分別對應了循環在前和循環在後。

解釋點2：type

type分為cycle、pingpong、offset、continue四種

以下均以loopOut為例子，漸變色指示動畫的進行方式。

1、cycle：重複指定段。cycle是默認也是最基礎的循環，可以理解為重複之前的動作。

2、pingpong：重複指定段，向前和向後交替進行。pingpong也就是乒乓球的意思，打過來打過去，可以理解為循環的往複交替。

3、offeset：重複指定段，但整個過程會產生偏移，相當於後面的循環接在前面循環的結束處重複循環過程而不是恢復到循環的起始狀態（cycle）或結束狀態（pingpong）。例循環方式是向右偏移200px，進行兩次循環後最終結果將偏移400px，在第一個循環基礎上繼續向右偏移了200px。

4、continue：不重複指定段，基於第一個(loopIn)或最後一個關鍵幀(loopOut)的速度和狀態繼續動畫的進行，此類型沒有numKeyframes或duration參數，直接寫作如loopIn("continue")

解釋點3：numKeyframes和duration

numKeyframes和duration分別指示了確定循環段的兩種方式：一種是按關鍵幀循環的numKeyframes，另一種為按時間循環的duration。

1、numKeyframes指要循環的關鍵幀數量，默認值0表示所有關鍵幀都要循環，其他的數字指以第一個關鍵幀（loopIn）或最後一個關鍵幀（loopOut）和numkeyframes+1個關鍵幀為區間進行循環，如loopIn("cycle",3)表示以第一個關鍵幀和第四個關鍵幀之間的區域為循環的部分；loopOut("cycle",3)表示以最後一個關鍵幀和倒數第四個關鍵幀之間的區域為循環的部分。

2、duration與numKeyframes類似，只是從關鍵幀變成了時間，指定的範圍從第一個關鍵幀或最後一個關鍵幀開始計算，0表示循環的區域從圖層入點/出點開始（包含沒有關鍵幀作用的部分），其他數字表示循環動畫的第幾秒/最後幾秒。如loopInDuration(「cycle」,1)表示循環第一個關鍵幀之後的第1秒，loopOutDuration(「cycle」,1)表示循環從最後一個關鍵幀之前的1秒。

此處需要注意的是↓

loopInDuration/loopOutDuration不識別numKeyframes，就算你寫作loopOutDuration("cycle",numKeyframes=2)，雖然AE不報錯，但仍然按照loopOutDuration("cycle",duration=2)執行。

PS：以上循環都只在關鍵幀後或關鍵幀前產生，如果我們想關鍵幀前和關鍵幀後都產生循環的話，可以這麼寫表達式：

例：

if (time

else loopOut("cycle");

最後給大家做了個思維導圖供大家學習消化：