Nowadays, it is difficult to imagine any eye-catching web-site without animation.
However, animated technical drawings are difficult to find. But why can’t we breathe life into general arrangement drawings (GA), piping and instrument diagrams (P&ID) and so on? It would be interesting and more effective to present these drawings dynamically as opposed to statically.
Let me start from the simplest way of animating an SVG drawing. It is called Synchronized Multimedia Integration Language or SMIL. It should be noted that SMIL is a part of SVG. It is embedded in the SVG specification. SMIL provides one with a possibility to do the following:
- animate color attributes;
- transport or rotate elements;
- animate the numeric attributes of elements (eg. the value of x-y coordinates);
- follow a motion path.
Take for example the SVG code where the following animation is used:
<circle cx=”100″ cy=”100″ r=”20″ fill=”red” stroke=”blue” stroke-width=”1″>
<animate attributeName=”r” from=”20″ to=”100″ begin=”0s” dur=”5s” repeatCount=”1″/>
The circle animation starts with a radius of 20px and is increased to 100px during 5 seconds.
function changeColorIn(evt) //name of the function
evt.target.setAttributeNS(null,”fill”,”grey”); //change fill color from white to grey evt.target.setAttributeNS(null,”fill-opacity”,”0.4″); //change fill-opacity of color from 1 to 0.4
<rect x=”50″ y=”20″ width=”150″ height=”150″ fill=”white” fill-opacity=”1″ stroke =”black” onmouseover=”changeColorIn(evt)”/>
//draw a white rectangle with a black stroke with width=150 and height=150 at x = 50, y = 20
This part of the Raphael code shows initializing of a new document and draws a circle with a radius of 5px with its center placed at x=100, y=100:
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 100, y = 100, with radius 5
var circle = paper.circle(100, 100, 5);
Since Raphael is based on JS, it has the same functions of interactivity as a mouse click or pushing a button.
To learn more about these techniques, don’t hesitate to contact me.