[发明专利]分页展示及页间动画的可视化设计方法

说明书

本发明涉及一种分页展示及页间动画的可视化设计方法，包括以下步骤:步骤1，新建模板,根据数据和场景的分解情况新建多个页面；步骤2，设计每个页面中的组件以及页面的整体布局；步骤3，通过给不同页面的组件指定相同的名字使不同页面的组件成为关联组件；步骤4，发布和预览模板，其中，对于关联组件在页面切换时采用平滑过渡动画进行过渡，对于非关联组件在页面切换时采用预先给组件设置的出现和消失动画进行过渡。本发明的有益之处在于，具有较好的展示效果。

技术领域

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

背景技术

企业有对于复杂数据或者复杂场景的可视化展示需求时，无论是用可视化的报表/BI工具，还是原始的前端技术(HTML,JavaScript,CSS)，都需要单独制作多个独立页面，来表现数据之间的关联关系以及故事场景的推进。

传统的分页展示方式视觉效果不好，单个页面的效果都比较独立，无法展示页面间数据的变化，对于复杂数据和复杂场景的展示效果不好。

发明内容

本发明的目的在于提供一种分页展示及页间动画的可视化设计方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：

一种分页展示及页间动画的可视化设计方法，包括以下步骤:

步骤1，新建模板,根据数据和场景的分解情况新建多个页面；

步骤2，设计每个页面中的组件以及页面的整体布局；

步骤3，通过给不同页面的组件指定相同的名字使不同页面的组件成为关联组件；

步骤4，发布和预览模板，其中，对于关联组件在页面切换时采用平滑过渡动画进行过渡，对于非关联组件在页面切换时采用预先给组件设置的出现和消失动画进行过渡。

作为本发明进一步的方案：当关联组件的每个属性都能一一对应时，则称关联组件为同类型组件；

同类型组件的平滑过渡动画即为初始态组件的单个属性分别以平滑过渡动画的方式到最终态组件的对应属性。

作为本发明进一步的方案：当关联组件不能被定义为同类型组件时，将关联组件抽象为大小和位置两个属性；当组件A(s0,p0)过渡到组件B(s1,p1)时，平滑过渡动画按照如下逻辑执行：

s1 = α(s0)

p1 = β(p0)

(其中α，β均为缓动函数，s为大小，p为位置)。

作为本发明进一步的方案：组件A(s0,p0)有一个透明度从1到0的变化，组件B(s1,p1)有一个透明度从0到1的变化。

作为本发明进一步的方案：对于同类型组件，页面切换的时候，实现dom结点的复用，避免重复地创建或删除dom节点。

作为本发明进一步的方案：模板内所有页面共享组件池，组件池实现资源的后台预加载，以及切换页面的时候组件实例的共享的功能。

作为本发明进一步的方案：同一页面内的组件的名字唯一。

作为本发明进一步的方案：新建多个页面后可以对页面进行复制、删除以及拖拽调整页面的顺序的操作；对页面进行操作不触发对数据源的查询操作和对页面的渲染。

作为本发明进一步的方案：在步骤2中，针对每个页面单独设计可视化内容；

设计可视化内容包括：选择可视化组件，配置数据、样式和交互功能，调整组件位置和大小，以及单独的出现和消失动画。