错过即过错!解构SVG图文的3大交互形式和6大动画形式

举报 2020-07-22

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 点击

点击是最常见的交互形式。在用户点击某个区域之后,画面中某些元素会发生变化。

压缩1.gif

图片源于:雪花啤酒官方微信

长图中藏有6个雪花马尔斯绿啤酒酒瓶,用户每点击1个酒瓶,文末二维码被遮挡的叶子就会消失一部分。


02 长按

某个区域内长按后,画面中某些元素会发生变化。 


抽奖2.2020-06-24 17_47_15.gif

图片源于:南方都市报官方微信

将长按动作与抽签巧妙地联系起来,让图文有了很强的趣味性。 

长按3.2020-06-24 17_56_38.gif

图片源于:SVGPLAY

长按揭秘也是比较常见的基础形式。


03 滑动

指定区域内滑动时,画面中的一些元素会跟随移动。
利用“换装”的概念,在漫画中设置部分可移动的元素,就可以为剧情带来更多可能性。

图片源于:英菲尼迪官方微信

图片源于:英菲尼迪官方微信


SVG的动画形式

经交互动作触发后,SVG的动画效果主要通过改变透明度、调整宽高度、元素位移、绘制路径、变换及图片查看来实现的。


01 透明度

元素透明度从0到1或从1到0的动画:

当前元素从0到1逐渐显示出来,遮挡原画面元素,

当前元素从1到0逐渐消失,让隐藏在后面的元素显示出来。

点亮6.2020-06-24 18_25_35.gif

图片源于:人民日报官方微信

颜色及文字元素从0到1显示出来,就产生了”点亮“的效果。


02 宽高度

元素高宽度从大到小或从小到大的动画:

用宽高度变化来控制画面元素显示内容的多少。

拉伸7.2020-06-24 18_33_47.gif

图片源于:荣耀手机官方微信

点击后画面的收起和伸长是通过控制SVG的高度来实现的。


03 位移

元素位置改变的动画:

元素从A位置移动到B位置,形式可以是横向移动、竖向移动,或者横向纵向同时移动。

走路9.gif

图片源于:华为云官方微信

通过改变人物元素的位移,达到人物在移动的效果。


04 路径

使用SVG的路径标签绘制一些线条或图形,通过控制路径来展示线条或图形的绘制过程动画。

线条9.2020-06-28 10_48_26.gif

图片源于:yiwebsite


05 变换

变换包括移动、缩放、旋转、变形,通过控制元素这些属性生成相应的动画。

翻书.2020-06-28 11_05_54.gif

图片源于:华为云官方微信

通过变形操作,模拟出翻动书页的效果。


06 图片查看

利用微信图文的图片预览功能,点击区域内放置一张透明度为0的图片,点击之后触发图片预览查看。

档案10.2020-06-28 11_13_15.gif


图片源于:宝马中国官方微信

点击档案时会触发图片预览查看,之前完全透明的档案图片就会显示出来。


SVG的交互形式

01 Apple  

apple12.2020-06-28 11_19_31.gif

交互形式:点击

动画形式:

透明度动画:提示点击的文字做了一个透明度循环变化的动画;

高度动画:最后一个场景,高度变高后,更多内容呈现出来了

位移动画:1、最后一个场景的首屏图切换到画面中用到了位移动画,一开始这张图是在画面外,点击后快速移动到画面中,但是位移的时间很短,瞬间完成,视觉上感知不到。

2、场景切换同时用到了高度和透明度的变化,点击时前一个场景的高度和透明度瞬间变化成0,露出下一个场景内容。


02 微信派

微信深色模式.2020-06-28 16_30_44.gif

交互形式:点击

动画形式:

透明度动画:第一个场景点击后,第二个场景的首屏图片,透明度由0变1显示出来;

高度动画:最后一个场景,通过高度的增加,达到伸长的效果。


03 局部气候调查组

王者88.gif

交互形式:点击、滑动

滑动主要应用在皮肤的选择,以及后面几个团战场景的对比切换上。

动画形式:

透明度动画:切换效果,如开启游戏,选择角色,战斗点击,草堆隐藏点击等,是通过图片透明度实现的。


开发注意点

深浅色模式

内容及用图要考虑深、浅色模式下的显示效果,以及在两种模式下SVG的兼容问题。 

单向动画

SVG动画通常是一次性的,不可逆的。 

适配问题

当SVG中有高度变化的时候,高度必须设定一个固定的值,但是宽度通常是铺满屏幕宽度的,这样就会出现内容在不同的屏幕显示不全或底部有多余空白的情况。

微信.gif


技术是骨 内容是形

如今新技术层出不穷,实现各种炫酷效果的门槛也越来越低,但无论是SVG、H5还是其他技术,都不是代码层面越复杂越好,如果创意和内容本身足够出彩,轻交互也足以形成大作品。在新技术的面前,我们要时刻提醒自己:技术和交互形式都不是核心,好的创意和内容才是。


本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)

    作者
    NPLUS

    NPLUS

    上海 黄浦区

    淮海中路300号香港新世界大厦26楼33室

    行业:营销咨询

    官网:http://www.nplusgroup.com