Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25731] Android: Glitch on backgroundColor animation with borderRadius

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionDuplicate
Resolution Date2018-03-09T18:32:13.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labelsandroid, animation, backgroundColor, rounded
ReporterSandro Lain
AssigneeGary Mathews
Created2018-01-26T13:18:32.000+0000
Updated2018-03-09T18:32:13.000+0000

Description

Background color animation in rounded-angle views changes the color to the rectangle behind the view, but the shape with rounded corners does not animate. I enclose two comparison videos on iOS and Android. Example code:

// $.win is the Window View in index.xml Alloy controller

var view1 = $.UI.create('View', {
	width: 100,
	height: 100,
	top: 110,
	backgroundColor: "#FF0000",
	borderRadius: 50
});

$.win.add(view1);


var view2 = $.UI.create('View', {
	width: 100,
	height: 100,
	top: 220,
	backgroundColor: "#FF0000",
	borderRadius: 50
});

$.win.add(view2);


$.win.addEventListener('open', function()
{
	var ani1up = function()
	{
		view1.animate({
			backgroundColor: '#0000FF',
			duration: 500
		}, function()
		{
			ani1down();
		});
	};
	var ani1down = function()
	{
		view1.animate({
			backgroundColor: '#FF0000',
			duration: 500
		}, function()
		{
			ani1up();
		});
	};
	
	var ani2up = function()
	{
		view2.animate({
			backgroundColor: '#0000FF',
			duration: 2000
		}, function()
		{
			ani2down();
		});
	};
	var ani2down = function()
	{
		view2.animate({
			backgroundColor: '#FF0000',
			duration: 2000
		}, function()
		{
			ani2up();
		});
	};
	
	ani1up();
	ani2up();
});


$.win.open();

Attachments

FileDateSize
android.mov2018-01-26T13:16:12.000+0000796413
ios.mov2018-01-26T13:16:14.000+0000755131

Comments

  1. Sharif AbuDarda 2018-01-27

    Hello, I have tested the issue with SDK 7.0.1.GA, I was able to reproduce the issue as described with Android. "Background color animation in rounded-angle views changes the color to the rectangle behind the view, but the shape with rounded corners does not animate." this works fine in iOS. Thanks.
  2. Joshua Quick 2018-02-03

    [~sdarda], can you test this on Android 6.x or older OS versions please? I ask because this might be a bug on Google's end. See the following Google bug report. It affects Android 7.0 and higher and they haven't fixed it yet. It'll affect any views that have rounded borders and are animated. https://issuetracker.google.com/issues/37123819
  3. Gary Mathews 2018-03-09

    master: https://github.com/appcelerator/titanium_mobile/pull/9900
  4. Gary Mathews 2018-03-09

    Closing, duplicate of TIMOB-25835

JSON Source