SVG微信交互图文｜交互图文“牛势开局”来啦

SVG微信交互图文｜交互图文“牛势开局”来啦

牛年大吉，牛势开局，新的一年我们依旧会在SVG领域不断探索，带领大家一起发现行业优秀案例和前沿技术。而今天带给大家介绍的案例也是新年「小编备用」给大众汽车的“牛势开局”——《今日宜：牛势开局》。

今日宜：牛势开局

整篇图文显而易见是一个福袋的画面呈现，实现触发GIF弹出大图的交互效果。从交互层面上看，此类结构交互形式已经不算特别，类似前面文章所介绍到的「穿透触发弹出大图」交互装置，但在技术层级上却大有区别，今天以此为深究其中复合的交互细节。

首先交互层面上，不难看出一次触发行为实现交互两种效果，先是首图变化GIF呈现画面动效感，其次是图片放大的弹出，突出显示最终信息。这两种变化如何在一次交互行为整体呈现呢？这就得益于编组结构的套用，首先切换GIF效果其实是在编组上利用>属性控制图片位移，同时控制元素「begin」的初始值以便于不同内容的分段展示，最后<scale>的原理控制图片的弹出效果。这正是大众汽车案例中活用参数的力量化繁为简的精髓所在。

这也是编组嵌套的强大之处，适配内容的信息量和交互呈现逻辑，降低冗余无用代码的出现，综合解决问题的复杂性也就实现了内容和信息的折叠，以最简单的方案处理看似复杂的效果。 

当然大众汽车此篇图文交互效果还能得到进一步优化，比如在最终的弹出大图中实现长按保存图片，实现信息多渠道传播等等，需要根据图文的用途和需求进行交互上的优化调整。

整篇推送中微信交互图文定制的魅力可见一斑，区别SVG模板千篇一律的套路，更完美的适配了内容的创意性，实现最适合品牌调性的效果。