在進階模式中建立動畫

進階模式時間軸

透過進階模式，您可以在時間軸上新增主要畫面格來指出動畫開始和結束的時間點，藉此為個別元素添加動畫效果。當您在特定主要畫面格中編輯元素後，Google Web Designer 就會建立區間動畫。

主要畫面格之間的距離稱為「時距」，代表每個動畫播放的時間長度。舉例來說，如要加快動畫播放的速度，則必須縮短主要畫面格之間的距離。加/減速可加快及減慢轉換的速度。

如何在進階模式中為元素建立動畫：

1. 新增主要畫面格 - 在時間軸上按一下滑鼠右鍵，然後選取 [插入主要畫面格]。
2. 變更元素屬性 - 指定元素在動畫結束時的狀態。舉例來說，您可以變更元素的位置、顏色或透明度，甚至同時變更這三種屬性。

您可以新增更多主要畫面格，藉此將同一個元素在多個時距的動畫串連起來。如果您想讓元素在某段時間 (再次添加動畫效果之前) 保持不變，則可新增一個未變更任何屬性的主要畫面格。

範例

上圖動畫共使用 4 個主要畫面格，動畫效果依次是圖片淡入、短暫停格，接著從右向左滑動。

1. 第一個主要畫面格設定的是元素在動畫開始時的狀態。在這個範例中，為了讓圖片從無到有顯示出來，所以圖片的透明度必須設為 0。
2. 在第二個主要畫面格中，元素的不透明度設定是 1 (100%)。由於前面的時距是 1 秒，所以這會產生 1 秒的圖片淡入動畫。
3. 在第三個主要畫面格中，元素的屬性沒有任何變更。這表示在第二至第三個主要畫面格的半秒期間沒有任何動畫效果，圖片仍維持不變。
4. 在最後一個主要畫面格中，元素的位置有所變化，改成圖片的右半邊顯示在中心區域。具體效果是圖片會用 1 秒的時間向左滑動至指定位置。

如要查看特定主要畫面格所指定的屬性，請在該主要畫面格上按一下滑鼠右鍵，然後從彈出式選單中選取 [動畫屬性]。

如何新增主要畫面格

新增主要畫面格的方法有很多種。首先是在時間軸上選取需要為元素製作動畫的圖層，然後將播放頭移至要放置主要畫面格的位置。您可以在選取圖層時按住 Ctrl/⌘ 鍵，一次選取多個圖層，然後使用下列其中一種做法：

• 在時間軸上按一下滑鼠右鍵，然後從彈出式選單中選取 [插入主要畫面格]。
• 按下 F6 鍵。
• 從 [編輯] 選單中選取 [時間軸] > [新增主要畫面格]。

如果播放頭的位置沒有主要畫面格，一旦變更動畫元素的屬性，Google Web Designer 就會自動在播放頭的位置新增主要畫面格。

時間軸工作區長度

如果您想在時間軸末端之後的位置新增主要畫面格，可以延展時間軸工作區的長度。舉例來說，預設長度是 12 秒，但您可能會想在 15 秒的位置新增主要畫面格。如要變更時間軸工作區的長度，請按照下列步驟進行：

1. 按一下時間軸頂端的時間長度指標。

   

2. 輸入新的時間軸長度值 (以秒為單位)，最小值為 12 秒。
3. 按下 Enter 鍵。

時間軸工作區的長度必須配合動畫，多出的部分不會影響動畫的播放時間。

影片廣告時間軸的長度上限為 5 分鐘。

時間軸縮放比例

只要拖曳時間軸右上方附近的縮放滑桿，即可調整時間軸的縮放比例。如果您的主要畫面格之間的距離較為緊密，可以放大時間軸比例。縮放等級只會影響時間軸的檢視畫面，對於動畫時間沒有任何影響。

如果您想變更由多個主要畫面格所串起的動畫長度，可以一次調整多個時距，讓這些時距按比例延長或縮短。