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

参照官网 动画手册

1、引入所需HT文件

 

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

 

 

 

 

2、写入基础代码

 

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

 

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、添加动画设置

 1 node1.setAnimation({
 2      borderFlow: {
 3           property: "shape.dash.offset",
 4           accessType: "style",
 5           easing: "Linear",
 6           from: 20, 
 7           to: 0,
 8           frames: 20,
 9           onComplete: function() {
10                this.s('shape.dash.offset', 0);
11            },
12            next: "borderFlow"
13       },
14       start: ["borderFlow"]
15 });

5、渲染节点

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

 

posted @ 2018-08-02 10:52  九许尘歌  阅读(1458)  评论(0)  编辑  收藏  举报