CapitanMorgan
7 years ago
committed by
yotamberk
yotamberk
1 changed files with 85 additions and 0 deletions
Unified View
Diff Options
+ 85
- 0
examples/network/other/onLoadAnimation.html
View File
| @ -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> | |||||