文章插图
@难得写教程的水韬 。有人说新媒体编辑们19年不会条漫,2020不会代码就要被淘汰,这可真的太难了……
2020年以来,很多交互式的刷屏级推文,这些玩法最稳定的方式都是通过代码,包括武汉解封点亮图片、动态展开、小瓶子等等花样玩法 。
文章插图
然而代码学习难度大,做出刷屏级的大部分都需要定制,这让我想起来15年的图片弹幕一样,当初我也是靠着网上的代码,替换文字才实现 。
文章插图
但后来没过多久,很多第三方排版网站就出了对应的模板,怒删收藏夹代码,跑去了第三方网站真香!!
这么多年过去了,其实很多交互的推文动效已经可以利用模板,实现傻瓜操作,比如时隔五年再一次用秀米 。
今天呢,我们要对上周的《真香》推文进行一次完整复盘,包括组成、具体操作及自己总结的一些经验和bug 。
文章插图
文章插图
动态推文的组成
实操过一遍以后,我从组成部分来拆解,相信会帮大家更好理解与操作,我将它们分为:切换图片、过度界面、动画设置界面 。
文章插图
过渡界面由于秀米更新,已经无须再介绍了
① 切换图片
切换图片主要是对内容的一个总体介绍,或者可以很皮地引导大家点点点地过程,尺寸的话最好还是统一尺寸为好 。
如果我们使用了不同尺寸的图片,会默认识别最大尺寸的一张图片,其他的图片则以最大比例去适应,会留白 。
文章插图
红绿灯安排
② 展开图文
展开动画便是正文不断展开的过程,设置动画只需设置一个时间就可以了,但后续会出现比较多的bug,需要我们对正文内容进行处理 。
③ 秀米界面基础展示
为了方面大家操作,在这里也把这次教程的基础操作给简单介绍一些,分别是找到SVG布局及进入设置的界面 。
文章插图
① 布局 - SVG互动 - 正序排列 - 第一个布局
文章插图
② 点击外框 - 动画
基本了解组成部分及SVG布局以后,这就是我们所需要做的操作了,难度其实并不会太大,接下来我们对每个部分进行实操一下 。
文章插图
图片切换操作
我们拿4张图片作为点击切换的案例,根据上面介绍的基础动画,我们可以先设置一个0.4s的淡出动画 。
文章插图
设置完毕以后,我们可以点击上方的 “+” 复制几个,这样一来后面的SVG动画默认也是0.4s的淡出,接着就分别上传选择图片即可 。
文章插图
因为动画触发、背景颜色、动画次序、图片区域等设置都是按照默认来的,所以这个切换动画其实只用设置形式与时间 。
点击看看刚才做的动效?
▼
神奇吧?很简单吧!
接着往下看吧!!!
文章插图
过渡图片设置+展开动画
过渡界面指图片切换跳转到正文的设置,这部分本来是困扰了我上周挺久的一个问题,因为上周设置动画发现不支持PNG图片跳转 。
文章插图
聊天截图 · 不愿透露姓名的秀米编辑
于是我便找了一张svg格式的图标作为过渡画面,并让别人点击购物车开启安利,其实是点击任意位置都可以实现展开 。
文章插图
而这周我写教程的时候,发现设置展开的图片已经不再仅限定于SVG位图,只要是在SVG布局中,无论是SVG、JPG、GIF都可以实现跳转 。
我们现在只需要在最后一张图片后,再新增一个展开的动画即可,动画时长根据自己的正文内容长度而定 。
秒懂生活扩展阅读
- 为什么微信登录一直输入验证码
- 支付宝数字证书安装方法
- 用电脑登录微信手机会收到通知吗
- 注销淘宝账号的方法
- 齐鲁医院官网 齐鲁医院
- 微信微众银行怎么开通
- hideu官网 hide
- melogin.cn路由器如何设置登录密码
- 快手怎么登录
- 腾讯漫画官网免费 腾讯漫画