animation.html #1 

<?xml version="1.0" encoding="UTF-8"?>
<html>
 <head>
  <title>WireIt Example, Move and Animate elements containing terminals</title>
  
<!-- YUI -->
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css" />

<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>

<!-- Excanvas -->
<!--[if IE]><script type="text/javascript" src="../lib/excanvas.js"></script><![endif]-->

<!-- WireIt -->
<script type="text/javascript" src="../js/WireIt.js"></script>
<script type="text/javascript" src="../js/CanvasElement.js"></script>
<script type="text/javascript" src="../js/Wire.js"></script>
<script type="text/javascript" src="../js/Terminal.js"></script>
<script type="text/javascript" src="../js/DD.js"></script>

<!-- Animations plugin -->
<script type="text/javascript" src="../js/Anim.js"></script>

<link rel="stylesheet" type="text/css" href="../assets/WireIt.css" />

<style>

div.blockBox {
	/* WireIt */
	position: absolute;
	z-index: 5;
	opacity: 0.8;
	
	/* Others */
	width: 100px;
	height: 100px;
	background-color: rgb(255,200,200);
	cursor: move;
}

</style>

<script>
window.onload = function() {
	
	// Create 2 terminals into Block1
	var block1 = YAHOO.util.Dom.get('block1');
	var terminals1 = [new WireIt.Terminal(block1, {direction: [-1,0], offsetPosition: [-14,35]}), 
							new WireIt.Terminal(block1, {direction: [1,0], offsetPosition: [85,35]})];
	
	// Make the block1 draggable
	new WireIt.util.DD(terminals1,block1); 
	
	// Create 2 terminals into Block2
	var block2 = YAHOO.util.Dom.get('block2');
	var terminals2 = [new WireIt.Terminal(block2, {direction: [-1,0], offsetPosition: [-14,35]}), 
							new WireIt.Terminal(block2, {direction: [1,0], offsetPosition: [85,35]})];
	
	// Make the block2 draggable
	new WireIt.util.DD(terminals2,block2);
	
	// Create a wire between some terminals
	var w1 = new WireIt.Wire(terminals1[0], terminals2[0], document.body);
	w1.redraw();
	
	var w2 = new WireIt.Wire(terminals1[1], terminals2[1], document.body);
	w2.redraw();
	
	// Create the animations for both blocks using WireIt.util.Anim
	var myAnim1 = new WireIt.util.Anim(terminals1, // same constructor except constructor takes the terminals as 1st parameter
												  block1, {  left: { to: 500 }, top: {to: 150} }, 2, YAHOO.util.Easing.easeOut);					
	var myAnim2 = new WireIt.util.Anim(terminals2, 
												  block2, {  left: { to: 100 } }, 1, YAHOO.util.Easing.easeOut);
	
	// OnClick on the button, launch both animations
	YAHOO.util.Event.addListener('animButton','click', function() {
		myAnim1.animate();
		myAnim2.animate();
	})
};


</script>

 </head>
 <body>
	
	<p style="margin: 15px;"><a href="../index.html">&lt; Back</a></p>
	<p style="margin: 15px;">Show usage of WireIt.util.DD and WireIt.util.Anim to make terminal containers draggable</p>
	
	<button id='animButton' style="margin: 15px;">Click to animate !</button>
	
	<div id='block1' class="blockBox" style="left: 300px; top: 100px;">Move Me !</div>
	
	<div id='block2' class="blockBox" style="left: 500px; top: 200px;">Move Me !</div>
	
 </body>
</html>
# Change User Description Committed
#1 16445 christiane_renck Rename/move file(s)
//guest/christiane_renck/MergeQuestJS/main/demos/WireIt/plugins/animations/examples/animation.html
#1 16444 christiane_renck Adding MergeQuestJS to the Workshop.