CapitanMorgan
9 years ago
committed by
yotamberk
yotamberk
1 changed files with 85 additions and 0 deletions
Split 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> | |||