数据可视化之MarkPoint

MarkPoint是什么效果?如上图,一闪一闪亮晶晶的效果,这是在Echarts中对应的效果。我最早看到的是腾讯的一个Flash的版本,显示当前QQ在线人数的全国分布效果,感觉效果很炫,当时也在想,怎么用JS,HTML5来做出类似的效果,但说实话,没什么思路,甚至怀疑JS是否做不出来这种逼真的效果来。终于看到Echarts中提供了这个功能。下面就扒开她绚丽的衣着,一起走进MarkPoint的世界。

数据

首先还是先看看数据上的逻辑。上图是一个数据格式,placeList包括每一个关键点的名称和坐标位置,而在风格中主要有name,可以设置为强中弱三种,分别对应MarkPoint图中白蓝绿三种效果,类型是中国地图,而具体的风格在存储在markPoint字段中。我们在看看markPoint字段里面是什么内容。

如上就是markPoint里面的主要内容,这里,每一个点是一个钻石(diamond)的样式,符号大小,还有一个effect的属性,这就是它的动画风格,而data则用来加载placeList的信息。

综上所述,对于使用者而言,指定好要显示markPoint的位置,也就是placeList,然后在赋予它们的具体效果,中国范围,强弱类型以及具体的形状(钻石,矩形或圆形等),这样就可以得到MarkPoint这样的闪烁效果。

原理

其实说原理有点夸大其词。通过数据层面,可以看出来每一个点都是独立的,如果你放大后,基本可以判断出来各自完成自己的动画效果,并一致循环下去。如果缩小后,你会发现所有的markPoint并不是同步的,频率各不相同,显得杂乱无章。(推荐TED的视频:The First Secret of Great Design - Tony Fadell - TED Talks)。

这样,这个问题就分解成了两个部分:

  • 如何模拟每一个点的闪烁效果
  • 如何管理大规模的点的闪烁周期

闪烁效果的实现

如上,是同一个markPoint在不同帧下的效果,大家可以想想一下这样一个从小到大然后再到小的过程,则完成了闪烁的效果,如果你足够细心会发现里面有一个blur的平滑效果,这样会让闪烁有一个平滑的效果,类似字体的抗锯齿,看起来有一种朦胧的感觉。当然,blur这个效果是怎么实现的?其实在之前风向图和热点图中都采用了这个技术,就是和上一帧的图片进行一个半透明的叠加。然后在配合一个动画特效(animation effect),闪烁的效果就完成了。

多点闪烁动画的实现

如上是在某一帧的截图。俗话说的好,一花独放不是春,所以如何控制这么多的点,风格各不相同的markPoint,而且频率各不相同,这就涉及到动画类和随机数之间的内容,同时在框架上能够贯穿整个渲染周期。

我们看一下在Echarts上的流程,先是初始化的流程:

如同,MarkPoint的数据初始化主要是Map类读取数据,然后在Base中调用getLargeMarkPointShape来创建这些点。

在Base中,调用animationEffect指定单个MarkPoint的闪烁风格,这里需要额外说明一下,虽然在数据中动画风格只是简单的show:true.但实际上,最终是采用的config.js中默认的动画风格,比如周期,是否循环,跳动等,如下图所示:

而在ecEffect中,调用largePoint来随机设置,实现各自不同的动画周期。从而完成整改初始化的过程。

初始化结束后,则进入到了渲染阶段。渲染是采用的zrender框架,而markPoint则是由Animation来驱动,每一帧都会调用update,在onframe中来设置每一个点当前的状态,比如大小,根据时间周期下,线性插值计算出它应该的大小(下面会详细说明),最后调用Symbol::buildPath实现所有markPoint的闪烁效果。

这就是初始化准备和渲染周期的大致一个过程,下面对主要功能模块进行介绍

实现代码

如上,只是指定了blur为true,则实现了平滑效果,简单不?其实这用了一个双缓存的技术,在zrender中有一个Layer对象,每一帧都会叠加上一帧的效果,并保存。具体的实现可以参阅zrender的Layer类,比较简单。

闪烁动画有点复杂,首先,怎么控制一个markPoint从大到小的这样一个线性变换的过程,动画类是如何控制的,另外对于不同的markPoint,有这么多点,同一帧下每个点对应的风格也不尽相同,这又是如何控制的。

首先,这要介绍一下zrender中的Animation类,一个非常好用强大的类,先看看使用代码,如下:

首先,这是一个when.js风格的使用方式,该动画主要用来控制effectShape的‘style’属性,即每一帧来对style属性进行更新。那更新什么内容呢?这就是clip对象了。

这里有四个when,再加上最上面的随机的初始大小,也就是说一个周期有5个控制点,其中clip1 = 100,而clip2 = 0,,这里对应的是该控制点对应markPoint的size的百分比。也就是在这个周期中,按照如下的插值算法来控制该点的size。不知道说清楚了没有,可以自己调试一下代码看看。

这是在一帧下插值计算当前size的百分比,这里采用的线性插值,还有其他多种算法可以选择,这里是size,所以用的最简单的线性插值,你也可以实现轨迹,或者加速度等不同的公式来实现对应的效果。

插值计算完了,付给对应的style中randomMap+i属性上。这里,一共常见了20个Animation类,这样就会有20个动画效果,来实现频率各自不同的闪烁效果。最后会调用zrender的refresh,最终来到Symbol的渲染阶段。这里,每一个点根据自己的索引选择对应的缩放比例percent,然后进入下面的绘制阶段。

另外,在对每一个点的渲染函数中,进行了进一步的优化,代码如下,根据大小进行了简化。

Ok,到此,我想到的关于MarkPoint的内容都已经完毕,另外这个类涉及到一个大规模点渲染,等有机会对这方面详细研究后在和大家分享。

原文发布于微信公众号 - LET(LET0-0)

原文发表时间:2016-01-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

在Python程序中设置函数最大递归深度

在函数调用时,为了保证能够正确返回,必须进行保存现场和恢复现场,也就是被调函数结束后能够回到主调函数中离开时的位置然后继续执行主调函数中的代码。这些现场或上下文...

812
来自专栏魂祭心

原 数学与多线程

2584
来自专栏HenCoder

HenCoder Android 自定义 View 1-6:属性动画(上手篇)

如果你没听说过 HenCoder,可以先看看这个: HenCoder:给高级 Android 工程师的进阶手册

982
来自专栏前端儿

表单input项使用label,同时引用Bootstrap库,导致input点击效果区增大

在移动平台页面的开发中,为了让表单项的可点区域变大而更好的操作,label可提供相应的便利。

911
来自专栏Android开发经验

属性动画实现控件类似贝塞尔曲线轨迹移动效果

922
来自专栏marsggbo

响应式布局简说

简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上,屏幕比较宽,就可以一行放2个Div。 到了手机上,或者Pad竖着拿的的时候,一行就...

1806
来自专栏Hongten

python开发_python中的module

在python中,我们可以把一些功能模块化,就有一点类似于java中,把一些功能相关或者相同的代码放到一起,这样我们需要用的时候,就可以直接调用了

684
来自专栏数说工作室

统计师的Python日记【第6天:数据合并】

本文是【统计师的Python日记】第6天的日记 回顾一下: 第1天学习了Python的基本页面、操作,以及几种主要的容器类型。 第2天学习了python的函数、...

3688
来自专栏xcywt

编译到底做了什么(***.c -> ***.o的过程)

 (第一次写博客,好激动的说.......) 我们知道,一个程序由源代码到可执行文件往往由这几步构成: 预处理(Prepressing)-> 编译(Compil...

1895
来自专栏我的python

python数据可视化之画箱形图

最近接到锅让画几个数据图。其实第一反应是用origin来画图,但问了一圈周围没有用Origin画过箱形图的,有些问题无法解决又百度不到。但好在略懂一点pytho...

9390

扫码关注云+社区