[TIMOB-10010] iOS: Animation: Animations produce jitters/flashes as they end
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2012-07-25T16:15:00.000+0000 |
Affected Version/s | Release 2.1.0, Release 2.1.1 |
Fix Version/s | Sprint 2012-15 Core, Release 3.0.0 |
Components | iOS |
Labels | core, module_animation, qe-ios060112, qe-testadded |
Reporter | Olga Romero |
Assignee | Neeraj Gupta |
Created | 2012-07-17T14:17:03.000+0000 |
Updated | 2012-08-24T11:33:35.000+0000 |
Description
Steps to reproduce:
1. Run the code below
{Code}
var _window = Ti.UI.createWindow();
_window.backgroundColor = 'green';
var box = Ti.UI.createView({
backgroundColor : 'red',
height : '150dp',
width : '100dp',
top: '50dp'
});
box.addEventListener('click', function() {
var matrix = Ti.UI.create2DMatrix().scale(1.5, 1.5);
var a = Ti.UI.createAnimation({
transform : matrix,
duration : 500,
autoreverse : true,
repeat : 2
});
box.animate(a);
});
_window.add(box);
var box2 = Ti.UI.createView({
backgroundColor: "blue",
top: "285dp",
height: "100dp",
width: "100dp"
});
box2.addEventListener("click", function() {
var matrix = Ti.UI.create2DMatrix().rotate(97);
box2.animate({transform: matrix, duration: 500, autoreverse: true, repeat: 2});
});
_window.add(box2);
_window.open();
{Code}
2. Click on the Red Box
3. Click on the Blue Box
Result:
Expected results:
After Step2: The red box should twice grow in size and shrink back with no animation artifact displayed
After Step3: The blue box should rotate twice and remain stationary at the end of the animation
Smooth animations without jitter or flash
similar behavior in TEST CASE #2
TEST CASE #3
No "jitter" or "flash" is seen on iPhone Sim 4.3, 5.0, 5.1. This is likely a device-specific (read: slow devices) issue only. Will test on a small range of physical devices (4.3.5, 5.x) in order to determine whether or not this is an appropriate report with a reasonable fix.
NOTE: One test case above does show a real bug, which is that for views which are repeatedly animated via rotation, they do not render correctly (Labeled as "Test case #2" above). Reproduction seems to be: * Rapidly click back and forth between the blue and red boxes while both are animating
Try KitchenSink Base UI>Animation>3D transform on any supported device, any supported os to see the "flash" mid-animation. Apologies for the code, this came out of our test harness. Added the missing "var "
Interestingly, this was a previous problem reported against iOS 3.x only in an earlier release of the SDK and did not appear in 4.x+. There must be a regression at some point.
Actually, it turns out that this is a very serious problem on several levels: *
autoreverse
(the key to many of these issues) does not properly reverse ALL changes - for example, if I animate background color changes, the background color does not revert to the original value. * The current animation subsystem is using antiquated methods (begin/commit) instead of more modern block dispatch. This appears to be causing some performance and synchronization problems, part of what leads to 'fuzzing' and bad/mixed-up behavior that this bug is related to. * Animation interacts *incorrectly with the view drawing subsystem*. This is the most important: calling\-\[TiViewProxy reposition]
triggers not just a refresh, but also a queuing of the view (and all of its subviews, AND possibly its parent) into the view layout processing system - meaning that there is both the immediate resize behavior *and* a queued resize which occurs after the animation has been completed (this leads to a lot of the "laying out while animating" messages seen in development). Note that this may not be as severe as I initially assumed (unrelated to this bug), but does cause unnecessary layout passes, possible bad interactions, and other nasties.Created issue TIMOB-10047 regarding
autoreverse
errors.Believe it or not, this is actually a native issue. I was able to create a simple test app which demonstrates the 'flash' behavior - not sure if this would be classified as a bug or not by Apple (certainly seems like it should be), where at the end of an autoreversed animation, the view does not appear as it did prior to beginning the animation. Going to file a radar about it and institute a native workaround where we manually autoreverse.
PR merged https://github.com/appcelerator/titanium_mobile/pull/2630
This issue still occurs on: Titanium Studio, build: 2.1.2.201208201549 Titanium SDK: 2.1.2.v20120821160113 Mac osx Mountain Lion 10.8 Device: iPhone4s 5.0.1 Note: Fixed in 2.2.0