關於動態路徑

動態路徑可用來製作物件沿著曲線和複雜形狀移動的動畫。與使用畫筆工具繪製線條類似，定義動態路徑時，您可以設定各個錨點，然後連成直線或曲線。

動態路徑動畫是由 CSS 執行估算，因此動畫元素可能不會與其動態路徑完全相符。通常這類誤差並不明顯 (預設不到 1 像素)，您可以在動態路徑屬性中限制偏離程度。

關於動態路徑

本頁內容：

• 檢視動態路徑
  • 錨點
  • 控點
• 編輯動態路徑
  • 編輯動態路徑形狀
  • 轉換動態路徑
  • 編輯動畫速度
• 最佳化
• 動態路徑屬性
• 限制

檢視動態路徑

選取單一元素或群組，即可瀏覽動畫播放過程中所選項目沿錨點移動的線條。

一次只能檢視一個動態路徑。

錨點

設定錨點的兩種方法如下：

• 指出元素在 x 軸或 y 軸上新座標的縮圖或主要畫面格會自動產生錨點。起始和結束錨點一律位於主要畫面格。
• 使用「動態路徑」工具，沿動態路徑新增錨點。

控點

選取「動態路徑」工具 後，畫面上就會出現控點。錨點間的每個線段都有兩個控點，每個錨點各有一個控點。控點的長度和方向會決定動態路徑的彎曲度。如果是直線，控點會與線段齊平或完全收合。

編輯動態路徑

編輯動態路徑形狀

動態路徑可以是簡單的曲線、閉合的形狀 (例如多邊形和圓形)，或是其他物件的精細外形。如要修改動態路徑的形狀，您可以：

新增錨點

• 新增會變更元素位置的縮圖或主要畫面格，即可新增錨點 (加/減速可另行變更)。
• 使用「動態路徑」工具 的 [新增錨點] 選項 ，直接在動態路徑上點選要新增錨點的位置，即可修正動態路徑。透過這種方式新增錨點並不會產生新的縮圖或主要畫面格。

調整彎曲度

• 選取「選取範圍」工具或「動態路徑」工具 的預設選項 ，接著拖曳動態路徑上的任一點 (包括錨點) 即可調整路徑形狀。
• 選取「動態路徑」工具 ，接著拖曳控點即可調整長度和角度，改變動態路徑的彎曲度。如有其他控點歸屬於同一錨點，另一控點會自動配合調整角度 (除非您按住 Alt 鍵)。
• 按兩下錨點可收合附屬的控點，再按兩下即可展開控點。

  如要拉直動態路徑，請分別在兩個錨點上按兩下。

刪除錨點

• 使用「動態路徑」工具 的 [刪除錨點] 選項 ，以點選方式移除現有的錨點。如果刪除的錨點所對應的縮圖或主要畫面格沒有任何動畫屬性 (動態路徑除外)，該縮圖或主要畫面格會一併遭到刪除。
• 刪除縮圖或主要畫面格時，如果動態路徑線段結束於該縮圖或主要畫面格，也會遭到刪除。

轉換動態路徑

如果想移動、翻轉或旋轉動態路徑，或是調整動態路徑的大小，您可以選取「動態路徑」工具 ，然後勾選工具選項列中的 [變形控制項] 方塊。啟用這個選項後，只要選取具備動態路徑的元素，即可看到變形控制項。

移動動態路徑

將動態路徑拖曳至中心區域上的新位置。

調整動態路徑的大小

• 大小調整方塊會以藍色框線形式在動態路徑周圍顯示，方塊的每一邊和每一角都有控點。拖曳控點即可變更動態路徑的大小。
• 在拖曳同時按住 Shift 鍵，可維持原始長寬比例。
• 在拖曳同時按住 Alt 鍵，可固定動態路徑的中心點。
• 如要往不同方向調整動態路徑的大小，請在工具選項列的 欄位中輸入旋轉角度，藉此旋轉大小調整方塊。如果同時按住 Alt 鍵 (Windows) 或 Option 鍵 (Mac)，則每按一下向左或向右鍵都會使大小調整方塊旋轉 5 度。每次旋轉後，角度欄位的值都會重設為 0 度，因此您必須以目前方向為基準輸入需要的旋轉角度。旋轉大小調整方塊不會變更動態路徑本身的方向。
• 如要重設大小調整方塊的方向，請在內部旋轉控制項 (較小的圈) 上按兩下，這項操作也會重設旋轉支點的位置。

翻轉動態路徑

• 拖曳大小調整控點，直到越過另一端的大小調整控點。

旋轉動態路徑

• 依順時針或逆時針方向拖曳外側旋轉控制項 (較大的圈)，即可旋轉動態路徑。
• 在拖曳同時按住 Shift 鍵，可將旋轉角度限制為 45 度的倍數。
• 如要移動旋轉支點，請將內部選轉控制項 (較小的圈) 拖曳至其他位置。如要重設支點位置，請在內部旋轉控制項上按兩下 (這項操作也會重設大小調整方塊的方向)。

動態路徑編輯功能

編輯動畫速度

如果想控制物件沿著動態路徑移動的速度，您可以變更縮圖或主要畫面格的時間設定，以及這些項目之間的加/減速。您也可以讓動態路徑動畫循環播放。

使用動態路徑工具新增的錨點不會影響動畫速度。請改為新增縮圖或主要畫面格。

最佳化

每當您建立或編輯動態路徑時，Google Web Designer 都會自動針對動畫進行最佳化處理，降低轉譯動畫時的 CSS 用量 (用於估算您在動態路徑屬性中指定的容錯值)。容錯值越低，動畫與動態路徑的符合度越高，但最佳化程度會下降。

如要進一步壓縮，請按一下動態路徑屬性中的 [曲線最佳化調整] 。這項程序的執行時間比自動最佳化更長。

Google Web Designer 會在「屬性」面板中顯示所選元素動態路徑的預估大小，反映文件發佈後動態路徑所使用的磁碟空間量。

動態路徑屬性

當您使用「動態路徑」工具新增錨點或將動態路徑編輯為曲線後，「屬性」面板中會立即顯示動態路徑屬性。

屬性	說明
朝向路徑方向	啟用後，元素在動畫過程中會朝動態路徑方向旋轉 (例如：當動態路徑為向下曲線時，元素在移動過程中會向上傾斜)。您可以透過「角度容錯」屬性控制旋轉的精確度。
位置容錯	設定元素可偏離動態路徑的程度。 預設值：0.5 像素 最小值：0.1 像素 最大值：100 像素
角度容錯	控制元素方向可偏離動態路徑方向的程度。這個屬性需要先啟用 [朝向路徑方向] 選項才能設定。 預設值：1° 最小值：1° 最大值：360°
曲線最佳化調整	按一下 按鈕即可縮減用於產生動態路徑動畫的 CSS 程式碼。最佳化調整完成後，系統會停用這個按鈕。如果動態路徑有所變更，則可再次使用。
預估大小	顯示動態路徑的預估大小。如要進一步壓縮，請使用 [曲線最佳化調整] 按鈕。

限制

• 上方/左側定位 - 動態路徑不支援上方/左側定位。請改用 CSS transform 屬性 (這是預設設定)。
• 3D 動畫 - Google Web Designer 不支援 3D 動態路徑。您可以另行為元素套用 3D 平移。
• CSS 面板 - CSS 面板不會影響動態路徑，但樣式仍會套用到元素本身。
• 程式碼檢視 - 在程式碼檢視模式中，您無法檢視或編輯動態路徑。
• 圖像廣告 - 圖像廣告不支援動態路徑工具。