圖片效果元件

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

您可以使用圖片效果元件，為單張或兩張一組的圖片套用下列多種 JavaScript 視覺效果：前後對照、呼吸、揭露以及波浪。

Image Effect component - Google Web Designer

如何使用圖片效果元件：

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

2. 在「圖片效果」 元件上按兩下，或將元件拖曳至中心區域。

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

4. 將圖片拖曳至對話方塊中心區域，或是按一下 [選擇圖片] 來選取圖片。

5. 在「屬性」面板中的下拉式選單中，選擇所需的圖片效果類型。

6. 部分類型的效果需要使用兩張圖片。您可以從「資源庫」中選取另一張圖片，也可以瀏覽您的檔案系統來匯入圖片檔。

7. 透過調整屬性來自訂效果 (請參閱下文說明)。

屬性

除了整個元件的屬性，您還可以為元件中所含的效果分別設定屬性。

圖片效果元件屬性

屬性	說明
名稱	設定圖片效果元件的名稱。
縮放	指定元件中各種不同尺寸圖片的顯示方式。瞭解詳情 調整圖片大小以配合畫格 裁剪圖片以填滿畫格 無 延展圖片以填滿畫格
設定動畫時間限制	勾選這個屬性即可在指定時間長度 (以秒為單位) 後停止自動播放動畫。

個別效果類型的屬性

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

無

沒有為圖片套用任何效果。

前後對照

「前後對照」效果會以抹除轉場效果來回切換兩張圖片，並不斷重複。

  

屬性	說明
圖片
主要圖片	顯示在分隔線上方或左側的圖片。您可以使用「替換圖片」按鈕 來切換主要圖片和次要顯示圖片。
次要顯示圖片	顯示在分隔線下方或右側的圖片。您可以使用「替換圖片」按鈕 來切換次要顯示圖片和主要圖片。
分隔線
角度	兩張圖片間的分隔線角度，介於 0 到 180 度之間。預設值為 90 (垂直線)。
柔邊	圖片與分隔線邊緣的柔和度。如將數值設為 1，轉換時的邊緣會最銳利，而數值越大則邊緣越柔和。
互動	如果勾選 [追蹤滑鼠] 方塊，分隔線會跟隨滑鼠游標移動。
動畫
自動播放	如果勾選 [自動播放] 方塊，動畫會在元件載入後開始播放。
初始狀態
位置	動畫開始播放時的分隔線起始位置。
延遲	動畫開始自動播放前的延遲時間長度 (以秒為單位)。

呼吸

「呼吸」效果會以具彈性的方式擴張及收縮圖片。

   

屬性	說明
圖片
主要圖片	要套用效果的圖片。
呼吸
速度	動畫播放的速度。數值為 0 時不會播放動畫，而數值越大則動畫播放速度越快。
橫向效果
擴張	圖片橫向擴張的幅度。
收縮	圖片橫向收縮的幅度。
縱向效果
擴張	圖片縱向擴張的幅度。
收縮	圖片縱向收縮的幅度。
暫停時間
擴張	圖片保持完全擴張的時間 (以秒為單位)。
收縮	圖片保持完全收縮的時間 (以秒為單位)。
曲線
橫向	針對橫向變形建立的曲線數量。
縱向	針對縱向變形建立的曲線數量。

揭露

「揭露」效果會在圖片上的橢圓焦點區域內，顯示第二張圖片的相對應區塊。

  

屬性	說明
圖片
主要圖片	顯示在焦點區域外的圖片。您可以使用「替換圖片」按鈕 來切換主要圖片和次要顯示圖片。
次要顯示圖片	焦點區域所顯示的圖片。您可以使用「替換圖片」按鈕 來切換次要顯示圖片和主要圖片。
焦點
半徑	焦點區域的 X 軸和 Y 軸半徑。只要使用「鎖定半徑比例」按鈕 ，即可在變更其中一個半徑值時，維持原本的顯示比例。
柔邊	焦點區域邊緣的柔和度。數值設為 0 時，焦點區域的邊緣會最銳利，而數值越大則邊緣越柔和。
效果	如果勾選 [保持揭露] 方塊，當焦點區域移動至別處時，已揭露的圖片區域仍會繼續顯示。
動畫
自動播放	焦點區域的移動模式。 漫步 (預設) - 焦點區域會隨機在圖片上移動，並在碰觸到圖片邊緣時變換方向。 納入式漫步 - 焦點區域會隨機在圖片上移動，在碰觸到圖片邊緣時會從相反的另一側出現。 圓形 - 焦點區域會沿著圓形軌跡移動。 無
速度	焦點區域的移動速度。數值為 0 時不會播放動畫，而數值越大則動畫播放速度越快。
互動	如果勾選 [追蹤滑鼠] 方塊，焦點區域會跟隨滑鼠游標移動。

波浪

為圖片的片段設定波浪動畫。

   

屬性	說明
圖片
主要圖片	要套用效果的圖片。
波浪
類型	效果使用的波形。 標準 - 動畫會使圖片產生波紋。 扭曲收放 - 動畫會以對稱波型收縮及擴張圖片。
方向	波浪動畫的方向。 橫向 縱向
速度	波浪動畫播放的速度。數值為 0 時不會播放動畫，而數值越大則動畫播放速度越快。
規模	波浪的強度。數值為 0 時不會產生效果，而數值越大則波浪強度越強。
長度	波峰之間的距離。長度越短，效果中就會有越多波浪。
反向	如果勾選 [反向] 方塊，波浪會由左至右移動 (橫向) 或由下往上移動 (縱向)。
消除軌跡	如果勾選 [消除軌跡] 方塊，系統會針對動畫的各個畫格重新繪製圖片，避免留下軌跡效果。
進階
波浪區域	圖片中受到波浪效果影響的部分。
最大強度	圖片中波浪規模最強的部分。效果強度會在波浪區域內的其他部分逐漸減弱。

事件和動作

圖片效果元件傳送的事件

您可以透過下列圖片效果元件事件觸發其他動作：

事件	說明
自動播放已結束	在自動播放的動畫達到時間限制後傳送。

圖片效果元件和個別效果執行的動作

以下圖片效果元件動作可透過其他事件觸發：

• 播放
• 暫停

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

瞭解如何設定事件。

預覽

當您在「圖片效果」對話方塊中處理相關作業時，可以在中心區域查看元件套用動畫後的顯示方式。如果您變更任何屬性，動畫就會重新開始播放。

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