参照官网 动画手册

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)

hightopo学习之旅一 -- 节点动画的更多相关文章

  1. ROS2学习之旅(4)——理解ROS2 Graph中的节点

    ROS(2)图(ROS(2) graph)是一个同时处理数据的基于ROS2元素的网络,它包含了所有的可执行文件以及它们之间的连接.图中的基本元素包括:节点(nodes).话题(topics).服务(s ...

  2. WCF学习之旅—第三个示例之四(三十)

           上接WCF学习之旅—第三个示例之一(二十七)               WCF学习之旅—第三个示例之二(二十八)              WCF学习之旅—第三个示例之三(二十九)   ...

  3. Hadoop学习之旅二:HDFS

    本文基于Hadoop1.X 概述 分布式文件系统主要用来解决如下几个问题: 读写大文件 加速运算 对于某些体积巨大的文件,比如其大小超过了计算机文件系统所能存放的最大限制或者是其大小甚至超过了计算机整 ...

  4. WCF学习之旅—第三个示例之二(二十八)

    上接WCF学习之旅—第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据 第一步,安装Entity Framework 1)  使用NuGet下载最新版的Entity Fram ...

  5. WCF学习之旅—WCF服务的批量寄宿(十三)

    上接    WCF学习之旅—WCF服务部署到IIS7.5(九) WCF学习之旅—WCF服务部署到应用程序(十) WCF学习之旅—WCF服务的Windows 服务程序寄宿(十一) WCF学习之旅—WCF ...

  6. WCF学习之旅—基于Fault Contract 的异常处理(十八)

       WCF学习之旅—WCF中传统的异常处理(十六) WCF学习之旅—基于ServiceDebug的异常处理(十七) 三.基于Fault Contract 的异常处理 第二个示例是通过定制Servic ...

  7. WCF学习之旅—基于ServiceDebug的异常处理(十七)

    WCF学习之旅—WCF中传统的异常处理(十六) 二.基于ServiceDebug的异常处理 从前面的示例中,可以看到客户端捕获了异常,这是我们处理异常的前提.为了有利于我们进行有效的调试,WCF提供了 ...

  8. Hadoop学习之旅三:MapReduce

    MapReduce编程模型 在Google的一篇重要的论文MapReduce: Simplified Data Processing on Large Clusters中提到,Google公司有大量的 ...

  9. WCF学习之旅—WCF第二个示例(五)

    二.WCF服务端应用程序 第一步,创建WCF服务应用程序项目 打开Visual Studio 2015,在菜单上点击文件—>新建—>项目—>WCF服务应用程序.在弹出界面的“名称”对 ...

随机推荐

  1. (五)Knockout template模版渲染

    基础 template绑定通过模板将数据render到页面.模板绑定对于构建嵌套结构的页面非常方便.默认情况, Knockout用的是流行的jquery.tmpl模板引擎.使用它的话,需要在安装页面下 ...

  2. css_base_note

  3. 分布式文档存储数据库 MongoDB

    MongoDB 详细介绍 MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以 ...

  4. [Error]Python虚拟环境报错 OSError: setuptools pip wheel failed with error code 2

    mkvirtualenv py35 python新建虚拟环境报错,setuptools pip wheel failed with error code 2 刚好昨天在CentOS安装的时候也总是报s ...

  5. Android Frameworks的base目录内容分析 “Android Frameworks base”

    Framework文件夹中base目录下文件分类: Android系统结构框架: Android Framework层各文件夹功能分类:

  6. CSS入门介绍(一)

    css 层叠样式表(英文名:Cascading Style Sheets),主要用于美化网页 1.css的表现形式 1.1 行内样式(内嵌样式) 写在标签内的样式,写在标签的开始部分的内部,style ...

  7. mongodb配置问题

    1.安装好mongodb后需要在控制行输入很长的一窜很麻烦,可以新建一个.bat文件 cd F:\mongodb\Server\3.0\binmongod --dbpath "F:\mong ...

  8. [LeetCode] Max Increase to Keep City Skyline 保持城市天际线的最大增高

    In a 2 dimensional array grid, each value grid[i][j] represents the height of a building located the ...

  9. Qt支持哪些硬件通信协议???

    如题,广大使用Qt开发嵌入式的伙伴们知道Qt支持哪些硬件通信协议的开发???目前已知的串口和网络TCP/IP协议开发支持,其他的呢??? 欢迎留言交流!!!

  10. dtNavMeshQuery::findLocalNeighbourhood m_tinyNodePool->getNode dtHashRef整数哈希 getPortalPoints dtOverlapPolyPoly2D

    dtNavMeshQuery::findLocalNeighbourhood(dtPolyRef startRef, const float* centerPos, const float radiu ...