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

相关文章

来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

3277
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

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

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

28610
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2997
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4394
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

3356
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.6K7
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

46110
来自专栏飞扬的花生

jsencrypt参数前端加密c#解密

      写程序时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,如何防止提交的请求不被抓包后串改,虽然无法说绝对安全却给非法提交提高了难度...

4759
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

3502

扫码关注云+社区