It seems that there are major issues with animations on Android Phones,
where objects are out of alignment, especially when objects have scaling
or rotation animation. My default animation preview browser is Safari,
on a mac, and animations are finished looking correct in Safari. But when
viewed in a browser or within an app on an Android phone there are objects
that are not the right size, not in the right position, etc.
Are there issues with animations displaying the same on Android phones as on
iphones, and is there a work-around to this? Is there an imminent Sencha Animator
update that fixes this? I would hate to have to be limited in the kinds of animations
I can do, such as not having objects rotate, in order to create animations that play the
same on Android as on an iphone.
Unfortunately, the Android browser is very buggy. ICS seems to be a lot better, and we expect it to get even better with Chrome.
This is an Android issue, and does not affect iPhones.
Some generic strategies to work around some of the Android bugs/limitations.
1) Make sure there is a keyframe at 0 seconds for every animation.
2) Don't apply translation (position) and rotation to the same objects keyframes. Rather, put the object inside another object and apply position and rotation separately on each objects keyframes. (same issue might happen with any of the transforms, so try this approach if you have issues when they are combined on the same keyframes/objects).
I believe rotation will not show up in the default browser on Android phones, no matter what.
Meanwhile, I'm encountering Android scaling issues. It seems even if I just scale an object and leave it in the same position, it still won't show show the scaling on Android. But as far as I see, this ISN'T an issue w/ the Android browser. Are there more tips you can share?
Unfortunately they are bugs in the Android browsers as well. Looks like currently, both rotate and scaling runs into Android bugs. Looks like it work okay in 2.1 but is broken in 2.2 and 2.3.
I have seen some workarounds, but they do not seem to always work, and they typically requires to edit the exported code.
So one way to potentially workaround the rotation bug is to make sure the object has 0,0 position (but you can nest it in an object with a set position) and set a rotation. Then in the exported code you'll find css code for the object looking like this:
translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg);
and you can replace it with
You might be able to do the same for scaling, replacing
translate3d(0px, 0px, 0px) scale3d(0.5, 0.5, 1);