参照官网 动画手册

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. 使用EasyNetQ简化RabbitMQ操作

    关于具体的操作看查看官方文档:https://github.com/EasyNetQ/EasyNetQ 也可以参考中文翻译版本:http://www.cnblogs.com/HuangLiang/p/ ...

  2. python 代理

    1.参考 http://docs.python-requests.org/en/master/user/advanced/ Using Python’s urllib2 or Requests wit ...

  3. SQL反模式学习笔记14 关于Null值的使用

    目标:辨别并使用Null值 反模式:将Null值作为普通的值,反之亦然 1.在表达式中使用Null: Null值与空字符串是不一样的,Null值参与任何的加.减.乘.除等其他运算,结果都是Null: ...

  4. Redis数据结构之robj

    本文及后续文章,Redis版本均是v3.2.8 我们知道一个database内的这个映射关系是用一个dict来维护的.dict的key固定用一种数据结构来表达,这这数据结构就是动态字符串sds.而va ...

  5. jquery源码解析日常

    介绍:JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Op ...

  6. flash上传头像,截取图像 组件演示

    效果图如下: HTML页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// ...

  7. office图标(word,powerpoint,excel)异常(变成白板)问题修复

    都是wps搞的鬼. 如果先装了wps后卸载wps再装office就可能出现这个问题. 终于解决了!!先装个wps 2016,进入设置→高级→兼职性关联.这时你会发现ppt文件图标不是白板了.重启打开w ...

  8. CSS(八)

    CSS3 transform变换 1.translate(x,y) 设置盒子位移2.scale(x,y) 设置盒子缩放3.rotate(deg) 设置盒子旋转4.skew(x-angle,y-angl ...

  9. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

  10. Node.js_文件系统 FS

    文件系统 FS——File System 所谓的文件系统,就是对计算机中的文件进行增.删.查.改等操作 是一个服务器的基础 node 通过核心 FS 模块来操作文件系统 简单写 // 1. 导入 fs ...