文章插图
@难得写教程的水韬 。有人说新媒体编辑们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路由器如何设置登录密码
- 快手怎么登录
- 腾讯漫画官网免费 腾讯漫画