I want to add a "pop-up" animation on a webview when i open it, so to do this i create a 2DMatrix with scale(0) to the transform property ont he view, then i create an animation to scale it up.
var t = Titanium.UI.create2DMatrix(); t = t.scale(0); view.transform = t; showWebView();showWebView():
function showWebView(){ var animSpeed = 400; // create first transform to go beyond normal size var overSizedTransform = Titanium.UI.create2DMatrix(); overSizedTransform = overSizedTransform.scale(1.1); var growAnim = Titanium.UI.createAnimation(); growAnim.transform = overSizedTransform; growAnim.duration = animSpeed/2; var event1; // when this animation completes, scale to normal size growAnim.addEventListener('complete', (event1 =function() { // Titanium.API.info('here in complete'); Ti.API.info("inside webview, -complete- animation"); var finalSizeTransform = Titanium.UI.create2DMatrix(); finalSizeTransform = finalSizeTransform.scale(1.0); cachedEl.contentWrapper.animate({transform:finalSizeTransform, duration:animSpeed/2}); // Remove event listener growAnim.removeEventListener('complete', event1); })); view.animate(growAnim); }this works fine on iOS, however on android it seems setting the transform property on the view cancells the animation. commenting out the first block with the transform made the animation work on android, however the scaling animation was then made from 1.0 to 1.1 and then back to 1.0.
i solved this by using the Android-only scaling method on 2DMatrix
overSizedTransform = overSizedTransform.scale(0,0,1.1,1.1);however this means having two different sets of code for android and ios, as this scaling method is not available for ios.
So what i want to understand is why my animation will not run on android after the view.transform property has been set, and if there is a solution for this that works on both platforms.
Additionally i wanted to put this workaround out there for anyone with similar problems.