I am trying to produce a spring/bouncing effect and the TI animations aren't playing nicely with me. Normally, you could create a function based upon time, but since TI doesn't have that, I am trying to chain animations together.
My problem is that the animations are really choppy and not smooth. I get the dreaded "[DEBUG] ignoring new layout while animating in layout Child.." error a lot. So I figure not all the animations in the chain are fired because TI is not finished doing all it's animation stuff. I tried adding the animation.addEventListener('complete'), but my callback function was being called before the animation was finished. So I switched to the view.animate({}, callback) notion and it helped a little.
Right now I am trying to animate 36 views (each of them is a letter in a word game) at the same time, so it could be a performance issue.
If anyone has tips on animation performance or how to animate a view using a time based function, I would greatly appreciate the help.
var animIteration = 0; var finalX = /* determine final x position */; var finalY = /* determine final y position */; view.animate({ center : { x : finalX, y : finalY, curve : Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT }, duration : 300 }, function() { bounce(); return; }); var bounce = function() { var finalX = /* determine final x position */; var finalY = /* determine final y position */; var amplitude = view.height() / 2 / animIteration; // hack to produce a damping effect // some checks so this doesn't look forever if(amplitude < 2 || animIteration >= 20) { animIteration = 1; view.center = { x : finalX, y : finalY }; } else { var diff = -1 * Math.cos(animIteration * Math.PI) * (amplitude / animIteration); setTimeout(function() { view.animate({ center : { x : finalX, y : finalY + diff, curve : Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT }, duration : 300 }, function() { bounce(); }); letterView.animIteration++; }, 50); } return; }