纵享丝滑，宝马这种图片自动消失展开是怎么做的？

原创赞收藏评论

举报 2024-07-22

扫描,分享朋友圈

打开图文后，自动展开全部图文内容。

这种「自动展开」的效果相信大家已经很熟悉了。

*素材来自蔚来《这份力量感，放大看看？》

组合：自动展开

编号：10863（组合）

大家注意到了吗？大部分的自动展开效果，就像上方蔚来的这个案例，打开图文后初始的内容不变，自动展开其余的部分。

那么要是想让打开图文后初始的内容自动消失，接着首屏出现带有交互或者图片尺寸不一样的内容并自动展开图文，应该怎么办呢？

今天我们就给大家介绍一个自动展开的升级效果——自动消失+展开。

一起来看一下宝马中国的这篇案例：

*素材来自宝马中国《准备！挥出你的五月第一杆》

组合：自动消失+展开

编号：11887（组合）

展开前是运动员挥动球杆的GIF动图，随后出现了以动图为背景，文字提示「上滑，燃情挥杆」的双层前景上滑图，并展开全文。

看似GIF没变，其实最开始的GIF播放后消失了才出现的后面的上滑效果，内容过渡得十分丝滑流畅。

这种效果使用 iPaiban Pro 黑科技编辑器里的「自动消失+展开」组合（编号：11887）即可实现。

「自动消失+展开」的效果非常适合新产品、新玩法介绍类的文章，从旧有的内容引入，让原本占据视野的旧内容自动消失，紧接着全新的、更有吸引力的信息自动展开，让新的亮点得到淋漓尽致的体现。

以宝马中国的文章为例，一起来看看这个效果是如何制作的吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组合：自动消失+展开

编号：11887（组合）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组合」按钮，在「花样展开」分类中找到「自动消失+展开」组合，或者直接在搜索框中搜索组合编号11887，点击选择。

第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。

在组合编辑模式中，分为展开前和展开后两块设置区域。

第3步：设置「展开前」内容
点击「展开前」区域，在右侧点击「换图」按钮，上传展开前的初始图片。

第4步：设置「展开后」内容
「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：

第5步：设置参数
点击右侧红色小三角，可以设置初始等待时长、切换时长和展开时长。

「初始等待时长」是指用户打开图文后展开前内容显示的时间。一般是GIF的播放时间。
「切换时长」指展开前的图片和展开后的图片切换时间。
「展开时长」即图文全部展开花费的时长。
如果预览效果发现内容没有完全展开或者展开过长，可以通过「加减展开高度」进行调整，输入负数减小展开高度。
第6步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」逐步退出组合编辑模式回到编辑器主页面。

继续点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

本内容为作者独立观点，不代表数英立场。
本文禁止转载，侵权必究。