內容簡介
總結: SVG AutoMotion是一個能輕鬆為SVG圖形應用潔淨、高效的動畫效果的工具，當圖形出現在視野中時效果更佳，非常適合為品牌標誌、圖示和插圖添加動感。
問題與答案:
1. 這個外掛的關鍵特點有哪些?
- 可支援古騰堡區塊和捷徑
- 提供淡入、旋轉、縮放和滑動效果
- 可調整動畫持續時間
- 純JavaScript編寫，輕量且無需其他相依性
- 可應用在媒體庫中的任何SVG圖片上
2. 如何在WordPress中使用SVG AutoMotion外掛的Gutenberg Block?
- 新增一個區塊，並搜尋SVG AutoMotion
- 從媒體庫中選取你的SVG圖片
- 選擇要應用的動畫效果並設置動畫持續時間
- 儲存或預覽文章以查看動畫效果
3. 如何使用捷徑在任何位置插入動畫？
- 你可以使用 [svg_automotion] 捷徑在任何地方插入動畫
- 基本範例: [svg_automotion src="2025/10/automotionlogo.svg"]
- 你可以結合多種效果，加入淡入、滑動等效果及指定持續時間。
外掛標籤
開發者團隊
原文外掛簡介
SVG AutoMotion makes it effortless to apply clean, performant animations to SVG graphics as they scroll into view — perfect for adding motion to brand logos, icons, and illustrations.
See examples at viking.infy.uk/svg-automotion
Key features:
– Gutenberg block and shortcode support
– Fade, rotate, scale, and slide effects
– Adjustable animation duration
– Lightweight, pure JavaScript (no dependencies)
– Works with any SVG in your media library
– Add a link to the image if needed
Usage
Using the Gutenberg Block
Add a new block and search for SVG AutoMotion.
Select your SVG image from the Media Library.
Choose which animations to apply and set the animation duration.
Add a link to the image if needed under link settings
Save or preview your post to see the animation in action.
See Screenshot 1 and Screenshot 2.
Using the Shortcode
You can also insert animations anywhere using the [svg_automotion] shortcode.
Basic example:
[svg_automotion src=”2025/10/automotionlogo.svg”]
You can combine multiple effects:
[svg_automotion src=”2025/10/automotionlogo.svg” fade=”true” slide=”true” rotate=”false” scale=”true” duration=”4000″]
You can also add a link to the shortcode
[svg_automotion src=”2025/10/automotionlogo.svg” fade=”true” slide=”true” rotate=”false” scale=”true” duration=”4000″ link_url=”https://wordpress.org” link_newtab=”true” ]
Parameters:
– src — relative or full URL path to your SVG file
– fade, rotate, scale, slide — enable/disable each effect
– duration — total animation time in milliseconds
– link_url — url to link to (optional)
– link_newtab — set to true if you wish the link to open in a new tab
