CODEWITHSUNDEEP
javascriptperformanceraphael
Kevin
Kevin

Reputation: 21

Animating opacity of 1400 Raphael.js objects hurts animating performance

First off, thank you for any help. :)

JSFiddle code.

JSFiddle full screen

As you can see by the fiddle link above I am animating 1400 objects trying to create a 'twinkling effect'. As the user moves the mouse faster more hexagon shapes pop into full opacity and have varying fade out rates. The version in the fiddle fills the space with enough color but feels jerky and clumpy. If I lessen the fade_time variable amounts it is smoother but does not have enough hexagons with full opacity. The end goal is to spell words with the hexagons.

The performance in Chrome is best, less so in FireFox and IE. I tested (using Raphael's element.touchmove) in mobile safari on an iPad and it was even worse.

I'm looking for any advice on what pieces of the code could be done differently for performance gains.

I saw this answer somebody else gave that was supposed to help with performance, but I'm trying to base the amount of animating hexagons on cursor movement and I'm not sure I could do that with a timer.

This answer mentioned using canvas:

A good alternative would be using Canvas to draw the elements. From my experiments it will be faster than SVG at drawing this many although if you are using some animations, they will be harder to implement than with the RaphaelJS library.

Does that seem like a better route to people, even with the animations the code is using?

This is my first use of Raphael.js. I'm not very experienced in JS in general, so any help is wunderbar!

Edit: Edit: Also, seeing this answer about .resize being called more times than the questioner might have thought got me wondering if the .mousemove function may be called more times (more than I would need) than I would expect.

Upvotes: 2

Views: 1388

Answers (1)

Paolo Stefan
Paolo Stefan

Reputation: 10263

I think it chokes on "overlapped" animations, i.e. for example:

  1. hexagon number #6 starts its fade
  2. at a half of its fade, another fade is started

I added a stop() instruction to avoid unexpected results.

Besides, the for() cycle doesn't check if another animation is in progress, nor if some hex has been randomly selected twice or more inside the cycle. As a workaround for this, I added a vector to cache the indexes of the hexagons being animated, although it does not seem to be of great help.

To see how many (useless) animations it saved, uncomment the last console.log().

Besides, your getRandomInt() function generated some undefined index errors (since your array indexes go from 0 to 1399 and it returned integers between 0 and 1400... I changed it.

See my add-ons here: http://jsfiddle.net/rz4yY/46/

Upvotes: 1

Related Questions