SVG 交互图文新可能？长按 touchstart&touchend 触发研究

正文

今日案例 SVG长按

技术亮点 全新的触发方式

在16年帮助微信团队制定了《 微信下 SVG AttributeName 白名单 》后，17 年和 18 年交互式图文爆发，尤其 JZ 多媒体解决方案的首席讲师 GL 作为交互图文新锐，在全行业支持不同顶尖企业发布了大量高品质设计作品，相信以下作品你见过一二：

林肯 | 第一太平戴维斯 | 梅赛德斯奔驰 | 起亚 | 腾讯

分期乐 | vivo | 滴滴打车 | 20世纪福克斯 | 一加手机

而迄今为止，所有的行业内 SVG 交互图文的触发主要基于自动触发或 点击触发。那么是否有更多的触发可能性？今天我们来探索长按触发 和 的应用并做相关调试。

touch 是 HTML5 中新增的一系列事件，在移动端与桌面端，包括——

touchstart 事件： 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove 事件： 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动。


touchend 事件： 当手指从屏幕上离开的时候触发。


touchcancel 事件： 当系统停止跟踪触摸的时候触发。


就微信图文的开发环境看，由于 JS 的阻断会导致 touchmove 一般关联的触控距离赋值失效，因而也无法对应到动画的反馈。所以 JZ 目前认为主要的应用集中在 和 这两方面。

一个痛点

长按行为在移动端，往往会唤醒“复制”相关的弹窗。就目前测试情况看，即便呗长按的 SVG 不包含任何文字信息，安卓依然会给出给弹窗，并由此阻断对 的响应。

苹果系统会出现一个小的浮层，但是不会阻断 对 的响应，所以该应用在安卓上似乎显得鸡肋。

但有趣的是，GL 老师注意到如果使用双指同时长按，无论安卓还是苹果都不会出现浮窗， 和 的整个交互衔接就变得非常自然。

测试表现

以一个最简单的矩形为测试样本，我们先来观察它的 x 轴方向长按往返效果。长按下方矩形，它可以向右开始移动——若保持长按，会在抵达预设的终点，一旦松开则返回起点；或者中途松开，也会返回起点 ▼

对此我们可以联想到什么？拉弓射箭？愤怒的小鸟？又或者如果它的移动速度足够快，还会让笔者想起小时候玩的小丑卷哨。

而但凡被囊括在 SVG AttributeName 白名单 里的参数，都可以进行相关的长按触发。比如我们可以试着操纵矩形的色彩 ▼

因而在这里，我们给出几个方向性的思考建议：

请到「今天看啥」查看全文