1. Python技术站首页
  2. 其他
  3. Vue

gojs实现蚂蚁线动画效果

• Vue
yizhihongxing

为了实现蚂蚁线动画效果，可以使用gojs库中的动画和数据模型功能。下面是实现该效果的完整攻略：

  1. 创建GoJS图表数据模型

蚂蚁线动画效果需要使用GoJS的Layout模块。在Layout模块的输入上，需要创建一个数据模型，以描述要排列的节点及它们之间的连接关系。数据模型可以由JSON对象创建，包含节点和联系人数组。示例：

var data = {
    nodeDataArray: [
        { key: "Alpha", color: "lightblue" },
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" }
    ],
    linkDataArray: [
        { from: "Alpha", to: "Beta" },
        { from: "Beta", to: "Gamma" }
    ]
};

2.对GoJS图表进行布局

GoJS提供了一些布局方法，用于自动布局图表中的元素。在实现蚂蚁线动画效果时，可以使用TreeLayout。TreeLayout可以将节点自动排列成一棵树，例如将根节点放在顶部，将子节点按从左到右的顺序放置。示例：

var myDiagram = $(go.Diagram, "myDiagramDiv");
myDiagram.nodeTemplate =
    $(go.Node, "Auto", $(go.Shape, "Rectangle", { fill: "white" }), $(go.TextBlock, { margin: 8 }, new go.Binding("text", "key")));
myDiagram.linkTemplate = $(go.Link, $(go.Shape));

myDiagram.model = new go.GraphLinksModel(data.nodeDataArray, data.linkDataArray);
var layout = $(go.TreeLayout);
myDiagram.layout = layout;
  1. 添加蚂蚁线动画

为了添加蚂蚁线动画，需要将所有的链接旋转一定角度，并在它们附近添加一个蚂蚁线条。可以使用Link.rotationAngle属性来旋转每个链接，使用Link.fromPort的实际坐标计算蚂蚁线的起点，用Link.toPort的坐标计算蚂蚁线的终点。示例：

var it = layout.network.edges.iterator;
while (it.next()) {
    var link = it.value.link;
    link.rotationAngle = Math.random() * 360;
    var ants = $(go.Panel);
    ants.add($(go.Shape, { stroke: "red", strokeWidth: 1, strokeDashArray: [1, 1], height: 0, width: 5 }));
    ants.visible = true;
    link.add(ants);

    var anim = new go.Animation();
    anim.duration = 2000;
    anim.easing = go.Animation.EaseOutExpo;
    var parts = ants.findObjectsIn(ants.actualBounds);
    var animationProperties = { height: 10 };
    anim.add(parts, animationProperties);
    var animationProperties = { width: 0 };
    anim.add(parts, animationProperties);
    anim.start();
}

在以上示例代码中，动画蚂蚁线的颜色为红色，默认起始长度为0，宽度为5。并且动画时间为2秒，使用EaseOutExpo模式进行缓动。最后，将动画和动画属性添加到go.Animation实例中并开始动画。

  1. 添加节点和连线

最后一步是添加一些新的节点和链接，以便可以看到动画效果。示例：

var newNodes = [
    { key: "Delta", color: "cyan" },
    { key: "Epsilon", color: "magenta" }
];
var newLinks = [
    { from: "Alpha", to: "Delta" },
    { from: "Delta", to: "Beta" },
    { from: "Beta", to: "Epsilon" },
    { from: "Epsilon", to: "Gamma" }
];
myDiagram.model.addNodeDataCollection(newNodes);
myDiagram.model.addLinkDataCollection(newLinks);

在以上示例中，将新节点Delta和Epsilon添加到数据模型中，创建连接它们和现有节点的新链接，并且实现了动画蚂蚁线。

  1. 示例说明

(1) 示例1: 在GoJS基础示例中添加蚂蚁线动画

<!DOCTYPE html>
<html>
<head>
    <title>GoJS蚂蚁线动画效果示例1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.14/go.js"></script>
</head>
<body>
    <div id="myDiagramDiv" style="width:800px;height:400px"></div>
    <button onclick="addNodes()">添加节点和链接</button>

    <script>
        var myDiagram = $(go.Diagram, "myDiagramDiv");
        myDiagram.nodeTemplate =
            $(go.Node, "Auto", $(go.Shape, "Rectangle", { fill: "white" }), $(go.TextBlock, { margin: 8 }, new go.Binding("text", "key")));
        myDiagram.linkTemplate = $(go.Link, $(go.Shape));

        var data = {
            nodeDataArray: [
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" }
            ],
            linkDataArray: [
                { from: "Alpha", to: "Beta" },
                { from: "Beta", to: "Gamma" }
            ]
        };

        myDiagram.model = new go.GraphLinksModel(data.nodeDataArray, data.linkDataArray);

        var layout = $(go.TreeLayout);
        myDiagram.layout = layout;

        var it = layout.network.edges.iterator;
        while (it.next()) {
            var link = it.value.link;
            link.rotationAngle = Math.random() * 360;
            var ants = $(go.Panel);
            ants.add($(go.Shape, { stroke: "red", strokeWidth: 1, strokeDashArray: [1, 1], height: 0, width: 5 }));
            ants.visible = true;
            link.add(ants);

            var anim = new go.Animation();
            anim.duration = 2000;
            anim.easing = go.Animation.EaseOutExpo;
            var parts = ants.findObjectsIn(ants.actualBounds);
            var animationProperties = { height: 10 };
            anim.add(parts, animationProperties);
            var animationProperties = { width: 0 };
            anim.add(parts, animationProperties);
            anim.start();
        }

        function addNodes() {
            var newNodes = [
                { key: "Delta", color: "cyan" },
                { key: "Epsilon", color: "magenta" }
            ];
            var newLinks = [
                { from: "Alpha", to: "Delta" },
                { from: "Delta", to: "Beta" },
                { from: "Beta", to: "Epsilon" },
                { from: "Epsilon", to: "Gamma" }
            ];
            myDiagram.model.addNodeDataCollection(newNodes);
            myDiagram.model.addLinkDataCollection(newLinks);
        }
    </script>
</body>
</html>

(2) 示例2: Json数据动态添加节点和链接

<!DOCTYPE html>
<html>
<head>
    <title>GoJS蚂蚁线动画效果示例2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.14/go.js"></script>
</head>
<body>
    <div id="myDiagramDiv" style="width:800px;height:400px"></div>
    <input type="text" id="txtAddNode1" placeholder="输入1号节点" />
    <input type="text" id="txtAddNode2" placeholder="输入2号节点" />
    <button onclick="addNodes()">添加节点和链接</button>

    <script>
        var data = {
            nodeDataArray: [
                { key: "Alpha", color: "lightblue" },
                { key: "Beta", color: "orange" },
                { key: "Gamma", color: "lightgreen" }
            ],
            linkDataArray: [
                { from: "Alpha", to: "Beta" },
                { from: "Beta", to: "Gamma" }
            ]
        };

        var myDiagram = $(go.Diagram, "myDiagramDiv");
        myDiagram.nodeTemplate =
            $(go.Node, "Auto", $(go.Shape, "Rectangle", { fill: "white" }), $(go.TextBlock, { margin: 8 }, new go.Binding("text", "key")));
        myDiagram.linkTemplate = $(go.Link, $(go.Shape));

        myDiagram.model = new go.GraphLinksModel(data.nodeDataArray, data.linkDataArray);
        var layout = $(go.TreeLayout);
        myDiagram.layout = layout;

        var it = layout.network.edges.iterator;
        while (it.next()) {
            var link = it.value.link;
            link.rotationAngle = Math.random() * 360;
            var ants = $(go.Panel);
            ants.add($(go.Shape, { stroke: "red", strokeWidth: 1, strokeDashArray: [1, 1], height: 0, width: 5 }));
            ants.visible = true;
            link.add(ants);

            var anim = new go.Animation();
            anim.duration = 2000;
            anim.easing = go.Animation.EaseOutExpo;
            var parts = ants.findObjectsIn(ants.actualBounds);
            var animationProperties = { height: 10 };
            anim.add(parts, animationProperties);
            var animationProperties = { width: 0 };
            anim.add(parts, animationProperties);
            anim.start();
        }

        function addNodes() {
            var newNodes = [
                { key: document.getElementById("txtAddNode1").value, color: "cyan" },
                { key: document.getElementById("txtAddNode2").value, color: "magenta" }
            ];
            var newLinks = [
                { from: "Alpha", to: document.getElementById("txtAddNode1").value },
                { from: document.getElementById("txtAddNode1").value, to: "Beta" },
                { from: "Beta", to: document.getElementById("txtAddNode2").value },
                { from: document.getElementById("txtAddNode2").value, to: "Gamma" }
            ];
            myDiagram.model.addNodeDataCollection(newNodes);
            myDiagram.model.addLinkDataCollection(newLinks);
        }
    </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：gojs实现蚂蚁线动画效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue2.0移动端滑动事件vue-touch的实例代码

    下面我将详细讲解vue2.0移动端滑动事件vue-touch的实例代码的完整攻略。 简介 Vue-Touch是一个基于HammerJS封装的适用于Vue2.x的触摸插件。它可以在Vue组件中使用v-touch指令，实现触屏事件的绑定和处理，包括Tap、Doubletap、Press、Swipe、Pinch、Rotate等常见的手势事件。 安装 在使用vue-…

    Vue 2023年5月29日
    00

  • Vue3中的组合式 API示例详解

    当谈到使用Vue3开发现代web应用程序时，组合式API一直是一个备受关注的话题。组合式API是Vue3的新特性之一，它允许你创建可重用和高度抽象的组件逻辑，使得代码更易于维护和实现。本文将为您介绍什么是组合式API，提供两个组合式API示例，并展示如何在Vue3项目中使用组合式API。 组合式API概述 组合式API是Vue3中的新特性，它允许将组件逻辑分…

    Vue 2023年5月28日
    00

  • 详解iOS App中调用AVAudioPlayer播放音频文件的用法

    详解iOS App中调用AVAudioPlayer播放音频文件的用法 在iOS应用中，我们经常需要用到播放音频文件的功能。AVAudioPlayer是iOS中一个非常好用的播放音频文件的类，提供了一系列播放、管理音频、控制播放速率和音量等方法，使得我们能够非常方便的实现音频处理的功能。 1.准备工作 在使用AVAudioPlayer播放音频文件前，需要完成如…

    Vue 2023年5月28日
    00

  • vue 动态样式绑定 class/style的写法小结

    那我来详细讲解“Vue 动态样式绑定 class/style 的写法小结”。 1. 绑定 class Vue.js 提供了一种叫做:class的指令，可以通过数据绑定的方式动态地设置一个 HTML 元素的类名。语法为： <div :class="{ className: condition }"></div> 其中…

    Vue 2023年5月27日
    00

  • vue实现登录时图形验证码

    下面是Vue实现登录时图形验证码的完整攻略。 1. 简介 在网站的登录界面中，为了增加用户的安全性，通常会使用图形验证码来防止机器恶意登录或者验证码破解等安全问题。Vue作为现代前端框架，可以很方便地实现图形验证码。 2. 实现步骤 2.1 安装v-charts插件 在Vue项目中使用图形验证码需要使用v-charts插件，因此需要先安装v-charts插件…

    Vue 2023年5月29日
    00

  • vue使用pdfjs显示PDF可复制的实现方法

    下面我将详细讲解“vue使用pdfjs显示PDF可复制的实现方法”的完整攻略。 1. 确认使用pdfjs 首先，我们需要确认使用的是pdfjs库。pdfjs是一款功能强大的开源JavaScript库，它可以实现在网页上显示PDF文档。 在Vue项目中，可以使用npm安装pdfjs，命令如下： npm install pdfjs-dist@2.0.943 –…

    Vue 2023年5月28日
    00

  • 深入理解vue中的$set

    下面是关于“深入理解Vue中的$set”的完整攻略。 什么是$set 在 Vue.js 中，我们经常需要在已有的数据对象中添加新的属性，但是这样做是响应式的吗？答案是否定的。因为 Vue.js 在初始化实例时将属性转化为 getter/setter，所以属性必须在初始化时存在才能让 Vue.js 转化它为响应式的数据。但是，Vue提供了一种方法来帮助我们完成…

    Vue 2023年5月29日
    00

  • vue3如何自定义js文件(插件或配置)

    下面是详细讲解“vue3如何自定义js文件(插件或配置)”的完整攻略。 首先，Vue.js 提供了相应的插件机制以方便我们扩展集成第三方库或是在项目中进行一些自定义配置。在 Vue.js 3.x 中，自定义插件配置的方式与 2.x 有些不同，我们需要先了解其具体的配置方式。 Vue.js 3.x 自定义插件配置 Vue.js 3.x 的配置主要分为应用级配置…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部