Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-11321] Android: Transformations with 2D Matrices on Android produces flickering, ghosting, and other strange behavior.

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionNot Our Bug
Resolution Date2013-11-12T19:13:58.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 23, 2013 Sprint 23 Core
ComponentsAndroid
Labelsallen-review, core, look1, triage
ReporterSeth Benjamin
AssigneeAllen Yeung
Created2012-10-09T17:03:29.000+0000
Updated2017-03-21T20:57:13.000+0000

Description

Not entirely sure whats happening here but it seems as though Android's 2Dmatrix function, particularly the translate function therein, doesn't work as expected. We get massive amounts of flickering, occasional ghosting, and the frame/proxy doesn't update when transformed. You can see the visual comparison here: Android: [Video](http://f.cl.ly/items/1X3V0e2X1x0U0R2S3n1C/Screen%20Recording%202.mov) iOS: [Video](http://f.cl.ly/items/3r3r0f0D1e3m3i2C3p0h/Screen%20Recording%203.mov) The code used to produce both videos: [http://pastie.org/5025145] SDKs used: 2.1.3 & 3.0 Note: Testing on the device was no different than testing in the emulator.
var debounce = function(func, threshold, execAsap) {
	var timeout;
	return function debounced() {
		var obj = this, args = arguments;
		function delayed() {
			if (!execAsap)
				func.apply(obj, args);
			timeout = null;
		};

		if (timeout)
			clearTimeout(timeout);
		else if (execAsap)
			func.apply(obj, args);

		timeout = setTimeout(delayed, threshold || 100);
	};
};

var win = Ti.UI.createWindow({
	backgroundColor : 'white'
});

var square = Ti.UI.createView({
	backgroundColor : 'black',
	width : 100,
	height : 100
});

var curX = 0;
var curY = 0;
var matrix = Ti.UI.create2DMatrix();

square.addEventListener('touchstart', function(e) {
	curX = e.x;
	curY = e.y;
});

square.addEventListener('touchmove', debounce(function(e) {
	var deltaX = e.x - curX;
	var deltaY = e.y - curY;

	matrix = matrix.translate(deltaX, deltaY);

	square.transform = matrix;
}, 10, false));

win.add(square);
win.open();

Comments

  1. Allen Yeung 2013-07-20

    Resolved as a part of https://github.com/appcelerator/titanium_mobile/pull/4398
  2. Lokesh Choudhary 2013-10-23

    I am still able to see the flickering behavior on android. Reopening. Environment: Appcel Studio : 3.2.0.201310230601 Ti SDK : 3.2.0.v20131022171645 Mac OSX : 10.8.5 CLI - 3.2.0 with hash 72f7426b4ee6c2d2883c666d5b7e03906a16012f Device: Samsung Galaxy S4 running android 4.2.2 Android Emulator : 4.2.2
  3. Ping Wang 2013-11-08

    This issue is not resolved by TIMOB-11811 because in this test case, it uses a 2DMatrix to transform the view and this 2DMatrix is the result of concatenating the translation operation more than once. In this case, we can not use the Honeycomb+ Property Animators so we can only use the old-style view animations. (refer [here](https://github.com/appcelerator/titanium_mobile/blob/master/android/titanium/src/java/org/appcelerator/titanium/util/TiAnimationBuilder.java#L81) for more info) Prior to Honeycomb, the animations changed the visual appearance of the target objects... but they didn't actually change the objects themselves. Please refer to http://android-developers.blogspot.com/2011/02/animation-in-honeycomb.html for more details. Therefore, although the square view is rendered in another position, it is still only responded to the touch in the original position. Resolved the ticket as Not Our Bug.
  4. Lee Morris 2017-03-21

    Closing this ticket as the issue is not our bug.

JSON Source