公众号SVG效果教程:点击播放音频相册(竖向移动+自定义触发)

想让你的公众号图文兼具视觉与听觉的双重魅力吗?今天,我们将手把手教你制作一款极具互动性的公众号SVG效果——点击播放音频相册。该效果不仅支持点击触发音频播放,还能让多张图片以竖向滑动的方式轮播展示,实现沉浸式的视听体验。整个制作过程无需代码,只需在SVG编辑器中简单设置即可完成。

效果展示与核心功能

在开始制作前,我们先通过一个简短的视频来直观感受一下最终效果:

这个SVG互动排版效果的核心亮点在于:
* 自定义触发:用户可以自由拖动和调整触发区域(播放按钮)的位置与大小。
* 点击播放音频:点击触发区域后,背景音乐开始播放。
* 竖向滑动轮播:伴随音乐,多张图片会以向上或向下的方向平滑轮播,形成动态相册。

详细制作教程

接下来,我们将分步详解如何在135编辑器SVG编辑器中实现这一效果。

第一步:添加SVG效果素材

  1. 进入135编辑器SVG编辑器界面。
  2. 在左侧的『互动效果』面板中,找到【点击】分类。
  3. 点击其中的『点击播放音频相册(竖向移动)(自定义触发)』素材,它就会被添加到中间的编辑区域。

添加公众号SVG点击播放音频相册效果素材

第二步:上传图片与音频素材

成功添加效果后,右侧面板会弹出对应的设置项。

1. 上传轮播图片
在右侧的“图片”设置区域,上传你希望用于轮播展示的多张图片。这些图片将构成你的动态相册。

在SVG编辑器中上传轮播图片素材

2. 添加音频代码
这是实现点击播放功能的关键。你需要获取并粘贴音频代码到“音频链接”框中。

如何获取音频代码? 如果你还不清楚,可以 点击这里查看如何获取音频代码

在SVG编辑器中添加音频代码以实现点击播放

第三步:自定义效果设置

1. 调整触发区域
此效果支持自定义触发。在编辑区域,你可以直接用鼠标拖动蓝色的“触发区域”(即播放按钮)到任意合适的位置,并拖动其控制点调整大小。

自定义调整SVG效果的点击触发区域位置和大小

2. 设置动画与轮播方向
* 动画时长:控制图片轮播时,每张图展开或切换的动画持续时间,可根据喜好调整。
* 轮播方向:这是实现“竖向移动”的关键设置。你可以选择图片轮播的方向是“向上”还是“向下”,从而控制相册的滑动视觉流向。

设置公众号SVG竖向滑动相册的动画时长与轮播方向

应用场景与导出

效果应用场景

这款点击播放音频相册的SVG效果非常适合用于:
* 音乐推荐/专辑介绍:搭配歌曲,轮播专辑封面或相关意境图。
* 旅行游记:用背景音乐烘托氛围,滑动展示旅途风景照片。
* 品牌故事/产品展示:通过音乐和图片序列,讲述品牌理念或展示产品细节。

同步到微信公众号

制作完成后,你可以一键将这篇带有SVG互动效果的文章发布到公众号后台。

04 同步/导出到微信公众号
制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台。
将制作好的SVG互动文章同步到微信公众号后台
具体操作可参考:
* 点击查看如何使用『同步』功能
* 点击查看如何使用『导出』功能

总结

通过以上步骤,我们轻松完成了一个集点击播放音频竖向滑动相册于一体的高级公众号SVG排版。这种自定义触发的互动形式,极大地丰富了内容的表达力和用户参与感。

想制作更多酷炫的公众号SVG互动效果,如点击换图、滑动展开、重力感应等?强烈推荐你使用135编辑器家族中的SVG编辑器。作为专业的在线SVG编辑器,它提供了海量现成模板和强大的自定义功能,让你无需任何代码基础,就能轻松创作出令人惊艳的互动图文,全面提升你的微信排版质量与粉丝阅读体验。

📁 分类: SVG编辑器

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注