jQuery: Dequeue Specific Animations - javascript

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.

Related

Createjs: Adding mouseover to containers slowsdown FPS

Link 1 - http://horebmultimedia.com/Sam3/
Link 2 - http://horebmultimedia.com/Sam5/
In the above links, i have added a set of numbers added in separate containers in each file and u can find the FPS on the top right. The issue is when i mouse over in this Link 1 and click any numbers, as u see the FPS is getting slower & slower, making the world to rotate slower on the left side.
While on this link, Link 2, I added only one mouse over and 5 mouse over, but there is not much difference in FPS, why it lags so much when i have 37 containers. I can give my code if u need to resolve.
I had a rough look at your code, but digging through an entire project is not a fantastic way to debug an optimization problem.
The first thing to consider is if you have mouseOver enabled on your stage, I would recommend a liberal use of mouseChildren=false on interactive elements, and mouseEnabled=mouseChildren=false on anything not interactive. The rollover could be a big cause, as it requires everything to be drawn 20 times per second (in your usage). Text and vectors can be expensive to redraw.
// Non-interactive elements (block all mouse interactions)
element.mouseEnabled = element.mouseChildren = false;
// Interactive elements (reduce mouse-checking children individually)
element.mouseChildren = false;
If they don't change, you might consider caching text elements, or button graphics. I think I saw some caching in the source - but its generally a good thing to consider.
--
With that said, debugging optimization can be tough.. If removing all the buttons brings your performance up, consider how your buttons are being constructed, and what their cost is.
* Mouse over is expensive
* Vectors and text can be expensive
* Caching can help when used right, but can be expensive if it happens too often.
* Review what is happening on tick(). Sometimes, code is running constantly, which doesn't need to.
--
A few other notes:
This does not do what you think: _oButton.off("mousedown"); -- You need to pass the result of the on() call. If you are just cleaning up, call _oButton.removeAllEventListeners().
You don't need to set the cursor on mouseover. The cursor will only change when it rolls over -- so just set it once, and then get rid of your buttonover stuff.
It might make sense to just extend EventDispatcher for your custom classes, which gives you things like the on() method, which supports a data param. I might recommend this in place of your addEventListener stuff in CTextButton
Note that RAF does not support a framerate property (it just uses the browser's RAF rate, which is usually 60fps). Use createjs.Ticker.timingMode instead of the deprecated useRAF.
Hope that helps a little.

JS that shows FPS for JS and CSS3 animations

I'm doing a series of tests (small study) to see the difference in fluid animation (by measuring Frames per second) between using JS to animate an object or JS with CSS3 doing the animating.
I've already found some solutions for getting FPS counter (meter) in JS, but I need to call it every time whenever I call the render function. This would be alright if the animating is done purely on javascript part. If I decide to move from animating using JS to CSS3, to my knowledge there is no way to detect how fast that transaction will be.
I know that for webkit browsers (tested in Chrome) I can get such info through developer tools, but since I will be testing also on other platforms I'm looking for a universal solution.
Any ideas, suggestions, anything that points me into right direction is appreciated. Thanks.
So I have found out the solution. It's called FPSMeter and it was developed by David Corvoysier. You can find the library and more about it here.
Basically he came up with a good idea, to simply append 1 CSS animated element in the body of the page. Then he uses transitions to animate that element and on every requestAnimationFrame he tries to calculate computed position of that element. On every second he then simply counts the number of different positions occupied by the element. Based on that he obtains FPS.

Coordinating dragmove to not exceed 30 FPS

I have animation that happens on dragmove.
However I don't want to waste cycles doing more calculations than I have to.
Essentially I want the dragmove events to only redraw at a reasonable animation rate.
In other words dragmove events come in as fast as they can however I only want to execute code as often as needed for smoothness for user.
So far the only solution I have come up with is to have a separate animation loop that does the redraw and ondragmove just sets the variables I need. Is there a more elegant way of doing this?
Think about it this way. The 30 FPS is your limitation. The events will go on their own time regardless your limitations.
So your idea is not that "un-elegant". I would say, it's the only way to go.
When ever you get a motion event, store it locally, if you already have it stored, override the old data(This is the ignoring part). From your 30 FPS loop, sample the motion event, if you got anything, than execute and destroy it.
This is about it. Pretty much your own words.

Would optimizing a CSS3 animation without H/W acceleration off make it run faster on GPU afterwards?

It sounds like a strange question at first - but bear with me.
I wrote a setTimeout-based benchmark (similar to stats.js) - the idea was to have something to compare how an animation is performing under different conditions (like adding to it different CSS3 properties). For (simple) example I'd have something with rotation and box-shadow animated, then I'd remove rotation in the second run and box-shadow in the third run. Afterwards I'd have 3 benchmark numbers to compare how each of those animations is performing.
This works well as long as the animation is not GPU-accelerated (for obvious reasons i.e. H/W acceleration removes the animation from the page's single-process structure).
But that also brings me to the million dollar question - if I optimize something to run better without GPU-acceleration does that mean that same optimized animation would run better (either faster or with less memory usage) with GPU-acceleration turned on? Or do different rules apply?
Let me give you a simpler example. CSS3 box-shadow will kill performance in almost any animation. In simpler cases you can augment performance by replacing CSS3 box-shadow with a rasterized (PNG?) image of a similar shadow. However with GPU-on, the benefits of that are not as apparent to the naked eye because both animations would appear run almost equally fast (because again - I can't track performance changed with GPU-on). So again - do the same rules apply with GPU-on and -off?
My initial impulse was - once something is optimized - it runs better no matter GPU-on or -off. But like I mentioned in a comment below (and please correct me if I understand this wrong), but a hardware-accelerated element is cached as a pre-rendered raster texture on the GPU. If thats true - why would it then make any difference if my shadow is a CSS3 box shadow or an image-base PNG shadow? I mean both of these elements would with GPU-on just be turned into a rasterized texture anyway right? So my optimization would not make any more sense with GPU-on? (unless if there is a difference somehow in memory usage again...)
Yes, absolutely. Look here for a little bit about what GPU acceleration does and does not affect. But the general idea is, yes, it will keep most of your optimizations. Now, how much a given optimization will affect performance after GPU offloading, in a relative sense.. That's a tough question to answer.

Customizing Map in raphaeljs

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/

Categories