Description
Using a sample app that animates a view's position on press, subsequent presses during an animation are not handled properly. each press seems to initiate the animation sequence on the same view from the current position, at the same time of the original animation. This is handled differently with iOS, in which a warning message is returned to the console for any additional presses of the view during an animation:
[WARN] : New layout set while view [object TiUIView] animating: Will relayout after animation.
A suggestion regarding this issue would be to achieve parity with iOS.
Steps to Reproduce
1. Create a classic mobile project on *Windows*
2. replace app.js with following sample code:
var win = Ti.UI.createWindow({backgroundColor:'green'});
var box = Ti.UI.createView({
backgroundColor: 'red',
left: 100,
height: '100',
width: '100'
});
var pin1 = Ti.UI.createView({
backgroundColor: 'blue',
left: 150,
height: '140',
width: '6'
});
var pin2 = Ti.UI.createView({
backgroundColor: 'blue',
left: 200,
height: '140',
width: '6'
});
var pin3 = Ti.UI.createView({
backgroundColor: 'blue',
left: 250,
height: '140',
width: '6'
});
win.add(pin1);
win.add(pin2);
win.add(pin3);
win.add(box);
var pos = 100;
box.addEventListener('click', function () {
pos += 50;
var a = Ti.UI.createAnimation({
left: pos,
duration: 2000,
});
box.animate(a);
});
win.open();
3. Build to Windows Phone device / emulator 10.0
4. Launch app
5. Press the red view, and press repeatedly as the animation is occurring.
Expected Result
subsequent presses of the element should not initiate additional animations at the same time, and should be ignored.
Actual Result
subsequent presses of the element initiates additional animations to the same view, at the same time.
https://github.com/appcelerator/titanium_mobile_windows/pull/731
Tested this ticket with the latest components. When applying multiple presses during a view animation, the following message is now returned to the console log:
On the first animation, multiple presses during the event won't initiate subsequent animations at the same time. However depending on how many presses were made, the second animation moves further than intended (Instead of moving +50 pxs, it moves an extra +50 for each press registered). Test Case: 1. Use the same demo code and project. 2. Click on View multiple times as it runs through its first animation. 3. Once the view has completed its first animation, press the view again *ONCE.* 4. Observe the distance that the second animation travels is proportionate to (Number of Clicks * 50px) Expected Result: Regardless of how many presses, each subsequent animation should travel 50px each time. *Reopening ticket*, as this issue should be addressed to improve the handling of view animations on multiple presses. Tested on: Windows 10 Pro Windows Phone 10.0 (Microsoft Lumia 640 LTE) Appc Studio: 4.7.0.201606220541 Ti SDK: 5.4.0.v20160627224205 Appc NPM: 4.2.7-2 Appc Core: 5.4.0-20 Node: v4.4.4[~htbryant] I think that the actual issue was due to the test code itself. In that example above, because the variable
posis increased every timeclickevent is fired...that makes you feel view travels way far than expected. So I would suggest testing a safer code like below, to make sure to increase destination only after animation is finished.var win = Ti.UI.createWindow({ backgroundColor: 'green' }); var box = Ti.UI.createView({ backgroundColor: 'red', left: 100, height: '100', width: '100' }); var pin1 = Ti.UI.createView({ backgroundColor: 'blue', left: 150, height: '140', width: '6' }); var pin2 = Ti.UI.createView({ backgroundColor: 'blue', left: 200, height: '140', width: '6' }); var pin3 = Ti.UI.createView({ backgroundColor: 'blue', left: 250, height: '140', width: '6' }); win.add(pin1); win.add(pin2); win.add(pin3); win.add(box); var pos = 150; box.addEventListener('click', function () { var a = Ti.UI.createAnimation({ left: pos, duration: 2000, }); a.addEventListener('complete', function () { pos += 50; }); box.animate(a); }); win.open();[~kota] Thank you for providing the safer test code. I can verify that with the 'complete' event set to handle the positioning value, the element does not travel farther than expected on multiple presses. Tested on: Windows 10 Pro Windows Phone 10.0 (Microsoft Lumia 640 LTE) Appc Studio: 4.7.0.201606220541 Ti SDK: 5.4.0.v20160627224205 Appc NPM: 4.2.7-2 Appc Core: 5.4.0-20 Node: v4.4.4 *Closing Ticket.*