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的内容都已经完毕,另外这个类涉及到一个大规模点渲染,等有机会对这方面详细研究后在和大家分享。

数据可视化之MarkPoint的更多相关文章

  1. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. Echarts数据可视化series-scatter散点图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  4. Echarts数据可视化series-pie饼图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. Echarts数据可视化series-map地图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  6. Echarts数据可视化series-line线图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. Echarts数据可视化series-heatmap热力图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. Echarts数据可视化series-graph关系图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  9. Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

随机推荐

  1. Source Map入门教程

    部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...

  2. MSTP多实例的配置

    MSTP多实例的配置 这次实验主要是为了加强对stp生成树协议中,RP(根端口),DP(指定端口),AP(阻塞端口)的判断方法:虽然很多时候不需要我们人工判断,因为当我们吧所有的配置好之后,然后开启生 ...

  3. ehcache memcache redis 区别

    之前用过redis 和 memcache ,没有ehcache 的开发经验,最近也查阅不少文档和博客,写一些总结,也有不少内容总结与诸多博客中的博主总结:  Ehcache EhCache 是一个纯J ...

  4. 10分钟精通SharePoint - SharePoint升级

    类型: b2b(安装更新)和v2v(跨版本升级) 内容:二进制文件和数据库 过程:   升级前检查 - 检查场内数据,配置和自定义等等 升级准备和计划 - 根据需要和升级检查制定相应计划和准备工作   ...

  5. Java基础——深入理解Java中的final关键字(转载)

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...

  6. 首个写博客的Android任务

    任务1 单击按钮图片选择器 使用TextView,RadioGroup,RadioButton完成. 设置单击按钮选择显示花朵. 首先设置了页面布局 <LinearLayout xmlns:an ...

  7. 头文件limits—各个类型的数据的范围

    要想知道各个类型的数据如int.float.double.long等所能表示的范围,可以加上头文件<limits>,这些类型的范围都在类numeric_limits中定义了的. 类模板:t ...

  8. linux 安装sysstat使用iostat、mpstat、sar、sa

    使用yum安装 #yum install sysstat sysstat的安装包是:sysstat-5.0.5-1.i386.rpm,装完了sysstat-5.0.5-1.i386.rpm后 就会有i ...

  9. pyqt样式表语法笔记(上) --原创

    pyqt样式表语法笔记(上) pyqt QSS python 样式表 因为软件课设的原因开始学习使用pyqt4,才发现原来它也有样式表,而且语法跟css基本相同,而且一些功能实现起来感觉比js要简单方 ...

  10. nginx错误记录

    症状: 安装phpBB3.1的最后一步完成安装之后,注册用户,浏览器崩溃.localhost的所有页面都打不开同时没有响应. Trace: 虽然打开了nginx.exe,但是进程中未发现服务. 重新电 ...