Issue Description
When an animation is inserted inside a iteration or bucle, the animation is running just the first time.
Steps to Replicate
Create a new appcelerator alloy project for windows
Open Index.xml and replace the code with the next:
<Alloy>
<Window class="container">
<!--Label id="label" onClick="doClick">Hello, World</Label-->
<View id='test' height='100' width='100' left='0' backgroundColor='red'/>
</Window>
</Alloy>
Open Index.js and replace the code with the next:
function animateBox() {
var animation = Titanium.UI.createAnimation();
//animation.backgroundColor = 'black';
animation.left = 100;
animation.duration = 1000;
var animationBack = Titanium.UI.createAnimation();
var animationHandler = function() {
//animation.removeEventListener('complete',animationHandler);
//animation.left = 0;
//animation.duration = 1000;
$.test.left = 100;
var animateBack = Ti.UI.createAnimation();
animateBack.left = 0;
animateBack.duration = 1000;
$.test.animate(animateBack);
var animationHandlerBack = function() {
//animationBack.removeEventListener('complete',animationHandlerBack);
animationBack.left = 0;
};
animation.addEventListener('complete',animationHandlerBack);
};
animation.addEventListener('complete',animationHandler);
$.test.animate(animation);
}
setTimeout(animateBox, 2000);
$.index.open();
Run
The box is just animating once
Expected Behavior
The animations should repeat.
Tested this example but animation does not repeat even on iOS. Would you update the example so we can validate it? FYI Classic app:
var win = Ti.UI.createWindow({ backgroundColor: 'green' }); var test = Ti.UI.createView({height:100, width:100, backgroundColor:'red', left:0}); win.add(test); function animateBox() { var animation = Titanium.UI.createAnimation(); animation.left = 100; animation.duration = 1000; var animationBack = Titanium.UI.createAnimation(); var animationHandler = function () { test.left = 100; var animateBack = Ti.UI.createAnimation(); animateBack.left = 0; animateBack.duration = 1000; test.animate(animateBack); var animationHandlerBack = function () { animationBack.left = 0; }; animation.addEventListener('complete', animationHandlerBack); }; animation.addEventListener('complete', animationHandler); test.animate(animation); } win.addEventListener('open', function () { setTimeout(animateBox, 2000); }); win.open();Hello, I have tested the code on Android and found that it animates only once. Then I changed the following line
toNow it does animate properly on android repeatedly with a time interval. But on Windows it animates properly the first time and then it keeps jumping and is not able to fulfill the animation. So it seems that it is a valid issue. Thanks *Environment*: *Device info:* Nexus7 (android 6.0.1) , Nokia Lumia (Windows Phone 8.1) *Node.js Version:* 0.12.7 *npm Version:* 2.11.3 *Titanium SDKs:* 5.2.2.GA and 5.2.1.GA *Java Development Kit Version:* 1.8.0_73 *Titanium CLI Version:* 5.0.5 *Appcelerator CLI Version:* 5.2.2 *Appcelerator Studio:* 4.4.0.201511241829Fixed by TIMOB-20598.
Closing as duplicate ticket is now closed.