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/

效果制作过程

效果

感想

当碰到痛点时,千头万绪,有许多想法从脑袋里蹦出,该如何梳理,通过这次工具的制作总结: “用一句话描述痛点 → 提取关键词,解析潜在需求 → 寻找合适的方案” 的逻辑顺序,或许会是不错的思路。

在开发的过程中,随着功能的实现,不断有更多念头冒出,例如:是否需要做成“可以代替大量页面动画的重构工作的工具”,最终还是否定了这个念头——这是一个快速解决一段代码的轻度工具,而不是一个替代整个开发流程的重度工具——抓稳核心和初衷。

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【CSS进阶】试试酷炫的 3D 视角

712
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

3804
来自专栏42度空间

【图片版】CSS网格布局(Grid)完全教程

CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内...

39210
来自专栏SEO

「知识」HTML语义元素含义与SEO详细讲解

2867
来自专栏Coco的专栏

【BOOM】一款有趣的Javascript动画效果

1215
来自专栏九彩拼盘的叨叨叨

用CSS来找出两张图的差异

其中,灰色的部分为相同的部分,并且灰色的部分的颜色值为rgb(127.5, 127.5, 127.5)。

681
来自专栏偏前端工程师的驿站

CSS魔法堂:Box-Shadow没那么简单啦:)

前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事。 二话不说看效...

21610
来自专栏菩提树下的杨过

Flash/Flex学习笔记(50):3D线条与填充

3D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个小球连接起来即可。 var balls:Array; var numBalls:uint=30; v...

1938
来自专栏Coco的专栏

【CSS3进阶】酷炫的3D旋转透视

1464
来自专栏柠檬先生

css3 gradient 渐变

分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用   语法:-moz-...

1796

扫码关注云+社区