公众号SVG互动创意排版效果教学

前段时间人民网公众号推了一个特别有意思公众号SVG互动创意的文章,文章一开始展现的是一副卷轴,用文字引导读者,点击一下,卷轴再徐徐打开。极具美感和创意,一时间刷遍了大家的朋友圈。大家一边感叹内容精美,一边也为这种创意文章的形式感到惊喜。




一、SVG互动效果展示


那么这种公众号互动创意排版是如何制作的呢?其实这是利用SVG代码制作而成的,在微信公众号后台是无法直接实现这样的效果,必须要专业的编程人员来敲代码。不过,最近小编发现了一个工具,不用学习代码,也能够让你轻松实现这样的效果,下面一起跟着小编来学习SVG互动排版效果教学吧。


效果示范↑

点击后,展开画面


在画面上,点击箭头后,文章会自动打开。这种效果我们可以利用135编辑器轻松实现,接下来就是详细的操作步骤,大家一定要仔细看好了!


二、公众号SVG互动准备工作


1、首先登录135编辑器,将菜单栏切换成【专业版】



2、在基础布局,找到SVG布局,点击样式,放置在135编辑器编辑区内。



3、在编辑区内点击样式,在弹出的菜单栏中点击【SVG布局动画】



注意:在制作这个效果前,你先准备好点击后展开的文章内容。并保存在【我的文章】里。



三、SVG制作点击展开效果


制作这个效果前,我们先对SVG动画设置版面有个初步了解。大家可以点击下面图片,详细查看。



要制作这个效果,第一页我们把类型设置为图片,上传点击前的图片。




由于这张图比例和SVG默认的比例是不同的,导致两边有多余的白色,我们可以条则会那个一下宽高比,使之看起来差不多即可。图片区域,选择覆盖。



图片区域:

包含是指图片如果无法刚好铺满画布,则留出一定空白。

覆盖是指图片如果无法刚好铺满画布,则会自动裁去超出的部分。




然后设置动画效果为展开。



点击预览/编辑图文-编辑图文




在这里会调用出一个系统编辑器,我们要将事先准备好的文章打开。




完成编辑后,你可以调整动画时长,也就是展开这篇文章所需要的时间。数值越大,动作越慢。



设置完毕后,点击右上角的【预览】查看整体效果。预览无误后,点击完成即可。如果需要发送到手机上预览,可以用编辑器的【手机预览】功能。




- END -


点击135编辑器获取更多资讯


文章评价
登录后可以评论
立即登录
分享到