全网首个 Vision Pro 内 SVG 交互图文测试报告
相信最近很多同学都被清华大学「百团大战」免费体验 Apple Vision Pro 的信息刷屏了吧？虽然本学期复旦大学并不会举办「百团大战」，但后续计育韬老师还是会组织同学们开展趣味的测评活动，并争取在包括复旦、浙传等更多周边高校推动体验项目。回到正题，为保持对 SVG 交互设计多终端渲染表现的掌握，他作为行业技术的擎灯人，近期基于苹果 Vision Pro 选择了 10 篇具备特殊触发指征的 SVG 图文进行适配性测试。对相关模型的运行反馈和建议如下，请广大资深开发者和主流 SVG 编辑器（E2.COOL、秀米、135）注意相关特性，及时开展必要的技术迭代。
目前已知的特殊渲染问题
计育韬老师认为，当前在苹果 Vision Pro 版微信运行 SVG 交互式图文过程中，存在以下几点渲染问题（可能非共性）：
1）高频访问 SVG 交互式图文会导致微信闪退或 Vision Pro 高热并重启。尽管在配置层面 Vision Pro 拥有一枚 Mac 级别的 M2 芯片，同时配置实时传感器处理芯片 R1，但由于微信 APP 并未推出 Vision Pro 适配版，因此在 SVG 动画的压榨下渲染表现显得力不从心。
2）微信 APP 在 Vision Pro 中的表现更近似于电脑版微信而非移动端微信，尽管登陆时会踢出手机微信账户。其中微信公众平台的图文窗口虽然支持拖拽缩放与变形，但其比例尺极限为一个约 2:3 的奇异竖屏空间：
换而言之不仅是 SVG，H5、小程序等产品都可能要考虑以这个特殊的比例尺进行 blooding 出血设计，避免大量内容被 Vision Pro 用户丢失。
3）在第 2 点的制约因素下，一些极其容易响应布局关系发生浮动的结构（如音频播放器等）将可能失灵，这一点计育韬老师会在下文具体说明。
测试：月亮游走&画布展开
开发者：计育韬
模型指征：touchstart/click & width
这是最常见的一类双层触发应用，在 Apple Vision 内表现良好。众所周知，「双层触发」是指业内知名开发者荒村首先于 2019 年在《一次触发，遍地开花》中提出的 SVG 交互技术理论，而本文是<touchstart>- <width> 与<click> -<path/translate/opacity> 的组合方式，验证了苹果 Vision Pro 下双层触发中 SVG animation 复合通用性，且无论通过虚空点击👈还是目视锁定双指捏合🤏均能有效响应。在小米本作中，SVG 的交互热区（月亮）其实面积都非常小，但表现出了与手机触控一致的高灵敏度。
测试：镜头游走&文案变化
开发者：计育韬
模型指征：touchstart/click & transform
同样是双层触发结构，本作则串联了更为复杂的 <touchstart> - <transform> 与 <click> - <opacity> 的组合，在 Vision Pro 中表现基本完满，各项 SVG 触发指令带动的动画均顺利运行。唯一的遗憾在于，Vision Pro 的微信 APP 当前版本并不能播放视频号，导致结尾的扫描全能王视频跳转受限：
测试：文案变化&伪音频视频
开发者：荒村
模型指征：touchstart/click & iframe
所以双层触发 100% 安全着陆了吗？并非如此。这次测试计育韬老师选择了人民日报公众号的一期 SVG 交互设计——同为双层触发，其特殊之处在于 SVG 动画与 <iframe> 视频 CSS 结构产生了跨语法复合。在测试过程中，作为承载音乐播放的底层视频响应并不灵敏，由此推测当非 SVG 能力的次层与 SVG 表层叠加时，双层触发的传递还存在某种未完全探明的响应机制，或与该微信 JS 结构自身的响应逻辑有关。
测试：音频、长按-松开交互
开发者：FIFI
模型指征：touchstart/touchend & mpvoice
众所周知，交互图文内「长按-松开」是指计育韬老师首先于 2018 年在《SVG 交互图文新可能？长按 touchstart&touchend 触发研究》中提出的 SVG 交互技术理论，其本质基于硬件设备对「触摸-起始」和「触摸-结束」的识别和「点击」行为的排他。在这次测试中，Vision Pro 中虚空长按👈或目视锁定双指捏合🤏均得到了精确的控制响应，令人惊喜。但本文中的音频，或因其自身比视频结构更自由的浮动性导致在 2:3 空间内无法停留到预期位置，因而无法顺利播放。
测试：长按-位移交互
开发者：三千喵
模型指征：touchstart/touchend & transform
案例链接：点击这里查看
在 Vision Pro 中，长按反馈会随着触发器或关联结构的位移而发生故障吗？带着这样的疑问，计育韬老师接下去基于北大光华 EMBA 的本期 SVG 交互设计实例进行测试。需要注意的是，该作品中的各项分层运动均带有 Spline 缓动函数，贝塞尔曲线函数为 0.42 0 0.58 1.0; ，在实际交互过程中出现了比较明显的渲染卡顿情况。大量缓动函数复合一直是相当挑战硬件与软件品质的存在，卡顿情况或与微信 APP 自身尚未适配 Vision Pro 有关。
测试：可保存抽签
开发者：
科蚪、计育韬
模型指征
flex 布局可保存抽签
案例链接：
众所周知，交互图文内「可保存抽签」是指业内知名开发者科蚪首先于2022 年在《SVG 抽签特效，进入可保存时代。》中提出的 SVG 交互技术理论，它体现了开发者对 flex 布局极其深度和巧妙的理解。在香奈儿本作中，这样的布局效果运行流畅，长按保存反馈迅速！如果希望使用类似具备可保存能力的 SVG 动画可以点击查看：
1）黑科技编辑器｜滚动广告-弹出式
2）黑科技编辑器｜可保存抽签-弹出式
3）黑科技编辑器｜幸运抽签-弹出式
测试：高频双层触发
开发者
计育韬
模型指征
touchstart/touchend
案例链接
在上一个测试案例中，计育韬老师注意到了空间尺度的动画强度或造成 Vision Pro 表现异常，那么时间尺度的高频触发是否也会影响 SVG 图文的渲染表现？以钉钉这期非常神奇的敲木鱼游戏为例，它是一个表层木鱼反复响应与下层有序图层依次消解的交互结构，极容易发生用户的高频触击行为。测试结果表明，尽管图文运行初期表现良好，但如果一再打开该作并高频点击画面，就可能出现微信闪退或 Vision Pro 高热并重启。
测试：拖拽（滑屏）单一动画
开发者
GQ实验室
模型指征
touchmove & transform
案例链接
早在 2018 年的《SVG 交互图文新可能？长按 touchstart&touchend 触发研究》中，计育韬老师就另行提及了 <touchmove> 的应用可能性。而 GQ 实验室的这篇 SVG 交互图文，在手指滑过屏幕时产生动画位移效果，正是基于该指令实现。它整体通过 E2.COOL 黑科技 SVG 编辑器中的「滑屏（拖拽）入场」模版部署，在 Vision Pro 中具有良好的交互体验。
测试：拖拽（滑屏）复合动画
开发者
E2.COOL 黑科技 SVG 编辑器
模型指征
touchmove & transform/dashoffset
案例链接
同样指令下，我们已经发现不同强度的 SVG 动画会影响 Vision Pro 的渲染表现。在这次测试中针对同类型拖拽（滑屏）指令但复合了大量复杂动画的 SVG 交互图文，同样会出现 Vision Pro 明显发热并提升风扇转速的情况，且需要更精确的手势触控。
测试：无限往返结构
开发者
计育韬
模型指征
touchstart/click & transform
案例链接
相信细心的读者已经注意到，关于双层触发技术的衍生中，目前对于具备无限往返的结构尚未进行测试。所以计育韬老师另外还选择了一期与 GE 通用电气的合作案例，感受了无限往返结构的 Vision Pro 内体验。测试结果令人满意，双层的动画指令均可顺利运行。
尾声
如果你对测试的更多细节感兴趣，记得点击下方视频号，收看剪辑版的 10 个案例测试过程：
全网首个 Vision Pro 内 SVG 交互图文测试报告
另外，近期我们计划在本校复旦大学内招募对 Vision Pro 感兴趣的同学，进行校园学术范畴下 XR 产品的应用体验，如有意向可在评论区留言咨询。其他高校组织也欢迎点击《第8轮全国高校公益巡讲｜新媒体SVG设计与AI应用实战｜站点招募》了解近期的行业公益讲座项目，我们将积极将更多新媒体行业前沿技术动态与思维方法带入校园中。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
