,,,,,MarkPoint是什么效果?如上图,一闪一闪亮晶晶的效果,这是在Echarts中对应的效果。我最早看到的是腾讯的一个Flash的版本,显示当前QQ在线人数的全国分布效果,感觉效果很炫,当时也在想,怎么用JS, HTML5来做出类似的效果,但说实话,没什么思路,甚至怀疑JS是否做不出来这种逼真的效果来。终于看到Echarts中提供了这个功能。下面就扒开她绚丽的衣着,一起走进MarkPoint的世界。
<强>数据
,,,,,首先还是先看看数据上的逻辑。上图是一个数据格式,placeList包括每一个关键点的名称和坐标位置,而在风格中主要有名字,可以设置为强中弱三种,分别对应MarkPoint图中白蓝绿三种效果,类型是中国地图,而具体的风格在存储在MarkPoint字段中。我们在看看MarkPoint字段里面是什么内容。
,,,,,如上就是markPoint里面的主要内容,这里,每一个点是一个钻石(钻石)的样式,符号大小,还有一个效果的属性,这就是它的动画风格,而数据则用来加载placeList的信息。
,,,,,综上所述,对于使用者而言,指定好要显示markPoint的位置,也就是placeList,然后在赋予它们的具体效果,中国范围,强弱类型以及具体的形状(钻石,矩形或圆形等),这样就可以得到markPoint这样的闪烁效果。
<强>原理
,,,,,其实说原理有点夸大其词。通过数据层面,可以看出来每一个点都是独立的,如果你放大后,基本可以判断出来各自完成自己的动画效果,并一致循环下去。如果缩小后,你会发现所有的markPoint并不是同步的,频率各不相同,显得杂乱无章。(推荐TED的视频:伟大的设计的第一秘诀-托尼法德尔- TED演讲)。
,,,,,这样,这个问题就分解成了两个部分:
如何模拟每一个点的闪烁效果
<李>如何管理大规模的点的闪烁周期
<编辑><强>闪烁效果的实现
,,,,,如上,是同一个markPoint在不同帧下的效果,大家可以想想一下这样一个从小到大然后再到小的过程,则完成了闪烁的效果,如果你足够细心会发现里面有一个模糊的平滑效果,这样会让闪烁有一个平滑的效果,类似字体的抗锯齿,看起来有一种朦胧的感觉。当然,模糊这个效果是怎么实现的?其实在之前风向图和热点图中都采用了这个技术,就是和上一帧的图片进行一个半透明的叠加,然后在配合一个动画特效(动画效果),闪烁的效果就完成了。
<强>多点闪烁动画的实现
,,,,,如上是在某一帧的截的图。俗话说的好,一花独放不是春,所以如何控制这么多的点,风格各不相同的markPoint,而且频率各不相同,这就涉及到动画类和随机数之间的内容,同时在框架上能够贯穿整个渲染周期。
,,,,,我们看一下在Echarts上的流程,先是初始化的流程:
,,,,,如同,MarkPoint的数据初始化主要的是地图类读取数据,然后在基地中调用getLargeMarkPointShape来创建这些点。
,,,,,在基地中,调用animationEffect指定单个MarkPoint的闪烁风格,这里需要额外说明一下,虽然在数据中动画风格只是简单的显示:真的。但实际上,最终是采用的配置。js中默认的动画风格,比如周期,是否循环,跳动等,如下图所示:
,,,,,而在ecEffect中,调用largePoint来随机设置,实现各自不同的动画周期。从而完成整改初始化的过程。
,,,,,初始化结束后,则进入到了渲染阶段。渲染是采用的zrender框架,而markPoint则是由动画来驱动,每一帧都会调用更新、在帧中来设置每一个点当前的状态,比如大小,根据时间周期下,线性插值计算出它应该的大小(下面会详细说明),最后调:用符号:buildPath实现所有markPoint的闪烁效果。
,,,,,这就是初始化准备和渲染周期的大致一个过程,下面对主要功能模块进行介绍
