分页展示及页间动画的可视化设计方法与流程

1.本发明涉及一种分页展示及页间动画的可视化设计方法。


背景技术：

2.企业有对于复杂数据或者复杂场景的可视化展示需求时，无论是用可视化的报表/bi工具，还是原始的前端技术(html,javascript,css)，都需要单独制作多个独立页面，来表现数据之间的关联关系以及故事场景的推进。
3.传统的分页展示方式视觉效果不好，单个页面的效果都比较独立，无法展示页面间数据的变化，对于复杂数据和复杂场景的展示效果不好。


技术实现要素：

4.本发明的目的在于提供一种分页展示及页间动画的可视化设计方法，以解决上述背景技术中提出的问题。
5.为实现上述目的，本发明提供如下技术方案：一种分页展示及页间动画的可视化设计方法，包括以下步骤:步骤1，新建模板,根据数据和场景的分解情况新建多个页面；步骤2，设计每个页面中的组件以及页面的整体布局；步骤3，通过给不同页面的组件指定相同的名字使不同页面的组件成为关联组件；步骤4，发布和预览模板，其中，对于关联组件在页面切换时采用平滑过渡动画进行过渡，对于非关联组件在页面切换时采用预先给组件设置的出现和消失动画进行过渡。
6.作为本发明进一步的方案：当关联组件的每个属性都能一一对应时，则称关联组件为同类型组件；同类型组件的平滑过渡动画即为初始态组件的单个属性分别以平滑过渡动画的方式到最终态组件的对应属性。
7.作为本发明进一步的方案：当关联组件不能被定义为同类型组件时，将关联组件抽象为大小和位置两个属性；当组件a(s0,p0)过渡到组件b(s1,p1)时，平滑过渡动画按照如下逻辑执行：s1 = α(s0)p1 = β(p0)(其中α，β均为缓动函数，s为大小，p为位置)。
8.作为本发明进一步的方案：组件a(s0,p0)有一个透明度从1到0的变化，组件b(s1,p1)有一个透明度从0到1的变化。
9.作为本发明进一步的方案：对于同类型组件，页面切换的时候，实现dom结点的复用，避免重复地创建或删除dom节点。
10.作为本发明进一步的方案：模板内所有页面共享组件池，组件池实现资源的后台预加载，以及切换页面的时候组件实例的共享的功能。
11.作为本发明进一步的方案：同一页面内的组件的名字唯一。
12.作为本发明进一步的方案：新建多个页面后可以对页面进行复制、删除以及拖拽调整页面的顺序的操作；对页面进行操作不触发对数据源的查询操作和对页面的渲染。
13.作为本发明进一步的方案：在步骤2中，针对每个页面单独设计可视化内容；设计可视化内容包括：选择可视化组件，配置数据、样式和交互功能，调整组件位置和大小，以及单独的出现和消失动画。
14.作为本发明进一步的方案：在步骤4中，可以用浏览器打开模版链接后预览模板，可视化内容以多页的形式分别展示，用户可以进行页面间的随意切换跳转。
15.与现有技术相比，本发明的有益效果是：具有较好的展示效果。
16.在可视化大屏设计中，提供了分页设计以及对应的平滑过渡，解决了过多的数据种类的展示问题。不同页面之间的组件可以进行数据关联，展示在不同页面之间的数据变化，使得数据的变化展示更加生动。同时通过平滑过渡动画的方式关联了不同页面上的关联数据，串联起了数据故事，加深了预览者对数据的理解和记忆。
17.以复杂数据和复杂场景（而非单个页面）作为设计的基本单位，在优化组件动画以及dom更新的性能的基础上，通过特别设计的视觉效果，使制作者能够快速且准确地表达数据和场景。
附图说明
18.图1是一种分页展示及页间动画的可视化设计方法的流程图。
具体实施方式
19.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
20.请参阅图1，本发明实施例中，一种分页展示及页间动画的可视化设计方法，包括以下步骤:步骤1，新建模板,根据数据和场景的分解情况新建多个页面；步骤2，设计每个页面中的组件以及页面的整体布局；步骤3，通过给不同页面的组件指定相同的名字使不同页面的组件成为关联组件；步骤4，发布和预览模板，其中，对于关联组件在页面切换时采用平滑过渡动画进行过渡，对于非关联组件在页面切换时采用预先给组件设置的出现和消失动画进行过渡。
21.作为一种具体的实施方式，在步骤1中，新建多个页面后可以对页面进行复制、删除以及拖拽调整页面的顺序的操作。若页面数目较多，则会出现一个横向滚动条以帮助用户快速定位到某一页面。
22.作为一种优选的实施方式，对页面进行操作不触发对数据源的查询操作和对页面的渲染。对于每一步的页面操作，既不触发对数据源的查询操作又不触发对页面的渲染，操作流畅。
23.作为一种具体的实施方式，在步骤1中，可以通过finereport报表工具，新建模板
并选择对应的画布大小。
24.作为一种具体的实施方式，在步骤2中，可以针对每个页面单独设计可视化内容。
25.设计可视化内容包括：选择可视化组件，配置数据、样式和交互功能，调整组件位置和大小，以及单独的出现和消失动画。
26.新建多个可视化组件后，设置每个组件的布局和位置组成可视化页面。可视化组件包括：三维地图、三维城市等三维组件，柱形图、折线图、面积图等分析图表类型，图片、文字、监控视频等多媒体类型，轮播组件、网页框等容器组件。每个组件可以单独设置自己的出现和消失动画。
27.作为一种具体的实施方式，在步骤3中设置关联组件。
28.同一页面内的组件的名字唯一。即同一页面内的组件的名字不能重复。在每个组件创建的时候会被指定一个默认的名字，这个名字可以被修改。但是在当前页面内的组件的名字不能重复，即当给组件重命名时，如果该名字在当前页面已经存在，则重命名操作失败。
29.通过给不同页面的组件指定相同的名字，可以使二者成为关联组件。预览时，关联的组件在页面切换时会采用平滑过渡动画进行过渡；如果不是关联组件，则采用给组件设置的出现和消失动画进行过渡。
30.作为一种具体的实施方式，在步骤4中，用户可以发布制作好的模板。点击保存后，在对应的目录下保存该模板文件。浏览器输入对应的链接地址访问时，服务器会解析模板文件，并将解析后的结果返回至浏览器端。在步骤4中，可以用浏览器打开模版链接后预览模板，可视化内容以多页的形式分别展示，用户可以进行页面间的随意切换跳转。
31.页面切换时，如果检测到页面间有相同名字的组件(即关联组件)，则关联组件采用平滑过渡动画进行过渡。
32.作为一种优选的实施方式，当关联组件的每个属性都能一一对应时，则称关联组件为同类型组件。同类型组件的平滑过渡动画即为初始态组件的单个属性分别以平滑过渡动画的方式到最终态组件的对应属性。
33.举例说明，可以通过圆心、半径和颜色三个属性来定义一个圆形组件。在第一个页面中有一个圆形组件a(d0,r0,c0)。在第二个页面中有一个圆形组件b(d1,r1,c1)。圆形组件a(d0,r0,c0)和圆形组件b(d1,r1,c1)为关联组件。当从第一个页面切换到第二个页面时，组件的平滑过渡动画按照如下逻辑执行：d1 = α(d0)r1 = β(r0)c1 = γ(c0)(其中α，β，γ均为缓动函数，d为圆心，r为半径，c为颜色)。
34.作为一种优选的实施方式，当关联组件不能被定义为同类型组件时，将关联组件抽象为大小和位置两个属性；当组件a(s0,p0)过渡到组件b(s1,p1)时，平滑过渡动画按照如下逻辑执行：s1 = α(s0)p1 = β(p0)(其中α，β均为缓动函数，s为大小，p为位置)。
35.具体而言，组件a(s0,p0)有一个透明度从1到0的变化，组件b(s1,p1)有一个透明度从0到1的变化。通过透明度的变化使过渡更加顺畅。
36.作为一种优选的实施方式，模版内所有页面共享组件池，组件池实现了资源的后台预加载，以及频繁切换页面的时候组件实例的共享的功能。
37.作为一种优选的实施方式，对于同类型组件，页面切换的时候，实现了dom结点的复用，避免重复地创建/删除dom节点。
38.如果检测到页面间没有关联组件，则页面消失时，各个组件按照设置的消失动画消失；页面出现时，各个组件按照设置的出现动画出现。
39.出现和消失动画包括：淡入，移入（从左，从右，从上，从下），淡出，移出（从左，从右，从上，从下），飞入，飞出，百叶窗等。
40.对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
41.此外，应当理解，虽然本说明书按照实施方式加以描述，但并非每个实施方式仅包含一个独立的技术方案，说明书的这种叙述方式仅仅是为清楚起见，本领域技术人员应当将说明书作为一个整体，各实施例中的技术方案也可以经适当组合，形成本领域技术人员可以理解的其他实施方式。