[TIMOB-11321] Android: Transformations with 2D Matrices on Android produces flickering, ghosting, and other strange behavior.
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Not Our Bug |
Resolution Date | 2013-11-12T19:13:58.000+0000 |
Affected Version/s | n/a |
Fix Version/s | 2013 Sprint 23, 2013 Sprint 23 Core |
Components | Android |
Labels | allen-review, core, look1, triage |
Reporter | Seth Benjamin |
Assignee | Allen Yeung |
Created | 2012-10-09T17:03:29.000+0000 |
Updated | 2017-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();
Resolved as a part of https://github.com/appcelerator/titanium_mobile/pull/4398
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
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.
Closing this ticket as the issue is not our bug.