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
it's possible to do animation with retina/hardware accel having various containers and using "-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
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.