F系列:引擎架构统一, F2 5.0 发布

lxf2023-05-14 01:29:27

F系列:引擎架构统一, F2 5.0 发布

导读

F 系列是专注于移动端的可视化系列产品,包括 F2、F2Native、F6 的可视化引擎,我们为移动端提供快速、灵活、且具多端兼容性的可视化方案。

去年 1122 我们基于移动端的特点和共性正式提出了 F 系列可视化产品,立足于移动端,统筹设计移动端可视化解决方案。经过我们在蚂蚁一年的落地和实践,今年我们正式统一了 F 系列的底层架构 (FEngine) ,实现了 F 系列底层架构的的互通,而且我们在底层渲染引擎对接至最新的 G 5.0 上,实现了和 AntV 系列产品的统一与互通,同时 F2 也正式进入 5.0 时代。

F 系列新架构

F系列:引擎架构统一, F2 5.0 发布

下面,我们再来重点介绍几个 FEngine 重要更新与特性

多渲染引擎

在 5.0 中我们在原有的渲染引擎 Canvas2D 之上增加了 SVG 与 WebGL 。开发者可以根据使用场景,数据源大小等因素自由选择/切换渲染引擎。我们向下适配不同的渲染环境,向上对开发者保持使用方式的一致性,只需简单配置即可实现渲染引擎的切换

UI & 布局

在 UI & 布局这块,FEngine 延续了 F2 在移动端的实践,并做了进一步的升级,可以让我们非常方便的构建 UI,以及使用 Flex 来进行 UI 的布局,就跟我们使用 dom 和 css 一样。

F系列:引擎架构统一, F2 5.0 发布

事件

在 FEngine 里,你可以在任意元素上添加想要的事件,在事件的支持上,我们不仅支持了常见的 Touch、Mouse、Point,还直接内置 Press(按压)、Pan(平移)、Pinch(缩放)、Swipe(快扫)等移动端常见的合成事件,能非常方便地绑定并使用。

F系列:引擎架构统一, F2 5.0 发布

Lottie

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师设计动画,开发者无缝还原。在底层里,我们也实现了 Lottie 的动画协议,在 FEngine 里我们也可以非常方便的使用 Lottie 动画, 而且只需要设置长、宽、位置、动画配置等一些列简单参数就可以实现 Lottie 播放。

F系列:引擎架构统一, F2 5.0 发布

F系列:引擎架构统一, F2 5.0 发布

F2 5.0 新版本新体验

talk is cheap,show me the picture

得益于 FEngine 的统一,F2 也将轻装上阵,更专注做统计数据的可视处理,下面我们就一起来看下架构升级带来的「开发者可以感知的变化和体验」

多系列图表间的切换

相比于 4.x 中同类型图表间的形变,新版本可以支持任意不同图表间的形变。无论是折线图、柱状图、扇形图还是气泡图、饼图、玫瑰图,都可以做图形形变动画。使用 Timeline 组件,可以轻松自动播放组件内的图表。

F系列:引擎架构统一, F2 5.0 发布

视觉表达

视觉表达的有效性和美观性都很大程度的影响了图表的吸引力和数据传达效率。在视觉表达方面,我们结合业务场景及经验新增了以下 feature

扇区圆角

支持饼图、环形图、玫瑰图、旭日图的扇形圆角配置,并且四个角可以配置不同的圆角大小,带来更柔美的视觉感受。可别小看圆角配置,适当增加圆角,可使图表更圆滑无明显切角,增加一丝活泼元素。

F系列:引擎架构统一, F2 5.0 发布F系列:引擎架构统一, F2 5.0 发布

Lottie 标注

在业务侧我们经常会用 Lottie 来增强一些效果表达,所以在 F2 中,我们也内置了 Lottie 标注,可以非常方便地在图表中使用 Lottie。体感会更加顺滑,设计就可以有更多的选择空间了。

F系列:引擎架构统一, F2 5.0 发布

事件与交互

交互方面,今年新增了一种双轴方向上的交互形式。类似于地图的操作交互,可灵活平滑地平移缩放及快扫,帮助用户进行探索式交互选择。使用方式也非常简单,基于 4.x 单轴的缩放平移交互组件 < Scollbar />, 在其中 mode 参数上增加可传值 ['x','y']。

F系列:引擎架构统一, F2 5.0 发布

手绘风格

得益于 G 的灵活插件设计,我们可以在 F2 5.0 中引入许多有趣的插件,使用方式也非常方便。如引入 @antv/g-plugin-rough-canvas-renderer ,注册在 render 上面,图表即可一键切换为手绘风格,让你的图表可以萌萌哒