CSS 路径动画工具的诞生
原创
每当重构页面的时候，除了设计师精致的设计稿，还需要在页面这个蛋糕上放上一个樱桃，无论蛋糕多么美味，但樱桃的点缀却更容易吸引住顾客的目光，对，就是那些细微的动画——金币蹦出后飞入钱袋、树叶随风飘落、流星划天而过……
以上种种效果都涉及一个无法回避的难题，曲线——该如何用技术手段去实现有曲线的动画，常用的办法有Canvas，SVG，CSS3等，但各自都有技术局限性。
技术 | 设备兼容性 | 其他问题 |
|---|---|---|
Canvas | 兼容 | 需要脚本，调试难，需要额外标签，不适合做辅助动画 |
SVG | 部分不兼容 | 需要额外标签，调试难 |
Motion Path（CSS） | 不兼容 | 调试难 |
Transform（CSS） | 兼容 | 无法做曲线效果 |
这是一份尴尬的分析表，因为做动画谨当细细打磨，但以上几种都需要不停地定位元素、调试效果，其中的工作量投入产出比偏低。花太多的时间在看似简单的效果上，就如精心地在蛋糕上放一颗樱桃，一口就没了。
于是我开始考虑如何把这颗樱桃，咳咳，这动画可以更轻快地点在页面上。
需求确定
一句话描述关键需求—— 重构中，可以快速的在重构界面中绘画出曲线的运动路径，并让元素在路径上运动，最终输出重构内容。
这句话中还包含了一些隐藏的场景：
1、方案具有兼容性
2、移动端重构中可以使用px，rem，%等单位；
3、动画的相对位置可以基于界面中的某个坐标，而不是左上角；通过这些要求，我们可以开始去找是否有合适的工具
工具分析
Chrome
Chrome 是前端重构的调试利器， 在Element板块中，我们可以通过调整属性值（时间／形变／过程），实时地看到动画的变化。
然而，面对沿曲线移动的动画难题，Chrome暂时无能为力。 Stylie
Stylie（http://jeremyckahn.github.io/stylie/ ） 是其中最接近需求的工具：
通过上图其实可以看到，界面简洁直接，包含了“实时动画”，“路径编辑”，“关键帧属性”，“输出”等等核心等功能，实操后发现，绘制曲线动画路径需要依靠多段线段模拟，而且路径中的整体动画速度是非匀速的。
至此不得不着手考虑自己做一个工具。
需求提炼
重构中，可以快速的在重构界面中绘画出曲线的运动路径，并让元素在路径上运动，最终输出重构内容。
通过需求，从中提取关键字并分析开发工具所需要的具体功能，结合自己前端能力，列出详细方案
工具承载 | Chrome等现代浏览器 |
|---|---|
重构中 | 工具使用用户：UI开发，交互设计；工具使用场景：UI开发过程，交互创意动画设计过程； |
重构界面 | 解析：即参照物，能在真实或模拟的重构界面（如APP界面），直观地看到元素在界面上的动画效果；实现方式：在工具页插入动画元素图及界面背景图 |
绘制曲线 | 解析：模拟Photoshop钢笔工具的操作模式，达到快速绘制曲线的效果实现方式：钢笔工具即多段的三次贝塞尔曲线，工具页面中用SVG技术实现曲线绘制和调整，支持按键快捷操作 |
路径上运动 | 解析：元素沿路径按"animation-timing-function（CSS3）"属性运动实现方式：要按"animation-timing-function"属性运动的前提，是需通过函数将三次贝塞尔曲线转为连续的点，根据时间线均匀返回该点坐标 |
输出重构内容 | 解析：能够替代重构中繁琐或重复的工作内容实现方式：考虑到兼容性和应用场景，排除svg及canvas输出，通过工具替代脚本操作成本，输出animation（CSS3）代码片段 |
拓展功能 | 1、输出内容兼容W3C、Webkit2、多个动画同页面制作 |
得出界面如下
工具开发过程
钢笔工具的操作设计
路径操作的设计中，由于PS中钢笔工具的操作较为复杂，同时结合多个快捷键辅助操作，故将钢笔工具的功能分解成如下表：
模式 | 操作 |
|---|---|
钢笔工具模式 | 点击空白（添加锚点），点击锚点（移除锚点），点击线段（插入锚点） |
控制点模式（alt) | 点击拖拽空白处（添加锚点并调整控制点），点击拖拽控制点（调整控制点），点击拖拽锚点（重置并调整控制点），点击线段（插入锚点并调整控制点） |
移动模式（command） | 点击锚点（选中锚点，显示操控点），拖拽锚点（调整曲线），拖拽操作点（调整曲线）， |
拖拽线段（移动操控点调整曲线）|
考虑路径动画工具是“所见即所得”，应该以动画可视化为主，同时避免太多误操作，于是把以上模式和功能重新简化组合，再新增默认模式，如下表：
模式 | 操作 |
|---|---|
默认 | 不显示曲线，路径列表选择曲线路径 |
锚点模式（shift） | 点击空白处（添加锚点），拖拽锚点（调整曲线） |
操控点模式（alt） | 拖拽操控点（调整曲线） |
拖动模式（space） | 拖动任意处调整完整曲线位置 |
移除模式（R） | 点击锚点（移除锚点）、点击操控点（重置操控点） |
如此，通过点击／拖拽+快捷键实现三种元素的操作。
贝塞尔曲线上匀速运动的函数设计
要在曲线上匀速运动，须知任意时刻中曲线上的点坐标。获取一段三次贝塞尔曲线中点坐标的公式如下：
由于工具采用的是多段三次贝塞尔曲线，不同线段的t取值范围并不是[0,1]，而是该线段在整个曲线中的比例。如下图，是两段贝塞尔曲线，弧长比值约1:1，故当t=0.5时，坐标点应近似位于P3处，公式参数应为“弧P0P3”，t=1；当t=0.75时，公式参数应为“弧P3P6”，t=0.5。
获取线段比例须获取每一段曲线的弧长，以弧长相较。用微积分公式可以算处弧长，如下：
具体函数就不在此详解。通过以上公式，将曲线的点与CSS中keyframes的百分比一一对应，从而得到均等时间内点的位移，实现曲线上的匀速运动。同理，通过三次贝塞尔曲线公式计算模拟出CSS中animationTimingFunction属性影响的运动速度。
成品
附上工具试用链接：https://coderjunb.github.io/CSS-Path/
效果制作过程
效果
感想
当碰到痛点时，千头万绪，有许多想法从脑袋里蹦出，该如何梳理，通过这次工具的制作总结： “用一句话描述痛点 → 提取关键词，解析潜在需求 → 寻找合适的方案” 的逻辑顺序，或许会是不错的思路。
在开发的过程中，随着功能的实现，不断有更多念头冒出，例如：是否需要做成“可以代替大量页面动画的重构工作的工具”，最终还是否定了这个念头——这是一个快速解决一段代码的轻度工具，而不是一个替代整个开发流程的重度工具——抓稳核心和初衷。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。