SVG排版公众号交互图文的大部分创意是离不开下拉展开的效果，常见的展开效果有点击下拉展开、自动下拉展开、点击逆向下拉展开、多段下拉展开、伸缩展开、展开套多个展开、点击互动下拉展开、点击播放动图GIF下拉展开等。
单个点击下拉展开
单个点击下拉展开技术实现比较简单，但也要处理好不漏底图和精确计算展开高度。
多个点击下拉展开
多个点击下拉展开组合的SVG排版，技术和设计需要更好的沟通配合，需要考虑下拉展开前的整体样式和下拉展开后的整体样式，因为展开后每个点击展开会被拉开间距，在长图上会出现新增显示的内容。
一种做法是把整体拆分为两个层，一个是背景层，一个是内容层也就是多个点击下拉展开的容器，背景层随着展开高度的变化而自适应变化，既能适配展开前的整体效果，也能适配展开后的整体效果，比较推荐的一种方案。
相关案例：点击查看
另外一种做法是不进行拆分，直接整体切图实现，好比是在长图多条缝隙里撑开图片。
相关案例：点击查看
自动下拉展开
自动下拉展开去掉了用户触发的步骤，图文资源加载完成后，根据程序设定的时间自动下拉展开。自动下拉展开在安卓手机上存在一定的bug，非首次打开容易复现无法自动下拉展开，因此需要对代码进行优化处理。
点击逆向下拉展开
点击逆向下拉展开是反方向的下拉展开，把向下展开转变成向上展开，这一个小小的变化，却带来了不一样的交互视觉体验。
自动多段下拉展开
自动多段下拉展开与自动下拉展开类似，只是他下拉的是多段（多次下拉展开），这个SVG效果也要注意安卓手机的兼容问题。
多次点击连续展开
多次点击连续展开是每点击一次就下拉展开一次，如果有多个下拉展开，则需要点击多次。该效果其实是多个点击下拉展开的组合，只是他们的点击区域位置和下拉展开高度不同。
伸缩展开
伸缩展开是可重复不限次数下拉展开与返回缩回，是click事件和touchstart事件结合使用的典型案例之一。该案例在苹果手机上存在一定缺陷，需要注意避免问题发生。
展开套多个展开
展开套多个展开是一个展开里面嵌套多个点击下拉展开，也就是多个点击下拉展开组合+外层包裹点击下拉展开=展开套展开。
互动下拉展开
互动下拉展开是点击之前或点击之后会有一系列的交互。
点击之前一般是设置多个互动层，等这些互动层都结束后才能点击下拉展开。
点击之后一般是通过双重触发（click和touchstart事件），会触发执行其他层的动画。
点击播放动图GIF下拉展开
点击播放动图GIF下拉展开是点击播放动图完成后再下拉展开，所以精确计算动图的播放时间是非常关键的。
合作开发咨询，私信或者评论留言哦~
强力驱动