錯過即過錯！解構SVG圖文的3大交互形式和6大動畫形式
SVG互動圖文是最近各大品牌都在嘗試的新玩法，它不用跳轉出微信推文界面，卻能實現花樣百出的互動效果，牢牢吸引用戶的注意力，并為品牌增加一份科技感。在上一篇推文《微信推文升級：篇篇過萬的黑科技SVG文章怎么玩？》中，我們介紹了現在微信中火爆的SVG玩法，這一次，我們將深入到構成這些玩法的具體元素，在細致解構之后，你就可以對這些零件了如指掌，從而產生無窮無盡的組裝巧思。
首先，讓我們再回顧下SVG的特點。
? 一種圖片格式：SVG意為可縮放矢量圖形（Scalable Vector Graphics），是使用XML格式定義圖像
? 矢量圖：SVG圖像在放大或改變尺寸的情況下，其圖形質量不會有所損失
? 可交互和動畫：通過在SVG文件中嵌入動畫元素或通過腳本來定義動畫，可以實現多種互動效果
對 比
SVG圖文 VS 傳統圖文
優點：SVG圖文可以互動，更有趣味性，同時通過設置互動效果，可以實現分階段的露出內容，避免了傳統圖文中大段文字會“勸退”用戶的問題，給用戶帶來了更好的瀏覽體驗。
缺點：相對于傳統圖文，制作一篇SVG圖文需要設計及開發人員共同協作，周期、成本會有所增加。
SVG圖文 VS H5
優點：
1、周期短、成本低
前端開發相對簡單，不需要后端和運維，測試簡單，無額外服務器相關費用。
2、步驟短、流失少
用戶想要進入H5頁面必須要點擊推文中的鏈接，這一步驟容易造成用戶的流失，而SVG交互圖文和微信上的正常推文一樣，無需點擊和等待，轉化效果更直接。
缺點：
與H5相比，SVG的自由度較低，能夠實現的交互和動畫相對簡單，并且無法像H5那樣開發一些特別功能，如抽獎、表單收集用戶信息等
SVG的交互形式
如果將互動圖文的華麗外殼層層剝下來，你會發現，在SVG圖文中人們能進行的交互形式并不復雜，常見的只有點擊、長按、滑動三種。
01 點擊
點擊是最常見的交互形式。在用戶點擊某個區域之后，畫面中某些元素會發生變化。
圖片源于：雪花啤酒官方微信
長圖中藏有6個雪花馬爾斯綠啤酒酒瓶，用戶每點擊1個酒瓶，文末二維碼被遮擋的葉子就會消失一部分。
02 長按
某個區域內長按后，畫面中某些元素會發生變化。
圖片源于：南方都市報官方微信
將長按動作與抽簽巧妙地聯系起來，讓圖文有了很強的趣味性。
圖片源于：SVGPLAY
長按揭秘也是比較常見的基礎形式。
03 滑動
指定區域內滑動時，畫面中的一些元素會跟隨移動。
利用“換裝”的概念，在漫畫中設置部分可移動的元素，就可以為劇情帶來更多可能性。
圖片源于：英菲尼迪官方微信
圖片源于：英菲尼迪官方微信
SVG的動畫形式
經交互動作觸發后，SVG的動畫效果主要通過改變透明度、調整寬高度、元素位移、繪制路徑、變換及圖片查看來實現的。
01 透明度
元素透明度從0到1或從1到0的動畫：
當前元素從0到1逐漸顯示出來，遮擋原畫面元素，
當前元素從1到0逐漸消失，讓隱藏在后面的元素顯示出來。
圖片源于：人民日報官方微信
顏色及文字元素從0到1顯示出來，就產生了”點亮“的效果。
02 寬高度
元素高寬度從大到小或從小到大的動畫：
用寬高度變化來控制畫面元素顯示內容的多少。
圖片源于：榮耀手機官方微信
點擊后畫面的收起和伸長是通過控制SVG的高度來實現的。
03 位移
元素位置改變的動畫：
元素從A位置移動到B位置，形式可以是橫向移動、豎向移動，或者橫向縱向同時移動。
圖片源于：華為云官方微信
通過改變人物元素的位移，達到人物在移動的效果。
04 路徑
使用SVG的路徑標簽繪制一些線條或圖形，通過控制路徑來展示線條或圖形的繪制過程動畫。
圖片源于：yiwebsite
05 變換
變換包括移動、縮放、旋轉、變形，通過控制元素這些屬性生成相應的動畫。
圖片源于：華為云官方微信
通過變形操作，模擬出翻動書頁的效果。
06 圖片查看
利用微信圖文的圖片預覽功能，點擊區域內放置一張透明度為0的圖片，點擊之后觸發圖片預覽查看。
圖片源于：寶馬中國官方微信
點擊檔案時會觸發圖片預覽查看，之前完全透明的檔案圖片就會顯示出來。
SVG的交互形式
01 Apple
交互形式：點擊
動畫形式：
透明度動畫：提示點擊的文字做了一個透明度循環變化的動畫；
高度動畫：最后一個場景，高度變高后，更多內容呈現出來了
位移動畫：1、最后一個場景的首屏圖切換到畫面中用到了位移動畫，一開始這張圖是在畫面外，點擊后快速移動到畫面中，但是位移的時間很短，瞬間完成，視覺上感知不到。
2、場景切換同時用到了高度和透明度的變化，點擊時前一個場景的高度和透明度瞬間變化成0，露出下一個場景內容。
02 微信派
交互形式：點擊
動畫形式：
透明度動畫：第一個場景點擊后，第二個場景的首屏圖片，透明度由0變1顯示出來；
高度動畫：最后一個場景，通過高度的增加，達到伸長的效果。
03 局部氣候調查組
交互形式：點擊、滑動
滑動主要應用在皮膚的選擇，以及后面幾個團戰場景的對比切換上。
動畫形式：
透明度動畫：切換效果，如開啟游戲，選擇角色，戰斗點擊，草堆隱藏點擊等，是通過圖片透明度實現的。
開發注意點
深淺色模式
內容及用圖要考慮深、淺色模式下的顯示效果，以及在兩種模式下SVG的兼容問題。
單向動畫
SVG動畫通常是一次性的，不可逆的。
適配問題
當SVG中有高度變化的時候，高度必須設定一個固定的值，但是寬度通常是鋪滿屏幕寬度的，這樣就會出現內容在不同的屏幕顯示不全或底部有多余空白的情況。
技術是骨 內容是形
如今新技術層出不窮，實現各種炫酷效果的門檻也越來越低，但無論是SVG、H5還是其他技術，都不是代碼層面越復雜越好，如果創意和內容本身足夠出彩，輕交互也足以形成大作品。在新技術的面前，我們要時刻提醒自己：技術和交互形式都不是核心，好的創意和內容才是。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）