每当重构页面的时候,除了设计师精致的设计稿,还需要在页面这个蛋糕上放上一个樱桃,无论蛋糕多么美味,但樱桃的点缀却更容易吸引住顾客的目光,对,就是那些细微的动画——金币蹦出后飞入钱袋、树叶随风飘落、流星划天而过……
以上种种效果都涉及一个无法回避的难题,曲线——该如何用技术手段去实现有曲线的动画,常用的办法有Canvas,SVG,CSS3等,但各自都有技术局限性。
技术 | 设备兼容性 | 其他问题 |
---|---|---|
Canvas | 兼容 | 需要脚本,调试难,需要额外标签,不适合做辅助动画 |
SVG | 部分不兼容 | 需要额外标签,调试难 |
Motion Path(CSS) | 不兼容 | 调试难 |
Transform(CSS) | 兼容 | 无法做曲线效果 |
这是一份尴尬的分析表,因为做动画谨当细细打磨,但以上几种都需要不停地定位元素、调试效果,其中的工作量投入产出比偏低。花太多的时间在看似简单的效果上,就如精心地在蛋糕上放一颗樱桃,一口就没了。
于是我开始考虑如何把这颗樱桃,咳咳,这动画可以更轻快地点在页面上。
一句话描述关键需求—— 重构中,可以快速的在重构界面中绘画出曲线的运动路径,并让元素在路径上运动,最终输出重构内容。
这句话中还包含了一些隐藏的场景:
1、方案具有兼容性
2、移动端重构中可以使用px,rem,%等单位;
3、动画的相对位置可以基于界面中的某个坐标,而不是左上角;
通过这些要求,我们可以开始去找是否有合适的工具
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 删除。