展开/收缩 时动画效果2
带有自定义效果的高级展开动画
演示增强的展开/折叠动画,包含其他视觉效果和自定义过渡。
带有自定义效果的高级展开动画
功能概述
此示例演示增强的展开/折叠动画,除基本实现外还包含其他视觉效果和过渡。
核心特性实现
增强的动画计时
控制动画持续时间和缓动:
graphInstance.enableCanvasAnimation();
// 执行展开/折叠操作
await graphInstance.sleep(500);
graphInstance.disableCanvasAnimation();
自定义过渡
在展开/折叠期间添加自定义视觉效果:
const onNodeExpand = async (node: RGNode) => {
// 添加自定义动画逻辑
await graphInstance.enableCanvasAnimation();
// ... 展开逻辑
};
创意使用场景
- 演示:戏剧性地揭示复杂层级
- 教育工具:逐步探索概念
- 数据发现:通过大数据集的引导导航
- 交互式故事:渐进式信息披露
- 游戏 UI:带有打磨的技能树或科技树