计育韬：关于 SVG 交互物体轨迹动画的时间微分策略

目前在 SVG 主流开发体系内，时间微分是一项效果极佳的“防”二次触发策略（印象中是 GL 最早应用实践），即通过超长时间的<dur>值组合<keyTimes>进行时间多个区间的极大/极小分配，将动画区分成运动态和静止态两段流程，并使得大多数后段时间执行静止态。

而纯 SVG 交互中静止态的表达一般要搭配<values>参数的设定，比如透明度就会如 0;1;1 表现，位移就会如 0;100;100 表现……但当近期在复旦大学奇点新媒体研究中心的项目实践中，开发者同学面临<animateMotion> 时注意到动画是以<path>参数表达的，即便它包含分号（两段位移的贝塞尔曲线），在仅有<keyTimes> 的条件下依然不能生效。

这时候，我们要引入<keyPoints>参数，虽并不常用但在轨迹型互动中它具备重要意义，它同样基于 0 到 1 的区间，对应可以将贝塞尔曲线进行运行点分割。比如我们采用一组如 keyTimes="0;0.001;1" 和 keyPoints="0;0.99999999;1" 这样的搭配方式，就能有效实现 SVG 交互物体轨迹动画的时间微分策略。

请广大开发者同学们对此进行记忆，在一些特定场景下可以进行应用。附一则圆形沿轨迹运行的代码 DEMO 便于读者理解。