朋友们大家好，我是三儿。

相信大家平日里使用SVG交互效果，常用的就有点击展开，点击展开不仅能承载多交互，还能巧妙隐藏部分内容，引导用户探寻。

不过用多了点击展开，总觉得会有些审美疲劳，别着急点击展开已经进化到next level了，快来看看吧！

今天给大家带来的教学案例是来自王小卤的感恩节推文，开屏点击上滑后展开余下内容。

点击查看原文

点击会有一个推出效果，展开后是嵌套了点击换图的效果，那么这个效果我们应该如何制作呢，别着急马上开启我们今日的SVG学习之旅。

注：本文素材来源均来自王小卤，仅做教学使用。

在135编辑器页面左侧找到「SVG编辑器」

进入SVG编辑器后在左侧选中「互动效果」，在搜索框搜索组件点击封面图上移-自动展开或组件ID：920

点击组件进入SVG编辑器中，这个时候我们需要看清楚素材要求。

该效果素材要求比较简单，仅需要素材图宽度一致即可。

准备好素材图后，我们就可以按照要求上传素材图了。

上传好「封面图后」，我们可以选择封面图移出的方向，有上下左右供大家选择。

封面图完成后，我们点击「编辑展开内容」里面添加我们后续的展开效果，原内容展开后先是一个无缝图点击不可弹出，后面紧接着点击换图的效果。

这里我们使用的组件是无缝图（点击不可弹出）ID：1、多次点击换图（自定义触发）（gif图） ID：11

后面就是重复上述步骤，添加后续的点击换图内容。

来简单，看看效果吧👇

完成所有内容后，可以选择编辑器右上角的「同步」就能同步到授权公众号后台，只有公众号授权给135后才可以使用同步功能。

如果没有授权也可以下载135插件，通过插件同步到微信公众号后台，只有谷歌浏览器安装了插件后才可以使用插件同步。

点我下载好用的135插件

如果需要将做好的内容放进135编辑器编辑页中，选择「导出」-「复制代码到135编辑器」即可

三儿说：在展开内容板块中，我们不仅可以添加点击换图，还有轮播，双层滑动、音频、视频、超链接等内容，超多组合玩法等你开发，大家快去试试吧。

怎么样

今天的SVG效果还不错吧

相信聪明的你

已经学会了

学会了就快动手试试吧

还有什么想看想学的技巧/效果

记得在评论区留言告诉我喔~