这个Q弹效果太好玩了!
i排版编辑器
发布于:2026-08-31
文章内容来源于公众号：i排版编辑器，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。
摘要：
今天给大家推荐一个自带Q弹特效的展开效果，玩法灵动。轻轻一点，内容如弹簧般弹出，再点一下，又丝滑收回。 组件：点击消失-弹性选择展开(可收回，两组)
编号：12169（组件）
组件：点击消失-弹性选择展开(可收回，两组)
编号：12169（组件）
这种效果使用i排版SVG编辑器的「点击消失-弹性选择展开(可收回，两组)」组件（编号：12169）即可实现。非常适合答题创意或介绍多个功能/产品时使用，还可以设置成打开盲盒的有趣体验等创意效果，可玩性拉满！相比组合，新的弹性展开组件，设置和排版都更加简单和方便，更加适合展开的内容是短内容纯图片的情况。下面以海尔新能源的效果为例，跟着教程来尝试一下，包教包会，一起让屏幕弹起来！工具：i排版SVG编辑器，网址：SVG.iPaiban.com
组件：点击消失-弹性选择展开(可收回，两组)
编号：12169（组件）
登录i排版SVG编辑器后，点击编辑器左侧「组件」按钮，在「点击」分类中找到「点击消失-弹性选择展开(可收回，两组)」组件，或者直接在搜索框中搜索组件编号12169，点击选择。![]()
准备好所有图片，需注意两张封面图尺寸需保持一致；两张结果图尺寸需保持一致；封面图和结果图宽度一致情况下，结果图高度需高于封面图。
点击「+」号，分别上传封面图和结果图，封面图和结果图的顺序要一一对应。点击展开的触发区域自动为整张封面图，不需要进行调整。双击编辑区图片的左下角，设置点击收回的触发区域，建议设置在底部，不可与展开触发区有重叠。设置图片展开和收缩的时长，展开时长根据内容长度来定，内容长时间就长些，反之时间就短一些，收缩时长可以设置得短一些，视觉效果更好。因效果限制该排版在编辑器中无法正常预览。一切设置完毕后，点击「同步至微信后台」同步到自己的公众号就可以了。使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。
新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。
