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)