公众号SVG动画效果交互实现方法(SVG九宫格制作)

最近公众号SVG动画效果,黑科技排版真是超级热门,连腾讯“爸爸”都忍不住推送了这种公众号SVG交互文章,下面135编辑器就教大家公众号SVG动画效果交互实现方法,还有特好玩的SVG九宫格制作。

image.png


一、公众号SVG交互文章排版


那这种公众号SVG的交互文章应该怎么排版呢?不会代码也能做出这种文章吗?今天小编就给大家介绍一款不需要代码的公众号SVG黑科技排版神器。让你轻松搞定这种交互形式的排版!


效果示范↑


临近中秋节,我们今天就来介绍这样一个九宫格的点击效果怎么制作吧!首先我们打开135编辑器,登录之后跟着我的步骤一步步来操作。


二、公众号SVG准备工作


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



2、在基础布局,找到一行三个基础布局,点击样式,放置在135编辑器编辑区内。九宫格其实就是由三个一行三列的基础布局组合而来的。这里我们先编辑其中一个,后面两行直接复制粘贴出来就可以了。



双击第一个空白处,然后点击一个公众号SVG布局,放置其中。然后在菜单栏中选择【SVG布局动画】。




三、SVG制作九宫格答题样式


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



要制作点击答题这个效果,需要设置两个页面。一个是点击前的,一个是点击后的。



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


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

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

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

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

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

背景:可设置背景颜色



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


动画触发:

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

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


动画类型:

无动画:无任何效果

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

快闪:快速切换闪动

淡入:逐渐显示

淡出:逐渐消失

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

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


时间设置:

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

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





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




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



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



接下来这个步骤比较重要。我们将第一个布局复制下来,然后双击旁边的格子将内容粘贴上去。一排三个都做好后,将第一排整体复制下来,再在下方粘贴一排。多余的空格删掉就可以了。



粘贴完毕后,九宫格雏形就有了。然后把里面的文字内容在动画面板里一一调整好。


此外,你也可以对九宫格做更多操作,例如添加边框。或者将文字内容替换成图片等。



只要你脑洞够大,你就能够用135编辑器排版出各种好玩的效果,今天介绍的公众号SVG动画效果只是其中一种,如果你感兴趣,接下来小编还会陆续为大家介绍更多135编辑器SVG排版的小技巧,欢迎大家来学习呀!


- END -


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


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