实例｜微博SVG实验 - 基于 id 能力的 ＜use＞ 复用结构

​​​​​​​

大家好，我是交互设计师计育韬，本文分享一个微博 SVG 交互的经典模型开发，其效果为：在长按屏幕时，三个立方体朝不同方向飞出；在松开屏幕时，立方体运动停止后开始回到初始位置。
 

为什么要设置这个实例？
有以下两个原因：

---

今天计老师已经在头条图文中，提及了这个实例。我希望以此给到广大开发者两个层面的提示：

1）id 的使用，及其具体的定义和引用方式；

2）特殊手势结构的差异化应用；
 

从 id 开始，
更新你的 SVG 开发思维。

---

大多数当今的从业者，应该都听讲过我们的《SVG高级交互排版》系列课，相信也已经非常熟悉编组嵌套法实现多重动画复合的思路了。但是，这种思路本身并不是 XML 语法下泛 SVG 开发的主流——甚至可以一定程度上说，是在微信公众号禁用 id 前提下的一种畸形产物——你在任何其他 infographic 场景譬如常规前端开发、网页数据可视化、本地图形演示中都不会采用这种构建逻辑。

它的缺陷是显而易见的，微信公众号图文内动画的复合程度往往非常局限。并且常常要通过 <click> 和 <touchstart> 双层触发这类独有体系去增加动画复合的强度。

但有了 id，一切就回到了真正 HTML5 意义上的页面开发：一个正确的指令，在特定的触发行为下激活，传递给被你标记 id 的目标，执行对应的行为动作。同样，你也就可以给一个目标绑定多个指令和对应动作关系，使得它真正成为一种可控的，而非单一线性行为的交互目标。

所以计老师认为，微博 SVG 的理论上限，就会比微信公众号生态高非常多，不单单是动画的流畅性和综合性，还有整体交互设计的用户体验逻辑都能被极大丰富。
 

通过这个实例，我也更希望引导广大开发者逐步形成「定义-引用」的微博 SVG 规范书写方式，并且善于通过 <use> 这类属性更合理地布局画面元素。目前就微信公众号生态端看，由于 id 限制的缘故，套娃型代码层出不穷且层级深不见底，这既给后期调试工作带来诸多不便，又不利于代码本身的加载效率，还容易引起各类在传统 XML 开发中匪夷所思的误触情况。

更新并接受全新的微博 SVG 开发思维，它具备更敏捷的开发方式和更丰富的想象空间。减少不必要的编组和嵌套，以 H5 设计的思路重新审视 SVG 交互设计。

保持创造力，
特殊手势总有奇妙玩法。

---

选择 button.touchstart 和 button.touchend 作为实例的应用，计老师也是考量了触发指令多样性的演示意义。在微信公众号端，目前特殊手势的 SVG 交互模型并算不多，以下是 E2.COOL 黑科技 SVG 编辑器中的截图：
 

归根结底，是因为在 id 限制条件下，除了透明度动画外各类位移属性的书写都有局限性，尤其若要实现具备长按/松开形式下坐标变化的 animation，可行性均有待商榷。不过现在，我们或许已经迎来了更友好和开放的创作条件，不妨试一试在这方面进行新的探索吧！

如需获取本实例源代码，请关注微博@JZ多媒体解决方案并私信，我们将进一步在微博中为广大开发者和运营人带来更多实例演示和技术分析，长按识别下方二维码，前往微博与我们共同探讨。