粒子效果元件

這個元件不適用於 AMP HTML 廣告影片廣告圖像廣告

粒子效果元件可讓您新增粒子系統式動畫效果。系統會在起始參數範圍 (例如特定區域或某個大小範圍) 內產生粒子,並按照指定速率移動及變更粒子。您可以透過此元件啟用某種程度上相當隨機的視覺效果,例如雪、雨、火焰、水蒸氣和煙霧。

下雪效果範例

如何使用粒子效果元件:

  1. 依序開啟「元件」面板和「圖像與效果」資料夾。

  2. 在 [粒子效果] 元件上按兩下,或將該元件拖曳至中心區域。

  3. 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,即可開啟「粒子效果」對話方塊。

  4. 將您要添加為圖層的圖片從「資源庫」面板拖曳至「圖層」面板。如要新增其他圖片,請按一下該面板底部的「新增圖片」按鈕

  5. 在底部的「預設」面板中選取所需效果,然後將該效果拖曳至中心區域,或點選效果上顯示的「新增」按鈕 。系統會在中心區域顯示效果快照,並以外框標出粒子起點區域 (系統產生粒子的位置)。您可以將多個效果分別新增為不同圖層。

  6. 透過調整屬性來自訂效果。您可以將新的一組屬性儲存為自訂預設設定

調整圖層順序

圖層順序代表各圖層重疊時的前後關係。如要變更圖層的堆疊順序,請按照下列步驟操作:

  1. 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
  2. 在「圖層」面板中,將圖層拖曳至新位置。

調整圖層位置

您可以移動圖片或某個效果的粒子起點區域,前提是該項目不得超出元件邊界。如要移動圖層,請按照下列步驟操作:

  1. 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
  2. 選取要移動的圖層,這時系統會在圖片或效果的粒子起點區域周圍顯示外框。您也可選取多個圖層,以便同時移動這些項目。
  3. 選擇下列其中一種做法:
    • 在中心區域上:
      • 將圖層拖曳到新位置。
      • 使用方向鍵來移動圖層 (一次移動 1 像素的距離)。如果按住 Shift 鍵並同時按下方向鍵,可將圖層往所選方向移動 10 像素的距離。
    • 在「屬性」面板中:
      • 如要調整圖片,請編輯上方和左側的位置屬性。
      • 如要調整效果,請展開「進階」屬性,然後編輯「X 軸放射距離」和「Y 軸放射距離」的值。只要開啟「保持連鎖狀態」選項 ,即可在不調整大小的情況下移動粒子起點區域。

調整圖層大小

您可以針對圖片或某個效果的粒子起點區域調整大小,前提是該項目的寬度或高度不得超過元件。對於效果,您可以調整粒子起點區域的大小。如要調整圖層大小,請按照下列步驟操作:

  1. 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
  2. 選取要調整大小的圖層,這時系統會在圖片或效果的粒子起點區域周圍顯示外框。您也可以選取多個圖層。
  3. 選擇下列其中一種做法:
    • 在中心區域上:拖曳外框側邊或角落的控點。
    • 在「屬性」面板中:
      • 如要調整圖片,請編輯寬度和高度屬性。
      • 如要調整效果,請展開「進階」屬性,然後編輯「X 軸放射距離」和「Y 軸放射距離」的值。同時,請確認「保持連鎖狀態」選項 已停用。

移除圖層

如要從元件中刪除圖層,請按照下列步驟操作:

  1. 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
  2. 在「圖層」面板中,選取您要刪除的一或多個圖層。
  3. 按下 Delete 鍵,或點選面板底部的「刪除圖層」按鈕

隱藏及顯示圖層

您可以隱藏某個圖層,以便更輕鬆地處理其他圖層。隱藏的圖層不會顯示在預覽畫面或發布檔案中。如要隱藏或顯示圖層,請按照下列步驟操作:

  1. 在中心區域內的元件上按兩下,或點選「屬性」面板中的「設定...」按鈕 ,開啟「粒子效果」對話方塊。
  2. 找出您要隱藏或顯示的圖層,然後在「隱藏所有圖層」圖示 下方勾選與該圖層對應的方塊。

屬性

在元件的所有屬性中,您可以設定元件所含各個效果的屬性。

粒子效果元件屬性

屬性

說明

名稱 設定粒子效果元件的名稱。
自動播放

勾選這個屬性即可在元件載入時自動播放動畫。

注意:每個效果也分別都有自動播放屬性。

設定動畫時間限制 勾選這個屬性即可在指定時間長度 (以秒為單位) 後停止播放動畫。

個別效果的屬性

您可以在「粒子效果」對話方塊中查看個別效果專用的屬性。只要在中心區域內的粒子效果元件上按兩下,或點選「屬性」面板中的 [設定...] ,即可開啟「粒子效果」對話方塊,然後您可以選取效果,查看專用屬性。

預設設定

每個預設項目都有一組預設的屬性,您可以在「預設」下拉式選單上按一下滑鼠右鍵並選取 [預設],藉此還原各項屬性。當您選取其他預設設定時,系統會將下列屬性重設為新預設設定的預設值。

雖然 Google Web Designer 原本就已內建數個預設設定,但您也可以儲存自己的預設設定,然後匯出並匯入這些設定,以供其他電腦使用 (請參閱自訂預設設定一節)。

屬性

說明

ID 效果 ID (可供您在事件中參照特定效果)。
數量 在這個效果動畫未停止或循環播放的情況下,系統產生的粒子總數。
大小 初始粒子大小的範圍,最大值和最小值皆以像素為單位。
形態 粒子形狀。
色彩 起始色彩和結束色彩。
不透明度 起始不透明度等級的最大值和最小值,0 表示透明,1 則表示不透明 (請使用小數值表示半透明)。
速度 起始速度的最大值和最小值。
方向

粒子移動方向的最大和最小角度。

您也可以使用圓形粒子的控制項來設定角度範圍。

進階
X 軸放射距離

粒子產生位置的最大和最小 X 座標,以像素或百分比為單位。

設定「保持連鎖狀態」選項 後,即可自動將所有變更套用到這兩個欄位,藉此維持粒子起點區域的寬度。

Y 軸放射距離

粒子產生位置的最大和最小 Y 座標,以像素或百分比為單位。

設定「保持連鎖狀態」選項 後,即可自動將所有變更套用到這兩個欄位,藉此維持粒子起點區域的高度。

大小變化速率 粒子大小的變化速率,以像素為單位 (小數值有效)。如果這個屬性的值是負數,粒子就會變小。
隨機顏色 勾選這個屬性後,初始粒子顏色就會在起始色彩和結束色彩之間隨機變化。
顏色變化速率 顏色從起始色彩變成結束色彩的速率。勾選 [隨機顏色] 時,也會一併停用這個屬性。
不透明度變化速率 不透明度的變化速率。如果這個屬性的值是負數,粒子就會變成透明。
自動播放 勾選這個屬性後,即可在元件開始播放時自動播放此效果動畫。即使不勾選這個屬性,您也可以透過事件觸發動畫。
循環 勾選這個屬性可持續播放此效果動畫。如果您不勾選此屬性,系統會在產生指定的粒子總數後停止播放動畫。
放射間隔 系統每隔多久會產生一個新粒子。
快轉 在系統產生的粒子數量達到指定百分比時,開始播放動畫。
加速 粒子移動時的水平加速度和垂直加速度。
擾亂
頻率 影響粒子移動情形的擾亂頻率。這個屬性的值越大,每個粒子的路徑就越常出現不規則變化。
強度 擾亂強度。如果不想擾亂粒子移動情形,請將這個屬性的值設為 0
強度變化速率 擾亂強度的變化速率。
軌跡 粒子沿著移動路徑留下的軌跡長度。如果不想讓粒子留下任何軌跡,請將這個屬性的值設為 1

擾亂效果可能會降低廣告播放速度或網頁效能,當您設定了較長的軌跡時更是如此。

自訂預設設定

只要將一組屬性儲存為自訂預設設定,即可重複使用這組屬性。

儲存新的自訂預設設定

  1. 調整現有預設設定的屬性。
  2. 在底部的「預設設定」面板中,按一下「儲存為預設」 "Save as preset" icon 按鈕。您可以在中心區域的效果上,或是在「屬性」面板中的 [預設設定] 下拉式選單上按一下滑鼠右鍵。
  3. 為新的預設設定輸入專屬名稱,然後按下 Enter 鍵或點選 [確定]

完成上述步驟後,該預設設定就會出現在「屬性」面板的下拉式選單以及「預設」面板中 (顯示預設設定圖示 "Custom preset" icon)。

重新命名自訂預設設定

  1. 在「預設」面板中找出要重新命名的預設設定,然後在上方按一下滑鼠右鍵,並選取 [重新命名...]
  2. 輸入新名稱,然後按下 Enter 鍵或點選 [確定]

刪除自訂預設設定

  1. 在「預設」面板中找出要刪除的預設設定,然後在上方按一下滑鼠右鍵,並選取 [刪除]
  2. 按一下 [確定] 確認您要刪除。

匯出自訂預設設定

只要匯出自訂預設設定,即可將該預設設定分享給其他 Google Web Designer 使用者。

  1. 在「預設」面板中找出要匯出的預設設定,然後在上方按一下滑鼠右鍵,並選取 [匯出...]
  2. 選取匯出檔案的目標資料夾。

匯出的 .zip 檔案名稱會與預設設定的名稱相同。

匯入自訂預設設定

如果您有自訂預設設定的匯出檔案,可以將該檔案匯入您的 Google Web Designer 執行個體。

  1. 將匯出的.zip 檔案複製到您要匯入預設設定的電腦。
  2. 使用該電腦在 Google Web Designer 中開啟「粒子效果」對話方塊。
  3. 在底部的「預設設定」面板中按一下「匯入預設」"Import" icon 按鈕。
  4. 根據已匯出的自訂預設設定,選取相應的 .zip 檔案。

匯入的預設設定會隨即顯示在「屬性」面板的下拉式清單和「預設」面板中。

事件和動作

粒子效果元件傳送的事件

您可以透過下列粒子效果元件事件觸發其他動作:

事件 說明
已達時間限制 在動畫播放至指定時間上限時傳送。
粒子效果元件和個別效果執行的動作

以下粒子效果元件動作可透過其他事件觸發:

  • 播放
  • 暫停
  • 停止

在「事件」對話方塊中選取以上任一動作時,請將粒子效果元件或特定效果設為「接收端」

瞭解如何設定事件

預覽

當您在「粒子效果」對話方塊中處理相關作業時,「設計」分頁上會顯示元件外觀的靜態快照。

只要切換到「預覽」分頁,即可觀看已套用目前設定的動畫。在播放預覽的過程中,您可以修改各項屬性,立即確認變更生效後的情況。

此外,您也可以先點選對話方塊底部的 [儲存],再按一下 [預覽] 按鈕,透過您慣用的瀏覽器預覽文件

這對您有幫助嗎?

我們應如何改進呢?
true
搜尋
清除搜尋內容
關閉搜尋
主選單
379489892669118604
true
搜尋說明中心
true
true
true
true
true
5050422
false
false