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 条评论
登录 后参与评论

相关文章

来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

2759
来自专栏图像识别与深度学习

《Android》Lesson17-用Fragment实现简易新闻应用1

1407
来自专栏腾讯社交用户体验设计

你离高效制作动画只差一篇文章的距离

1182
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

451
来自专栏编程

CSS遮罩的过渡效果有趣的幻灯片

今天,我们想向您展示如何使用CSS Masks创建一个有趣而简单却引人注目的过渡效果。与裁剪一起,遮罩是定义可见性和与元素合成的另一种方式。在下面的教程中,我们...

1789
来自专栏非著名程序员

代码实验室--带你一步步理解使用 ConstraintLayout

? 说明 这次 IO 给开发者带来了很多惊喜, ConstraintLayout 是其中较为实用的之一. Google 第一时间发布了官方的代码实验室指导教程...

2056
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

2916
来自专栏青玉伏案

视错觉:从一个看似简单的自定义控件说起

为什么要写今天这篇博客那就说来话长了,那是在一个大雪纷飞的冬天……然后……。好了,不扯淡了,直接进入今天的主题吧,这篇博客是关于iOS自定义组件的东西。一些UI...

1806
来自专栏理论坞

那些你不知道的Ps冷知识③——完结

本条是针对PSCC及以上版本的技巧(在PSCC发布之初本是没有这个功能的,后续的更新中才加上),第一次使用CC时相信很多人在使用路径选择工具时都有一些不适感——...

521
来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

4508

扫码关注云+社区