【SVG案例库】SVG公众号排版交互图文案例汇总
随着交付项目数量逐渐增多，于是懂点君在交付的项目案例中挑选一些案例，按照SVG排版交互方式进行归类汇总，整理形成SVG案例库，方便大家定制开发和学习SVG交互排版。
单次展开
描述：点击下拉展开无缝长图一次，比较常见的SVG互动排版。
自动展开
描述：图文素材资源（包括代码、图片、视频、音频等）加载完成后，用户无需点击，自动下拉展开。
逆向展开
描述：常见的展开方向是向下展开，逆向展开的方向则是向上展开，看起来有“掉落”的感觉。
多段展开
描述：图文资源加载完成后，多段连续自动下拉展开；多次点击连续下拉展开，也就是每点击一次就下拉展开一次。
- 案例1：多段自动展开(eg:GQ红了)与细节动画（相关兼容问题，点击查看一，点击查看二）
- 案例2：多段自动展开(eg:GQ红了)
- 案例3：多次点击连续展开与左右滑动播放音频
- 案例4：多次点击连续展开与播放动图GIF
伸缩展开
描述：点击展开按钮，下拉展开长图，点击返回按钮，向上缩回长图。
展开套展开
描述：点击展开里面嵌套多个点击展开。
- 案例1：展开套多个展开与竖版视频遮罩
- 案例2：展开套一次展开与左右滑动开门
- 案例3：展开套多个展开与点击播放音乐
- 案例4：展开套多个展开与横版视频遮罩
- 案例5：展开套一次展开与点击播放动图GIF
- 案例6：展开层层连续嵌套展开
- 案例7：点击播放动图GIF与展开嵌套多个展开
互动展开
描述：点击下拉展开之前或展开之后会有一系列的排版交互。
动图展开
描述：点击播放动图GIF完成之后，再下拉展开无缝长图。
3D视差
描述：多层图片以不同的速度移动，形成立体的滑动效果，带来强悍的视觉体验。
- 案例1：点击播放动图GIF与全屏3D视差滚动
- 案例2：点击首图向上滑动隐藏与全屏3D视差滚动
- 案例3：全屏3D视差滚动与视频号美化
- 案例4：纵向视差滚动与视频号美化
- 案例5：纵向视差滚动(三层视差)
- 案例6：纵向视差滚动(三层视差)
错层滑动
描述：顶层图片与底层图片可以滑动，中间层图片固定不滑动。
模拟互动
描述：模拟APP界面、游戏机、小游戏等SVG互动排版。
轨迹运动
描述：物体沿着Adobe Illustrator导出的路径移动。
轨迹描边
描述：沿着Adobe Illustrator导出的路径完成描边动画。
一键变色
描述：一开始图片默认显示黑白色，点击之后一边向上收缩，一边逐渐变成彩色。
数据报告
描述：在手绘场景画面、数据图表等增加SVG动画（减少使用动图GIF），既能提升图文的加载速度，还能生动形象展示数据报告。
- 案例1：多次点击连续展开与细节动画展示（相关兼容问题，点击查看）
- 案例2：数据图表动画展示
撕纸翻页
描述：类似书本翻页、撕掉纸张、纸片滑出等效果。
随机盲盒
描述：抽签、盲盒机、随机显示长图，都具有随机性，更具趣味性。
密码解锁
描述：点击正确的密码，成功解锁后展开长图。
滑动选择
描述：左右滑动生成海报，点击原生弹出海报；多个左右滑动选项组合形成海报。
- 案例1：左右滑动选择与点击原生弹出海报
- 案例2：多个左右滑动选项生成海报（相关兼容问题，点击查看）
选择答题
描述：单项选择答题、选择多个选项生成相关海报。
九宫格
描述：九宫格布局排版。
弹出海报
描述：点击原生弹出海报图片，海报图片长按可识别二维码和保存本地相册。
图片切换
描述：点击图A淡出，图B淡入。
图片滑动
描述：图片左右或上下滑动自动对齐。
图片轮播
描述：循环闪动轮播、循环叠图轮播、无缝滚动轮播、循环有序淡入图片等。
多图展示
描述：可以重复不限次数点击显示和关闭图片、探照灯、多点点击淡入图片等。
- 案例1：十六宫格可重复点击显示关闭图片（相关兼容问题，点击查看）
- 案例2：模拟打印小票与可重复点击显示关闭图片
- 案例3：多次点击互动淡出图片
- 案例4：多次点击探照灯与淡入图片
- 案例5：点击展开长图与滑动开门显示图片
- 案例6：多点点击淡入显示图片
- 案例7：可重复切换背景（Tab切换入门版）
- 案例8：可重复选择点击显示和关闭视频/图片滚动等
播放GIF
描述：点击播放动图GIF。
- 案例1：点击播放GIF图与点击下拉展开
- 案例2：点击播放GIF图（相关兼容问题，点击查看
...
😭😭😭😭😭
非常不错的一些案例
翻译服务接连器超时
如有问题，可以留言咨询哦