lwc:programming:javascript:animation [wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
KineticJS is the easy way to do animation, but it doesn't support hardware accel so you can't use retina resolution with reasonable speed. More negatives:

  * if there is one object moving on the screen at 1fps the entire screen with all objects will be redraw at 60fps

[[http://frames-per-second.appspot.com/|visual comparison of fps]]

it's possible to do animation with retina/hardware accel having various containers and u[[http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/|sing "-webkit-transform" to show and hide them]].

need a time delay for some reason before starting the animation.

set  "-webkit-backface-visibility: hidden;" to trigger hardware accel

  * [[http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/|explanation of why this works]]

\\


**Making clickable animation/still images:**

\\


Option 1:

when loading an image, look for filenames i.e. story01.png, story02.png, etc. These are the animations.
also look for filenames story01Mousedown.png, story01Mouseover, etc. these are the animations for mousedown, mouseover
put each image in its own div. Read all the settings (offsetX, rotation, etc.) and use css3 styles to render these settings. Keep an array of the autogenerated div names with the associated images
description area (from Inkscape) could have frame rate, number of frames (if necessary), loop.
  * or just hardcode that information. Just as easy.

Implementing Option 1:

  * ignore animation issue and just get some clickable images up
  * add mousedown where it changes to another image
  * add mouseover animation
  * add animation for clickable images


Option 2:


would it be possible to do animation without retina and still images with retina?
  * con: it doesn't appear that you can have 2 stages in kineticjs one set for retina and the other not.


\\