《SVG 動畫開發實戰》 - 〰️ SVG 路徑動畫（Path）

〰️ SVG 路徑動畫（Path）

演示

我更喜歡把這種動畫叫作路徑跟隨動畫或者軌跡動畫，正如你所看到的，一個元素（物體）沿着特定的路徑（軌跡）進行運動。

原理

CSS 屬性

若是想在 CSS 中讓一個元素沿着路徑運動，核心要用的的屬性有兩個，分別是 offset-path 、offset-distance 。

offset-path 這個屬性接受一個 path 用於指定元素的運動軌跡。

offset-distance 這個屬性聲明瞭元素沿着路徑運動的距離。經常使用 100% 表示路徑總長度。

這和上一章節介紹的 SVG 描邊動畫 原理很相似，甚至核心用到的屬性都用了相同的關鍵字 offset

其實 offset-path 這個屬性都前身叫作 motion-path ，而且全部 motion-* 相關都屬性都改成了 offset-*

https://codepen.io/xiaoluobod...

SVG SMIL animation

SVG SMIL animation 中定義了更簡單的方式實現路徑動畫，使用 animateMotion 元素。一樣能夠定義一個 path 指定了元素運動的軌跡。

https://codepen.io/xiaoluobod...

實戰

下面咱們使用 GreenSock 來實現火箭🚀沿着路徑運動的路徑動畫，GreenSock 中使用 MotionPathPlugin 實現路徑動畫，他支持讓任何 Dom、SVG、Canvas 等元素動起來

準備矢量文件

咱們須要準備兩個矢量文件：

• 火箭🚀： 須要運動的元素
• 路徑：火箭的運動軌跡

火箭咱們能夠在 OpenMoji 或者 icons8 查詢獲取：

路徑比較簡單，在 Sketch 中畫一條路徑，拷貝出路徑代碼

<path d="M254.176965,724.703501 C344.518264,740.446962 426.933366,723.447117 501.422273,673.703966 C613.155634,599.08924 556.372552,480.989479 673.298424,465.529966 C790.224296,450.070453 833.25236,631.21486 973.972003,584.009185 C1067.7851,552.538735 1124.45691,434.26844 1143.98743,229.1983" id="rocket-path"></path>

註冊插件

在使用 MotionPathPlugin 時須要先註冊插件

// register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin);

動起來

// 指定要運動都元素
gsap.to("#rocket", {
  duration: 3.3, 
  repeat: -1,
  ease: Linear.easeNone,
  motionPath:{
    path: "#rocket-path", // 沿着軌跡運動
    align: "#rocket-path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }
});

https://codepen.io/xiaoluobod...

參考

• MDN offset-path
• css-tricks offset-path
• animateMotion
• GreenSock MotionPathPlugin

關於

本文是《SVG 動畫開發實戰》 系列文章第六章。

Notion 版本

小冊是在 Notion 上完成撰寫的，因此我保留了 Notion 的分享版本，你也能夠點擊這裏查看。

GitHub 版本

小冊提供了 GitHub 版本的在線閱讀體驗，傳送門

微信公衆號版本

關注個人技術公號，一樣也能夠找到此小冊系列，目前在更新中。。。