Merge pull request #920 from Deturium/site-20191104

docs: scatter demos

examples/scatter/default/demo/default.js

@@ -0,0 +1,47 @@
+import G6 from '@antv/g6';
+
+const data = {
+  nodes: [{
+    id: 'a',
+    x: 200,
+    y: 100,
+    style: { fill: '#F04864', stroke: null }
+  }, {
+    id: 'b',
+    x: 100,
+    y: 200,
+    style: { fill: '#FACC14', stroke: null }
+  }, {
+    id: 'c',
+    x: 300,
+    y: 200,
+    style: { fill: '#40a9ff', stroke: null }
+  }],
+  edges: [{
+    id: 'a2b',
+    source: 'a',
+    target: 'b'
+  }, {
+    id: 'a2c',
+    source: 'a',
+    target: 'c'
+  }]
+};
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  animate: true
+});
+
+graph.data(data);
+graph.render();
+
+setInterval(() => {
+  data.nodes.forEach(node => {
+    node.x += Math.random() * 50 - 25;
+    node.y += Math.random() * 50 - 25;
+  });
+  graph.changeData(data);
+}, 600);

examples/scatter/default/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "default.js",
+      "title": "默认动画",
+      "screenshot": "https://cdn.nlark.com/yuque/0/2019/gif/174835/1552996333072-ac3949af-c9ac-4351-9e06-8b4703127f7e.gif"
+    }
+  ]
+}

examples/scatter/default/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 默认动画
+order: 0
+redirect_from:
+  - /zh/examples
+---

examples/scatter/hover/demo/hover.js

@@ -0,0 +1,163 @@
+import G6 from '@antv/g6';
+
+const nodes = [];
+const edges = [];
+
+// 中心节点
+const centerNode = {
+  id: 'center',
+  x: 500,
+  y: 300,
+  shape: 'center-node',
+  size: 20
+};
+nodes.push(centerNode);
+// 左侧添加 4 个节点
+for (let i = 0; i < 4; i++) {
+  const id = 'left' + i;
+  nodes.push({
+    id,
+    x: 250,
+    y: (i + 1) * 100 + 50,
+    shape: 'leaf-node'
+  });
+  edges.push({ source: id, target: 'center', shape: 'can-running' });
+}
+// 右侧添加 6 个节点
+for (let i = 0; i < 6; i++) {
+  const id = 'right' + i;
+  nodes.push({
+    id,
+    x: 750,
+    y: i * 100 + 50,
+    shape: 'leaf-node'
+  });
+  edges.push({ source: 'center', target: id, shape: 'can-running' });
+}
+
+G6.registerNode('leaf-node', {
+  afterDraw(cfg, group) {
+    group.addShape('circle', {
+      attrs: {
+        x: 0,
+        y: 0,
+        r: 5,
+        fill: cfg.color || '#dee9ff'
+      }
+    });
+  },
+  getAnchorPoints() {
+    return [
+      [ 0, 0.5 ],
+      [ 1, 0.5 ]
+    ];
+  }
+}, 'circle');
+
+G6.registerNode('center-node', {
+  afterDraw(cfg, group) {
+    const r = cfg.size / 2;
+    group.addShape('circle', {
+      zIndex: -3,
+      attrs: {
+        x: 0,
+        y: 0,
+        r: r + 10,
+        fill: 'gray',
+        opacity: 0.4
+      }
+    });
+    group.addShape('circle', {
+      zIndex: -2,
+      attrs: {
+        x: 0,
+        y: 0,
+        r: r + 20,
+        fill: 'gray',
+        opacity: 0.2
+      }
+    });
+    group.sort();
+  },
+  getAnchorPoints() {
+    return [
+      [ 0, 0.5 ],
+      [ 1, 0.5 ]
+    ];
+  }
+}, 'circle');
+
+// lineDash 的差值，可以在后面提供 util 方法自动计算
+const dashArray = [
+  [ 0, 1 ],
+  [ 0, 2 ],
+  [ 1, 2 ],
+  [ 0, 1, 1, 2 ],
+  [ 0, 2, 1, 2 ],
+  [ 1, 2, 1, 2 ],
+  [ 2, 2, 1, 2 ],
+  [ 3, 2, 1, 2 ],
+  [ 4, 2, 1, 2 ]
+];
+const lineDash = [ 4, 2, 1, 2 ];
+const interval = 9;
+
+G6.registerEdge('can-running', {
+  setState(name, value, item) {
+    const shape = item.get('keyShape');
+    if (name === 'running') {
+      if (value) {
+        const length = shape.getTotalLength(); // 后续 G 增加 totalLength 的接口
+        let totalArray = [];
+        for (let i = 0; i < length; i += interval) {
+          totalArray = totalArray.concat(lineDash);
+        }
+        let index = 0;
+        shape.animate({
+          onFrame() {
+            const cfg = {
+              lineDash: dashArray[index].concat(totalArray)
+            };
+            index = (index + 1) % interval;
+            return cfg;
+          },
+          repeat: true
+        }, 3000);
+      } else {
+        shape.stopAnimate();
+        shape.attr('lineDash', null);
+      }
+    }
+  }
+}, 'cubic-horizontal');
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultNode: {
+    style: {
+      fill: '#82affc'
+    }
+  },
+  defaultEdge: {
+    style: {
+      stroke: '#b5b5b5'
+    }
+  }
+});
+graph.data({ nodes, edges });
+graph.render();
+graph.fitView();
+
+// 响应 hover 状态
+graph.on('node:mouseenter', ev => {
+  const node = ev.item;
+  const edges = node.getEdges();
+  edges.forEach(edge => graph.setItemState(edge, 'running', true));
+});
+graph.on('node:mouseleave', ev => {
+  const node = ev.item;
+  const edges = node.getEdges();
+  edges.forEach(edge => graph.setItemState(edge, 'running', false));
+});

examples/scatter/hover/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "hover.js",
+      "title": "状态切换",
+      "screenshot": "https://cdn.nlark.com/yuque/0/2019/gif/174835/1552996205932-45633abc-8ec1-4547-aa4d-fa55e1109cc6.gif"
+    }
+  ]
+}

examples/scatter/hover/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 状态切换
+order: 1
+redirect_from:
+  - /zh/examples
+---

examples/scatter/node/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "node.js",
+      "title": "节点动画",
+      "screenshot": "https://cdn.nlark.com/yuque/0/2019/gif/174835/1552996271257-d5a8b333-ea97-4cb4-9a0e-400ec36db6c7.gif"
+    }
+  ]
+}

examples/scatter/node/demo/node.js

@@ -0,0 +1,179 @@
+import G6 from '@antv/g6';
+
+const Util = G6.Util;
+const data = {
+  nodes: [{
+    id: 'node1',
+    x: 100,
+    y: 100,
+    shape: 'circle-animate',
+    size: 20,
+    label: '图形动画',
+    labelCfg: {
+      position: 'top'
+    }
+  }, {
+    id: 'node2',
+    x: 300,
+    y: 200,
+    shape: 'background-animate',
+    color: '#40a9ff',
+    size: 20,
+    label: '背景动画',
+    labelCfg: {
+      position: 'left',
+      offset: 10
+    }
+  }, {
+    id: 'node3',
+    x: 400,
+    y: 100,
+    size: [ 40, 40 ],
+    shape: 'inner-animate',
+    img: 'data:image/webp;base64,UklGRq4FAABXRUJQVlA4IKIFAABwHwCdASo8ADwAPiEMhEGhhv6rQAYAgS2NHsdCq/4D8AOoA64OEUAj/XPxVwyvRGvyO/gGxN/t3oK/1X6zesX3L/p/RP/2HCgKAB9AGeAbCB+AGwAbQBtA/8c/m/4PYHTonm+SzRH6B9sv2i/rOZC+G/ln9l/ML/GdoD7APcA/TD+09QDzAfrX+vHYM9AD+Uf0zrAPQA/bH0vv2t+CH9qf2R+A39e6X098/I7IAcLcs8Gjmc/9T7gPbX9H+wJ+rPVV9En9ZmBI5oUiYhkYHIVjRr9hzCTPcV5Rs/wjjIHkxPgtr/3ALZSuUm146HHwqQVA23hnnqH/4aJ/k4v4hU6RBZ0AAAD+//8ARPyL9yWIlAbWBAD0oKSqlYWreuRa3Oj02u+TvSQS8iwMYewUYTWLDNp9wOlFJaWnqE+za35UwUXuDAT6T0I4fwY+u+qrRVhl+S1ir4X7BQiNswug5AX+MjQcXEeUwfSIEUT+DFPCr+BUiwTbFxLni7fv61vRbmXoauLz4tiqOFTzEGP8tNXP5+H7mZVGfNjIxapT3FGUtqBdp/SD5cTOYOkn2fawkpqpCSqf2+CfiGWtIF673fEzlk/hIbWDhQ81C/ddxLn609d/5efckbdZ8HZbhhVmM82/Uat7CFmw1SH5xCxRxEEhjpf1EP1Xn5q9VZfm1+OFTab/MN67Xha8K//5oVBlMgZALE653X0fas/+2xMqiyCu5Wa7PHsCwbBwqROfNmzi4LPOTjkFPHVKDD1Nfj4/sul6cANdF68rf2jszlyZsUUoLTP7H3swSroc3ssNXSRVAcYd7+iBZpfoAYWvKgnr+Hv62fHZX5ZbjYbYzVjq6fsXkubto858NuUx4+ILb5y7dP6W3/IYVeUSF0yZseKIZhOMs9BBf5uB2Y3Ott//+1OG7hYINzcqigrzWAOJbSmVw3G0ULywkobx+rvfk8VmZFzQGgP/+4T74mp/vsZyM1NLguiTO2gNO05tcpXwveq5mrcweXrJ/bRZDmU2KBrnXhkXq+735c+UHTFq4h4jMOPm5shKioB6XaqhUf3DJlMg8937g/SKjrgD0H5sNm0/k4FfilBbcrsjc3dd6cwEYJo3CNhe3SpNJ2geNXyV4/hq/BZXZ1kiVknjmf5cUx7Tv/9Sb+fQ/DgAsRNSz1wiVodiLjP7aVrkxbWx5gJ8U/j0o1Ipm/nyDZRPrQXmbPAcy1eDDejxTDBKe42ElHpC2QlFdhOedsp4i9QVjt8EqWGy1YzPaGqZhCVg/LWt8/+4BmiCzNGtpR21MGJf4kI/n/1sbe36e1QBCBAx4EVfTM82ZM2lh0P189e7eY0A3NzXWVrUek8SEn+DYYCQeEaC5hDHGreFHT1baY6KyrFx3G9oMm3fLrCqmNjFRnZa3LB/5m8FgCpq9B/1OCLRE5GzVTZnVzj/4V38PgCIpX16Kznijf01+MkDeS9oCF2hEXQ9tr+mPLrjGy4Cg5fyLgyCj1fUq33nMf79Svli2h83m3gqkoxJcXvBetFQP8V/gRjBNGmFXK5TfwLhbolWEjDqUGK3n+hxzQLif9zreYO88EIRTUNbzE1/Sn7rBEtjB0uawNje5OubWsB62SOlMZoZpxrDbMb4UvQrODPhSafmhcYe9zm/dHxssMfUthhDKjyMhoRhngPjbzfGXmIV2Omgrn/zbefK/PawUGSH6x4Qk4HCN4/X8S+XCf51JJtOQeHST/yfwg69uMkE07SONnhGUrL6j5oQn6JI+zkaH/H/P/Ti/pfOTfAWxQNiMvWX08mqbuUweFSQ/G5YUP/uCvZAXutf1+Nhl2jj/n4/fPOihPjwvfFnnjOaQvs9PSpF33d+396LASZ3IID/4UP4pf9eOMXw82ccoUUUHX6MfBWyBDvARCrdPmerUwKwW+lBIAe1dsAAAA==',
+    label: '图片动画',
+    labelCfg: {
+      position: 'right'
+    }
+  }, {
+    id: 'node4',
+    x: 300,
+    y: 300,
+    shape: 'rect',
+    label: '无动画',
+    labelCfg: {
+      position: 'bottom'
+    }
+  }],
+  edges: [{
+    source: 'node1',
+    target: 'node2'
+  },
+  {
+    source: 'node3',
+    target: 'node2'
+  },
+  {
+    source: 'node2',
+    target: 'node4'
+  }
+  ]
+};
+
+// 缩放动画
+G6.registerNode('circle-animate', {
+  afterDraw(cfg, group) {
+    const shape = group.get('children')[0];
+    shape.animate({
+      repeat: true,
+      onFrame(ratio) {
+        const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;
+        return {
+          r: cfg.size / 2 + diff
+        };
+      }
+    }, 3000, 'easeCubic');
+  }
+}, 'circle');
+
+// 背景动画
+G6.registerNode('background-animate', {
+  afterDraw(cfg, group) {
+    const r = cfg.size / 2;
+    const back1 = group.addShape('circle', {
+      zIndex: -3,
+      attrs: {
+        x: 0,
+        y: 0,
+        r,
+        fill: cfg.color,
+        opacity: 0.6
+      }
+    });
+    const back2 = group.addShape('circle', {
+      zIndex: -2,
+      attrs: {
+        x: 0,
+        y: 0,
+        r,
+        fill: cfg.color,
+        opacity: 0.6
+      }
+    });
+    const back3 = group.addShape('circle', {
+      zIndex: -1,
+      attrs: {
+        x: 0,
+        y: 0,
+        r,
+        fill: cfg.color,
+        opacity: 0.6
+      }
+    });
+    group.sort(); // 排序，根据 zIndex 排序
+    back1.animate({ // 逐渐放大，并消失
+      r: r + 10,
+      opacity: 0.1,
+      repeat: true // 循环
+    }, 3000, 'easeCubic', null, 0); // 无延迟
+    back2.animate({ // 逐渐放大，并消失
+      r: r + 10,
+      opacity: 0.1,
+      repeat: true // 循环
+    }, 3000, 'easeCubic', null, 1000); // 1 秒延迟
+    back3.animate({ // 逐渐放大，并消失
+      r: r + 10,
+      opacity: 0.1,
+      repeat: true // 循环
+    }, 3000, 'easeCubic', null, 2000); // 2 秒延迟
+  }
+}, 'circle');
+
+// 图片动画
+G6.registerNode('inner-animate', {
+  afterDraw(cfg, group) {
+    const size = cfg.size;
+    const width = size[0] - 12;
+    const height = size[1] - 12;
+    const image = group.addShape('image', {
+      attrs: {
+        x: -width / 2,
+        y: -height / 2,
+        width,
+        height,
+        img: cfg.img
+      }
+    });
+    image.animate({
+      onFrame(ratio) {
+        const matrix = Util.mat3.create();
+        const toMatrix = Util.transform(matrix, [
+          [ 'r', ratio * Math.PI * 2 ]
+        ]);
+        return {
+          matrix: toMatrix
+        };
+      },
+      repeat: true
+    }, 3000, 'easeCubic');
+  }
+}, 'rect');
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  defaultNode: {
+    style: {
+      fill: '#82affc'
+    }
+  },
+  defaultEdge: {
+    style: {
+      lineWidth: 1,
+      stroke: '#b5b5b5'
+    }
+  }
+});
+graph.data(data);
+graph.render();

examples/scatter/node/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 节点动画
+order: 2
+redirect_from:
+  - /zh/examples
+---

examples/scatter/position/demo/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "position.js",
+      "title": "自定义动画",
+      "screenshot": "https://cdn.nlark.com/yuque/0/2019/gif/174835/1552996388492-f63d0b8e-8ff6-4136-9531-33f4a98f07a6.gif"
+    }
+  ]
+}

examples/scatter/position/demo/position.js

@@ -0,0 +1,57 @@
+import G6 from '@antv/g6';
+
+const r = 50;
+const radius = Math.PI;
+
+const graph = new G6.Graph({
+  container: 'container',
+  width: 500,
+  height: 500,
+  animate: true,
+  animateCfg: {
+    duration: 1000,
+    onFrame(node, ratio, toAttrs, fromAttrs) {
+      const current = radius * ratio;
+      let x = fromAttrs.x;
+      let 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, y };
+    }
+  }
+});
+
+// 加入两个节点
+const node1 = graph.addItem('node', {
+  id: 'node1',
+  x: 100,
+  y: 100,
+  shape: 'circle',
+  style: { fill: '#F04864', lineWidth: 0 }
+});
+const node2 = graph.addItem('node', {
+  id: 'node2',
+  x: 200,
+  y: 100,
+  shape: 'circle',
+  style: { fill: '#40a9ff', lineWidth: 0 }
+});
+
+// 循环动画
+let count = 0;
+setInterval(() => {
+  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);

examples/scatter/position/index.zh.md

@@ -0,0 +1,6 @@
+---
+title: 自定义动画
+order: 3
+redirect_from:
+  - /zh/examples
+---

site/pages/index.zh.tsx

@@ -10,7 +10,7 @@ import BannerSVG from '@antv/gatsby-theme-antv/site/components/BannerSVG';
 const IndexPage = () => {
   const { t, i18n } = useTranslation();
 
-  const coverImage = BannerSVG();
+  const coverImage = <BannerSVG />;
 
   const features = [
     {
@@ -141,4 +141,4 @@ const IndexPage = () => {
   );
 };
 
-export default IndexPage;
+export default IndexPage;