hightopo学习之旅一 -- 节点动画

参照官网 动画手册

1、引入所需HT文件

<script src="plugins/ht/core/ht.js"></script>
<script src="plugins/ht/plugin/ht-animation.js"></script>

 

2、写入基础代码

function init() {
    var graph = new ht.graph.GraphView(),     // 拓扑图形组件
          dm = graph.dm(),                              // 数据容器
          view = graph.getView();                     // 最根层都为一个 div 组件，可通过组件的getView()函数获得，默认和自定义交互事件监听一般添加在该div上(getView().addEventListener(type ,func, false))，渲染层一般由 canvas 提供。

      var node1 = new ht.Node(),                    // 创建ndoe节点
            node2 = new ht.Node();
}

3、设置节点样式

node1.setName("node1");
node1.setPosition(100, 100);
node1.setSize(100, 100);
node1.s({
    'shape': 'rect',
    'shape.background': 'pink',
    'shape.border.width': 3,
    'shape.border.color': 'rgb(220, 10, 17)',
    'shape.dash': true, // 是否启用颜色交替虚线
    'shape.dash.width': 2,
    'shape.dash.color': 'yellow',
    'shape.dash.pattern': [10, 10] // 长度16的shape.dash.color颜色，和长度16的shape.border.color颜色重复交替
});

4、添加动画设置

node1.setAnimation({
     borderFlow: {
          property: "shape.dash.offset",
          accessType: "style",
          easing: "Linear",
          from: 20, 
          to: 0,
          frames: 20,
          onComplete: function() {
               this.s('shape.dash.offset', 0);
           },
           next: "borderFlow"
      },
      start: ["borderFlow"]
});

5、渲染节点

dm.add(node1);
dm.enableAnimation();
view.className = "view";
document.body.appendChild(view)