Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

add example for network on Load animation. #2476

Merged
merged 1 commit into from
Dec 20, 2016
Merged

add example for network on Load animation. #2476

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions examples/network/other/onLoadAnimation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Network | On Load Animation</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h2>Vis.js network onLoad animation</h2>
<p>easeIn functions accelerate from zero velocity.</p>
<p>easeOut functions decelerate to zero velocity.</p>
<p>easeInOut functions accelerate from zero till halfway then after the halfway point they decrease until zero.</p>
<div>
Onload Animation Easing Function -
<select id="easingFunction">
<option value="linear">linear</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
</select>
<button onClick="createNetwork(document.getElementById('easingFunction').value);">Demo Easing Function</button>
</div>
<p>For more information on easing functions check out <a href="http://easings.net/">easings.net</a></p>
<div id="mynetwork"></div>
<script type="text/javascript">
document.getElementById("easingFunction").selectedIndex = 0;
function createNetwork(easingType) {
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);

var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);

var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
network.once("beforeDrawing", function() {
network.focus(2, {
scale: 12
});
});
network.once("afterDrawing", function() {
network.fit({
animation: {
duration: 3000,
easingFunction: easingType
}
});
});
}
createNetwork("linear");
</script>
</body>
</html>