I am trying to construct a customized map in raphaeljs, in this i want do is, making it like a fadein fadeout effect of the countries that appear sequentially, for it i have used setInterval() Event...
I have tried some stuff right here but it manages to show the last item, it fadein fadeout...
I want to show that sequentially.... Can anyone help???
Here is the sample:-
http://jsfiddle.net/vpmzT/
There're several issues here, the first one #JSantos has already pointed out: you set all the states to blink simultaneously, which is probably not the intended behavior.
Second problem is that the current variable, as well as the intervalFunctions, is shared, and therefore get assigned a new value for each state. This is why you get only the last state in the list to actually perform the animation -- by the time the animation starts the intervalFunctions array contains the animation functions for the last state.
There're multiple possible ways of working around this, but generally you'll have to schedule the animations to run sequentially by using setTimeout(setInterval(animation_function(), total_interval), delay). One possible (though not very readable) way of doing that is http://jsfiddle.net/uTtaP/28/
Related
At the moment im working on a projects which contains prototype.js + scriptaculous.js and some other things..Im trying to remove these libs. So everything should be done with javascript. But i faced 1 thing which is not clear for me (i was not able to find good explanation or solution).
Maybe someone will be generous enough to help me a little bit.
I have a function where 4 arguments will be passed on click:
function someEffect(element, argTwo, argFive, argSix) {
//code which is done already
//code which is done already
new Effect.toggle(element);
}
So the only thing that i need is to replace last line with a pure js.
In Scriptaculous, Effect.toggle (by default) fades in or out an existing element. There are other transition effects that can be specified in a second argument, but by default, the object fades in or out over 3 seconds. The exact implementation of these effects is documented here: Effect.fade Effect.appear
The toggle bases its decision on which effect to fire on the display property of the element. If it is currently display: none, then the appear effect is played on it. If not, then the fade effect is. The end-state of Effect.fade is to set display to none.
I give you all that background in case there are other parts of this page that still need to interact with the replacement effect you are building. If they do, then you'll need to exactly replace those parts of the effect. If not, you can probably do all of this with CSS, and reduce the overhead of your script to adding or removing a CSS classname on the object.
I was curious about the possibilities of animating features in OpenLayers3.
I'm very aware of the examples presented here
http://openlayers.org/en/v3.0.0/examples/animation.html and here
https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms
However, the official examples for OL3 don't quite fit my needs.
Let's assume that I have a layer (geojson for instance) that has a "time" column with lots and lots of time values.
I'd like to implement something like a slider that adds/removes features (or changes their style) depending on the user's actions.
The thing is that there are some APIs that might be able to do that, but they seem to be outdated (code examples were still working with ol2).
Do you have any suggestions on how to build a simple animation slider with OL3?
EDIT: It doesn't necessarily have to be proper animation. A possibility that came to my mind is changing the style of a layer whenever the slider is moved. Still no clue though on how to realise that.
This image illustrates what I have in mind:
EDIT: My current approach is to have a slider, that triggers code everytime it is moved. I somehow try do change the layer style dynamically, but I still haven't gotten a viable result.
Ok. I've come up with a solution myself. It's not really a full-fledged animation, but it works for me.
Basically what I do is that I load a wfs-layer to my map.
Now, here is the trick:
When I do that, I simply sort the time-values of the features one by one and add every feature with the time value of 1 to one layer, every feature with a time value of 2 to another and so and so forth.
This basically does the trick. The rest is simple.
Next step is that I implement a slider that ranges from 1 (the lowest time value) to whatever the highest time value is. Everytime the slider is moved it triggers an event that finds out to which time value the slider is set to and then adds/removes the corresponding layers.
So, if the slider is set to 5. It will add every layer from 1 to 5 to the map and remove every other layer. Again, this is not really an animation, but it does work in my case.
If anyone comes up with another possible solution, please post it here. I'd appreciate it.
(Btw, this is what my solution looks like in action:)
EDIT: I can now also confirm that it is possible to build "proper" animations with this approach. I simply built a js-function that includes multiple "setTimeout"s to time when a layer is added and added a play button that triggers this function. This amounts to an animation that visualises the growth from t=1 to tmax.
I'm having trouble re-initializing a TimelineMax sequence. When the window is resized, I need to revert all the tweens to their default styles and re-initialize them based on the new window size. Is there a simple way to effectively destroy the timeline and start fresh, without manually resetting all the CSS properties?
Depending on what you are trying to achieve, I can suggest two methods.
The first is exactly as you are describing:
myTimeline.pause(0, true); //Go back to the start (true is to suppress events)
myTimeline.remove();
This takes everything back to the way they were at the start of the timeline. You can remove any initialization properties by calling .invalidate() as well.
The second method, I'm adding because it may be worth thinking about...
Rather than completely restarting the tweens/timeline, why not .invalidate() (items stay where they are, just the timeline itself is cleared) and use the tweening method .to() rather than .from(), as you'll get a nicer user experience when everything moves from it's previous position to it's new position rather than completely restarting.
Also, the majority of users don't resize the window. So think about whether or not it's worth it if it becomes a major time consumer.
API/Docs: http://api.greensock.com/js/
In my game engine, there are objects that need to be updated periodically. For example, a scene can be lowering its alpha, so I set an interval that does it. Also, the camera sometimes needs to jiggle a bit, which requires interpolation on the rotation property.
I see that there are two ways of dealing with these problems:
Have an update() method that calls all other object's update methods. The objects track time since they were last updated and act accordingly.
Do a setInterval for each object's update method.
What is the best solution, and why?
setInterval does not keep to a clock, it just sequences events as they come in. Browsers tend to keep at least some minor amount of time between events. So if you have 10 events that all need to fire after 100ms you'll likely see the last event fire well into the 200ms. (This is easy enough to test).
Having only one event (and calling update on all objects) is in this sense better than having each object set it's own interval. There may be other considerations though but for at least this reason option 2 is unfeasible.
Here is some more about setInterval How do browsers determine what time setInterval should use?
The best way I have found out to make a good update() function and keeping a good framerate and less load is as following.
Have a single update() method which draws your frame, by looping some sort of queue/schedule of all drawable object his own update() function which are added to this update event queue/ schedule. (eventlistener)
This way you don't have to loop all objects which are not scheduled for a redraw/update (like menu buttons or crosshairs). And you don't have an over abundance of intervals running for all drawable objects.
I recommend using the update() method over the setInterval.
Also, I would guess that the timing on the several setintervals running would be unreliable.
Another possibility, depending on what other things are happening in your game, using a bunch of separate intervals could introduce race conditions in the counting and comparing of scoring, etc
The proposed algorithms proposed are not exclusive to the related method. That is, you can use setInteval to call all the update methods, or you can have each object update itself by repeatedly calling setTimeout.
More to the point is that a single timer is less overhead than multiple timers (of either type). This really matters when you have lots of timers. On the other hand, only one timer may not suit because some objects might need to be updated more frequently than others, or to a different schedule, so just try to minimise them.
An advantage with setTimeout is that the interval to the next call can be adjusted to meet specific scheduling requirements, e.g. if one is delayed you can skip the next one or make it sooner. setInterval will slowly drift relative to a consistent clock and one–of adjustments are more difficult.
On the other hand, setInteval only needs to be called once so you don't have to keep calling the timer. You may end up with a combination.
I've got some borders that animate around thumbnails in on mouseenter and out on mouseleave. Say a user moves their mouse between two repeatedly, quickly enough that the animation doesn't have time to finish between before the user moves on. The result is that, even if the mouse isn't moving, the border bounces back and forth between the two images they switched between until all the queued animations finish, which can take a while. To prevent this, I've added a .dequeue() before the .animate(). This works well, except that I may have some other animations running. I don't want to stop/dequeue these.
Is there a way to selectively dequeue animations, excluding some? The ones I want to exclude are scroll animations, also triggered on mouseenter.
Are you looking for something like this?
EDIT:
Ah I see, here is the closest solution that i can think of.
There's no built-in way to do this, I don't think you'll find an approach that doesn't involve re-writing a fair portion of the animation engine. The animations take an object when queued. It loops though all properties in the object and determines the start value and end value. To get the value at the step of the animation (depending on your easing, we'll use linear as an example here), it multiplies that difference by the percentage along the animation is.
It's all handled as a group of properties, you can't really split them off and stop the animation of some and not others...it just isn't built to be handled that way. If it were, it's be a huge performance penalty to handle them separately (think about how many times this code runs)...so for such a rare case (your needs here), the library is going to choose the high-performance route that fits the other 99% of cases.