如何将公众号SVG动画交互实战代码改写为长尾关键词？

本文共计1796个文字，预计阅读时间需要8分钟。

随着公众号在图文消息中越来越多地加入SVG动画交互效果，SVG动画支持事件触发动画，相对于独立做一个H5而言，由于公众号消息依赖于微信服务器，为广告主节省了服务器流量成本。本次我“

越来越多的公众号在图文消息中加入了SVG动画交互效果，SVG支持事件触发动画，相对于单独做一个H5而言，由于公众号消息依托于微信服务器，为广告主节约了服务器流量成本。这次我们以苹果公众号的一篇交互消息为例，剖析下里面的效果是怎样实现的。

苹果公众号SVG交互

动画主要分为两屏，第一屏出现闪动文字提示用户点击交互，用户点击后第一屏动画消失接着播放第二屏的gif动画，最后画面停止在产品图片帧上。

1.首先构建第一屏动画：

1.1 SVG的基本结构

<svg viewBox="0 0 1080 620" width="100%" height="620px" preserveAspectRatio="xMinYMin meet" xmlns="www.w3.org/2000/svg"></svg>

先来介绍viewBox属性

viewBox=”x, y, w, h”

x、y 控制SVG内所有元素的相对位置。