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

对 比

SVG图文

传统图文

优点：SVG图文可以互动，更有趣味性，同时通过设置互动效果，可以实现分阶段的露出内容，避免了传统图文中大段文字会“劝退”用户的问题，给用户带来了更好的浏览体验。

缺点：相对于传统图文，制作一篇SVG图文需要设计及开发人员共同协作，周期、成本会有所增加。

优点：

1、周期短、成本低

前端开发相对简单，不需要后端和运维，测试简单，无额外服务器相关费用。

2、步骤短、流失少

用户想要进入H5页面必须要点击推文中的链接，这一步骤容易造成用户的流失，而SVG交互图文和微信上的正常推文一样，无需点击和等待，转化效果更直接。

缺点：

与H5相比，SVG的自由度较低，能够实现的交互和动画相对简单，并且无法像H5那样开发一些特别功能，如抽奖、表单收集用户信息等。

SVG的交互形式

如果将互动图文的华丽外壳层层剥下来，你会发现，在SVG图文中人们能进行的交互形式并不复杂，常见的只有点击、长按、滑动三种。

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

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

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

元素位置改变的动画：

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

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

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

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

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

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

关于SVG你还有什么疑问和想法，

都可以后台留言给我们，

期待你我能携手共创更多SVG新玩法！