分页平滑过渡
1. 概述
1.1 应用场景
分页平滑过渡通过提供流畅的视觉效果和自然的数据展示,增强了用户体验,使得仪表板的分页切换更加自然流畅。
1.2 功能介绍
仪表板包含多个分页时,可设置分页间过渡效果。开启「平滑过渡」后,上一页与当前页中同名组件将有平滑移动的效果。
2. 应用说明
2.1 生效机制
1)A 页面和 B 页面相邻,或 A 页面通过分页跳转事件可直接跳转到 B 页面,且 A 页面和 B 页面中存在 名称完全一致 的组件。
- 如需从 A 页面平滑过渡到 B 页面,则开启 B 页面的「平滑过渡」按钮。
- 如需从 B 页面平滑过渡到 A 页面,则开启 A 页面的「平滑过渡」按钮。
2)如果上一页与当前页存在「同名称的组件」,转场动效将有移动转场效果,但上一页中该组件的「组件动画」将失效。
2.2 设置按钮
选中需要设置「平滑过渡」效果的页面,点击配置栏的「过渡」按钮,开启「平滑过渡」按钮,设置过渡时间即可。
注:若两个同名组件的类型不同,可能会对组件内容中的动画产生影响。
2.3 效果示例
2.3.1 组件位置平滑过渡
页面1 和 页面2 中有一个相同的饼图组件,仅位置不同,其平滑过渡效果如下图所示:
2.3.2 组件数据平滑过渡
页面 1 中有一个条形图,页面 2 中有一个柱形图,组件名称均为「示例组件」,位置相同,数据不同。其平滑过渡效果如下图所示:
2.3.3 组件位置和数据同时平滑过渡
页面 1 中有一个条形图,页面 2 中有一个柱形图,组件名称均为「示例组件」,位置不同,数据不同。其平滑过渡效果如下图所示: