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)

转载于:https://www.cnblogs.com/zuojiayi/p/9405811.html

hightopo学习之旅一 -- 节点动画相关推荐

Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
大数据技术学习之旅_如何开始您的数据科学之旅？
大数据技术学习之旅 Machine Learning seems to be fascinating to a lot of beginners but they often get lost in ...
基于设计模式的学习之旅-----访问者模式(附源码)
基于设计模式的学习之旅-----访问者模式 1.初始访问者模式 2.什么是访问者模式表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作. 3.模 ...
NGUI从入门到实战第1章开启NGUI学习之旅
NGUI从入门到实战第1章开启NGUI学习之旅 NGUI是Unity最重要的插件之一.使用NGUI可以高效地为游戏添加界面.本书将带领大家学习NGUI.作为NGUI学习之旅的第一站,本章会在整体上介绍 ...
WCF学习之旅—基于Fault Contract 的异常处理（十八）
WCF学习之旅-WCF中传统的异常处理(十六) WCF学习之旅-基于ServiceDebug的异常处理(十七) 三.基于Fault Contract 的异常处理第二个示例是通过定制Servic ...
WCF学习之旅—第三个示例之二（二十八）
上接WCF学习之旅-第三个示例之一(二十七) 五.在项目BookMgr.Model创建实体类数据第一步,安装Entity Framework 1) 使用NuGet下载最新版的Entity Fram ...
无星的RN学习之旅（四）——通信、持久化存储、iOS打包
说说最近项目的一些感想吧. 一.RN的创意 RN其实我觉得是一个很有创意的想法.不知道各位写RN项目的时候,有没有打开Xcode看过app的层级关系,我发现RN的这个想法,真的很有创意. 作为一名原生 ...
java五子棋代码详解_代码详解：Java和Valohai的深度学习之旅
全文共10735字,预计学习时长22分钟或更长有一款生命周期管理工具(也称云服务)叫做Valohai,它有着友好的用户界面和简洁的布局设计. 许多有关Valohai的案例和文档都是基于Python和 ...
文章目录 | .NET Core on K8s学习之旅 (更新至20200618)
.NET Core on K8s学习之旅更新记录: -- 20200511 增加Ingress & Nginx Ingress介绍 -- 20200515 增加Ocelot API网关集成示 ...
Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画这次实现一个小demo 图标特效页面渲染 <!DOCTYPE html> <html lang=&qu ...

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

1、引入所需HT文件

2、写入基础代码

3、设置节点样式

4、添加动画设置

5、渲染节点

hightopo学习之旅一 -- 节点动画相关推荐

最新文章

热门文章