JavaScript is required

展开/收缩 时动画效果2

带有自定义效果的高级展开动画

演示增强的展开/折叠动画,包含其他视觉效果和自定义过渡。

带有自定义效果的高级展开动画

功能概述

此示例演示增强的展开/折叠动画,除基本实现外还包含其他视觉效果和过渡。

核心特性实现

增强的动画计时

控制动画持续时间和缓动:

graphInstance.enableCanvasAnimation();
// 执行展开/折叠操作
await graphInstance.sleep(500);
graphInstance.disableCanvasAnimation();

自定义过渡

在展开/折叠期间添加自定义视觉效果:

const onNodeExpand = async (node: RGNode) => {
    // 添加自定义动画逻辑
    await graphInstance.enableCanvasAnimation();
    // ... 展开逻辑
};

创意使用场景

  • 演示:戏剧性地揭示复杂层级
  • 教育工具:逐步探索概念
  • 数据发现:通过大数据集的引导导航
  • 交互式故事:渐进式信息披露
  • 游戏 UI:带有打磨的技能树或科技树