想让你的公众号文章在信息流中脱颖而出，实现点击后向上收缩再展开全文的惊艳互动效果吗？这种被称为“点击回缩展开（窄屏）”的公众号SVG效果，正是提升用户参与感和内容层次感的利器。本文将以135编辑器为例，手把手教你从零开始制作，无需任何代码基础。
效果展示与应用场景
什么是点击回缩展开效果？
这是一种高度互动的微信SVG排版技术。用户点击首图指定区域（触发区）后，画面会先优雅地向上收缩，随后展开预设的完整内容（如长图文、组合特效等）。窄屏设计（宽度345px）使其完美适配手机阅读，视觉冲击力强。
核心特点：
* 自定义触发：可精确设置点击热区。
* 双重动画：先收缩、后展开，仪式感十足。
* 窄屏适配：345px宽度，确保在移动端显示完美。
* 内容承载强：展开区可嵌套多种其他SVG互动效果。
适用场景
- 内容预告与揭晓：用首图制造悬念，点击后展开完整故事或答案。
- 多层次信息展示：将复杂信息分层，提升阅读节奏感。
- 互动式海报/邀请函：增加打开的趣味性和互动性。
分步教程：手把手制作点击回缩展开SVG
本教程将引导你使用SVG编辑器完成整个制作流程。请跟随以下步骤操作：
第一步：添加SVG效果基础模板
- 在135编辑器内，点击左侧工具栏的 【SVG效果】 按钮。
- 在搜索框中输入编号 “61” 或效果名称 “点击回缩展开” 进行搜索。
- 从结果列表中找到并选择 【点击回缩展开（窄屏）（自定义触发）】 效果。
- 点击该效果，将其添加到页面中央的编辑区域。
- 提示：你可以选择带有135默认素材图的版本，也可以选择空白版本从头制作。
第二步：上传并设置首图
以选择空白模板为例：
1. 在编辑区域右侧，找到 【添加首图】 区域。
2. 点击上传按钮，从本地上传你的首图素材。你也可以从编辑器左侧的 【我的图片】 库中选择已有图片。
* 关键提示：请务必确保图片尺寸和格式符合右侧 【素材要求】 中的说明，否则可能导致最终效果出错或失效。
第三步：设置点击触发区域（热区）
首图上传后，你会看到图片上有一个虚线框，这就是默认的触发热区。
1. 点击这个虚线框，框体四角和边缘会出现控制点。
2. 拖动这些控制点，即可自定义调整热区的大小和位置。
3. 设置完成后，只有用户点击这个区域时，才会触发展开动画。
第四步：调整展开与回缩动画速度
在编辑区域右下角，找到 【动画设置】 选项。
1. 这里可以分别调整 “展开时长” 和 “回缩时长”。
2. 数值（单位：毫秒）越大，动画播放速度越慢，视觉效果越舒缓；数值越小，动画越快。
3. 根据你的内容风格，调试出最合适的动画节奏。
第五步：编辑展开后的核心内容
这是效果最精彩的部分——你可以在展开的区域里放置任何内容！
1. 点击编辑区域右下侧的 【编辑展开内容】 按钮。
- 进入新的编辑页面后，你就拥有了一个完整的画布。你可以在这里：
- 添加图片、文字等基础素材。
- 嵌套其他SVG互动效果（如点击换图、滑动查看等），打造更复杂的互动体验。从左侧SVG库中选择效果添加即可。
- 利用编辑区域上方的工具栏，对已添加的素材进行精细调整：
- 【去缝隙】：消除素材间的空白间隙。
- 【上/下移】：调整素材图层顺序。
- 【间距】：调整素材之间的间距。
- 【删除】：移除不需要的素材。
- 所有内容编辑并排版满意后，点击页面右上角的 【完成】 按钮，保存并返回首图编辑页面。
第六步：同步或导出至公众号
效果制作完成后，预览无误即可保存。
1. 点击编辑器上方的 【同步】 按钮，将文章同步到你的微信公众号素材库。
2. 或者，也可以使用 【导出】 功能，导出HTML文件后再手动上传到公众号。
* 重要提示：SVG互动效果必须通过【同步】功能同步后，在手机端预览才会完全正常。编辑器的网页预览功能可能无法完美呈现所有动态效果。
更多操作指南：
总结与进阶工具推荐
通过以上六个步骤，你已经成功掌握了一款高级公众号SVG效果的制作方法。关键在于：选择合适的模板、设置精准的触发区、并在展开区内精心编排你的内容。
想更高效、更创意地制作各类公众号SVG互动效果吗？ 强烈推荐你专注于使用专业的SVG编辑器。作为135编辑器家族的核心成员，这款在线SVG编辑器集成了海量模板，专门针对“点击换图”、“滑动展开”、“点击回缩”等复杂互动效果进行了优化，可视化操作界面让你彻底告别代码，轻松实现专业级的微信互动排版。
遇到问题？ 欢迎在帮助中心内【联系客服】获取帮助。
我们始终重视您的反馈，诚挚邀请您为135编辑器提供【意见和建议】。
微信搜索并关注 135编辑器（ID：editor135），获取更多排版干货知识。
