错过即过错！解构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条）