視頻｜圖文抽籤-高級 SVG 排版的位移動畫思路

對交互式 SVG 代碼圖文來說，直線位移是一項非常基本的動畫需求。今天的兩集視頻課將分別對 x/y 參數位移和 translate 參數位移做解讀。而這種位移思路，也是抽籤式圖文的動畫邏輯基礎。以下是一個 JZ 的客戶定製案例，請注意觀察的交互方式和動畫形態（如需定製高級交互圖文請致電）：

首先是相對簡單的 x/y 參數位移，它也能幫助你訓練 SVG 最基礎的 AttributeName 動畫書寫習慣。而在觀看前，建議你在已經掌握《教程｜高級 SVG 交互式排版入門指南》和《視頻｜高級 SVG 交互式排版語法書寫規則》兩課的基礎上學習▼

而對於由複雜路徑構成的圖像而言， 並不存在 x/y 參數。若希望移動它們，則需要藉助參數實現。這個參數極為重要，絕大多數高級 SVG 交互圖文排版或多或少都牽涉到它▼

的應用場景不僅在於“移動畫面中的一個複雜圖像”。以本期商業案例施耐德電氣新年籤為例，它的本質是多張籤橫向排列後整體快速位移。

再結合

JZ 近期正在各高校舉辦第五輪“新媒體運營與HTML5”設計高校公益巡講，並將在最後一個場次抽出一條新媒體錦鯉▼

閱讀更多 JZ多媒體解決方案 的文章

關鍵字: HTML5 產品運營 位移