Menu
I'm using the Raphael JS library, and I'm trying to figure out how to make a point appear on screen, then disappear.
I use a for loop to create the points, and then I make them fade in. Is there a way that they can also fade out, and I can remove them?
I'm quite new to Javascript, so I don't know the best strategy for dealing with this. I could not see how to to this in the Raphael documentation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>blink point</title>
<script src="js/raphael.js"></script>
<!--<script src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>-->
<script type="text/javascript">
window.onload = function () {
//Point Array
pointList = new Array ();
// Create Canvas
var r = Raphael(10, 50, 600, 600);
// Make a 'group' of points
for( i=0; i<20; i++){
//Create Point
pointList[i] = r.circle(10*i, 10*i,5);
pointList[i].attr({stroke: "none", fill: "#999", opacity: 0});
//Fade in
pointList[i].animate({opacity: 1}, 1000 );
}
// Remove points, starting with the first
for( i=0; i<20; i++){
//Try fading them out
//pointList[i].animate({opacity: 0}, 1000 );
}
};
</script>
</head>
<body>
<div id="holder"></div>
</body>
</html>
I also was not able to get the online link to the Raphael library to work, so it might be necessary to download the library.
284
You can find working example here http://jsbin.com/uxege4/2/edit
In details:
Problem with your code - animation is done asynchronously and that means your program will be finished before fading in. So you need to set up callback function when animation will be ready. Here is quote from Raphael documentation:
animate
Changes an attribute from its current value to its specified value in the given amount of milliseconds.
ParametersnewAttrs object A parameters object of the animation results. (Not all attributes can be >animated.)
ms number The duration of the animation, given in milliseconds.
callback function [optional]
Last parametr is what we need. You just need assign function to call after animation finished.
160
I made you this: http://jsbin.com/uxege4/5/edit You can chain the all the stuff together and have a callback function in the .animate(). Like this:
r.circle(10*i, 10*i, 5).attr({stroke: "none", fill: "#999", opacity: 0}).animate({opacity: 1}, 1000, function(){
this.animate({opacity: 0}, 1000, function(){
this.remove();
});
});
The Callback function gets called when the animation is over and passes over the raphäel object.
40
To clarify -
Raphael's animate() will start happening as soon as you make the function call and will keep happening while the rest of your JavaScript is executed.
I've modified Eldar's example code to demonstrate this. See: http://jsbin.com/uxege4/4/edit
Note that the yellow circles are drawn at the same time as the grey ones even though the call to animate() them occurs later in the code.
Hitting a callback function upon the completion of an asynchronous code path is a common pattern in JavaScript and it is essential to understand it in order to be productive with JS.
In Eldar's example, an anonymous function is attached to the first animate()'s callback handler. Upon completion of the initial fade-in animate(), the function gets called, and performs a fade-out.
I recommend Douglas Crockford's JavaScript: The Good Parts (which is, somewhat amusingly, the slimmest programming book I've ever read) and running through JavaScript Koans. Doing that should set you on the right track.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
