Question

问题：我需要实现点动画动画。例如（file data.json）：

{
  "nodes": [
    {
      "id": "n0",
      "label": "A node",
      "x": 4,
      "y": 4,
      "path" : [ [ 40, 40 ], [ 40, 60, 3000 ], [ 4, 4, 4000 ] ],
      "size": 3
    }
  ]
}

这里定义了图的节点，字段path用于定义路径。每个元素包含要移动的坐标，第三个是动画的持续时间。

我写了以下代码：

<html>
<head>
<style type="text/css">
    #container {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>
</head>
<body>
<div id="container"></div>
<script src="lib/sigma/sigma.min.js"></script>
<script src="lib/sigma/plugins/sigma.parsers.json.min.js"></script>
<script src="lib/sigma/plugins/sigma.plugins.animate.min.js"></script>
<script>
    sigma.parsers.json('data.json', {
        container: 'container',
        settings: {
            defaultNodeColor: '#ec5148',
            zoomMin: 0.001,
            minNodeSize: 1,
            maxNodeSize: 5,
            minEdgeSize: 1,
            maxEdgeSize: 1
        }
    }, function(s) {
        s.graph.nodes().forEach( function (node) {
            animate_path( s, node );
        });
    } );

    function animate_path( sigma, node )
    {
        if (typeof node.path_it === 'undefined')
            node.path_id = 0;
        else
            duration = node.path[ node.path_it ][0];

        console.log( node.path );

        node.target_x = node.path[ node.path_id ][0];
        node.target_y = node.path[ node.path_id ][1];

        sigma.plugins.animate(
            sigma,
            {
                x: "target_x",
                y: "target_y"
            },
            {
                nodes: [ node.id ],
                duration: 300,
                onComplete: function() {
                    node.path_it += 1;
                    animate_path( sigma, node );
                }
            }
        )
    }
</script>
</body>
</html>

但是当我在firefox中发布页面时，我得到TypeError: sigma.plugins is undefined（在函数animate_path中）并且没有动画

功能没看到sigma.plugins（Javascript）

0 个答案: