Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10010] iOS: Animation: Animations produce jitters/flashes as they end

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-07-25T16:15:00.000+0000
Affected Version/sRelease 2.1.0, Release 2.1.1
Fix Version/sSprint 2012-15 Core, Release 3.0.0
ComponentsiOS
Labelscore, module_animation, qe-ios060112, qe-testadded
ReporterOlga Romero
AssigneeNeeraj Gupta
Created2012-07-17T14:17:03.000+0000
Updated2012-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

Comments

  1. Olga Romero 2012-07-17

    similar behavior in TEST CASE #2
       var _window = Ti.UI.createWindow();
       			_window.backgroundColor = 'white';
       			
       			var box = Ti.UI.createView({
       				backgroundColor : 'red',
       				height : '120',
       				width : '100',
       				top: 70
       			});
       			var box2= Ti.UI.createView({
       				backgroundColor : 'blue',
       				height : '120',
       				width : '100',
       				top: 250
       			});
       			
       			box.addEventListener('click', function() {
       				var matrix = Ti.UI.create2DMatrix()
       				matrix = matrix.rotate(90);
       				matrix = matrix.scale(2, 2);
       				var a = Ti.UI.createAnimation({
       					transform : matrix,
       					duration : 500,
       					autoreverse : true,
       					repeat : 2
       				});
       				box.animate(a);
       			});
       			//Animating the second box by defining the scale before rotation
       			box2.addEventListener('click', function() {
       				var matrix = Ti.UI.create2DMatrix()
       				matrix = matrix.scale(2,2);
       				matrix = matrix.rotate(90);
       				 
       				var a = Ti.UI.createAnimation({
       					transform : matrix,
       					duration : 500,
       					autoreverse : true,
       					repeat : 2
       				});
       				box2.animate(a);
       			});
       			
       			_window.add(box);
       			_window.add(box2);
       _window.open();
       
    TEST CASE #3
       var _window = Ti.UI.createWindow();
       
       		_window.backgroundColor = 'black';
       		var fromColor = 'green';
       		var toColor = 'blue';
       
       		var v = Ti.UI.createView({
       			width : '100',
       			height : '100',
       			backgroundColor : fromColor
       		});
       
       		var b = Ti.UI.createButton({
       			title : 'Animate',
       			bottom : '40',
       			left : '10'
       		});
       
       		b.addEventListener('click', function() {
       			v.animate({
       				backgroundColor : toColor,
       				duration : 500
       			});
       		});
       		var b1 = Ti.UI.createButton({
       			title : 'Reset',
       			bottom : '40',
       			right : '10'
       		});
       
       		b1.addEventListener('click', function() {
       			v.backgroundColor = toColor;
       			v.backgroundColor = fromColor;
       		});
       		var v1 = Ti.UI.createView({
       			width : '50',
       			height : '50',
       			backgroundColor : 'white'
       		});
       
       		_window.add(v);
       		_window.add(b);
       		_window.add(b1);
       		_window.add(v1);
       _window.open();
       
  2. Stephen Tramer 2012-07-18

    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.
  3. Stephen Tramer 2012-07-18

    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
  4. Eric Merriman 2012-07-18

    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 "
  5. Stephen Tramer 2012-07-18

    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.
  6. Stephen Tramer 2012-07-19

    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.
  7. Stephen Tramer 2012-07-19

    Created issue TIMOB-10047 regarding autoreverse errors.
  8. Stephen Tramer 2012-07-19

    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.
  9. Max Stepanov 2012-07-25

    PR merged https://github.com/appcelerator/titanium_mobile/pull/2630
  10. Olga Romero 2012-08-24

    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

JSON Source