微信公众号互动推文制作方法(SVG互动效果样式)

前段时间网易哒哒发了一篇微信公众号互动推文文章,点击做题。真是惊艳四座,普通的微信公众号还能这么玩?这是用了什么神器做的?一时之间,很多小编都在找这种黑科技互动推文制作方法。今天我就来给大家介绍一下,这种微信公众号互动推文其实是SVG代码,通常是由程序员编写成的,能生成各种好看的SVG互动效果样式。


我们普通小编不会代码怎么编辑这种有趣的文章呢?今天小编就给大家推荐一个不需要学代码,也能做微信公众号SVG效果的工具-135编辑器。


录制_2020_09_23_13_37_13_547.gif

效果示范↑


一、SVG互动准备工作


这里我们推荐使用135编辑器,打开135编辑器,登录之后先:

1、将菜单栏切换成【专业版】



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



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



二、SVG制作答题类样式


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



要制作点击答题类排版,需要设置两个页面。一个是点击前的,一个是点击后的。



页面一是点击前的显示效果,我们将文字、颜色、文字大小做一个调整。如下图:


横向、纵向百分比设置:定位文字方位

文字内容:输入后支持单行显示

文字粗细:默认0,数值越大文字越粗

文字大小:默认18,数值越大,文字越大

文字颜色:与135编辑器一致

背景:可设置背景颜色



然后设置动画效果,这里我们可以选择淡出、1秒


动画触发:

点击是需要读者点击后,才出现下一页画面效果。

自动是打开文章时,自动开始进行播放。


动画类型:

无动画:无任何效果

字幕:类似弹幕效果可以设置上下左右四个方向

快闪:快速切换闪动

淡入:逐渐显示

淡出:逐渐消失

移入移出:当前画面向上下左右四个方向移出或者移入

展开:只允许最后一屏设置展开效果,画面向下展开


时间设置:

动画时长:动画能持续多久时间,时间设置得越久,动作就越缓慢

动画延迟:读者触发了这个动画效果后,多久开始执行这个效果。时间设置得越久,等待得越久。



设置好页面一之后,我们点击页面右侧的加号,复制当前页。



在第二页,我们要把答案输入进去。动画类型选择无动画即可。



接着我们将画布宽高比设置一下,默认情况下宽高比为1:1,案例中选项是长方形的,我们可以将宽高比设置为100:20。



三、SVG互动效果预览方法


设置完毕后,点击右上角的【预览】查看整体效果。预览无误后,点击完成即可。


录制_2020_09_23_14_02_11_761.gif


由于这道题目,我们设置了三个选项,那么我们继续编辑后面两个。我们回到编辑器页面,将选项A进行复制,再在下方粘贴出来。删掉多余的部分。


录制_2020_09_23_14_05_45_546.gif


这种微信公众号互动推文制作方法你学会了吗?要专门定制这种排版动辄几百几千,而我这篇教程免费教你如何自己去做一篇这样的创意公众号推文,还有超多SVG效果样式可以定制选择,是不是该来点儿掌声呢?


- END -


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


文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
小伍资深编辑
共638篇文章
最近文章
更多
  • 双十二电商活动宣传排版素材(电商商品促销推广模版样式)
  • 乞巧节微信公众号推文排版素材(爱情浪漫活动推广文案)
  • 二十四节气立秋图文排版素材(金黄色系立秋推文文案模版)
  • 八一建军节纪念日推文排版样式(光辉历程文案宣传模版)
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
高价值社群的5大核心关键
抖音账号内容自检清单!
决定离职后,3天拿到offer的总结与反思!
【135早资讯】:教育部将彻查教材插图问题;抖音6月1日起将对本地生活商家收取服务费
热门素材样式
运营导航
运营工具
分享到