自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<script>
  var r = 50;
  var radius = Math.PI;
  var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    animate: true,
    animateCfg: {
      duration: 1000,
      onFrame: function onFrame(node, ratio, toAttrs, fromAttrs) {
        var current = radius * ratio;
        var x = fromAttrs.x;
        var y = fromAttrs.y;
        if (fromAttrs.x > toAttrs.x) {
          x = x - r + r * Math.cos(current);
          y += r * Math.sin(current);
        } else {
          x = x + r - r * Math.cos(current);
          y -= r * Math.sin(current);
        }
        return {
          x: x,
          y: y
        };
      }
    }
  });
  var node1 = graph.addItem('node', {
    id: 'node1',
    x: 100,
    y: 100,
    shape: 'circle',
    style: {
      fill: '#F04864',
      lineWidth: 0
    }
  });
  var node2 = graph.addItem('node', {
    id: 'node2',
    x: 200,
    y: 100,
    shape: 'circle',
    style: {
      fill: '#40a9ff',
      lineWidth: 0
    }
  });
  var count = 0;
  setInterval(function() {
    var model = node1.get('model');
    if (count % 2 === 0) {
      node1.get('model').x = 200;
      node2.get('model').x = 100;
    } else {
      node1.get('model').x = 100;
      node2.get('model').x = 200;
    }
    count++;
    graph.refresh();
  }, 1000);
</script>
</body>
</html>

树图

一般图

其他表达形式

元素

交互

动画

辅助工具

复杂案例