Titanium – androidでbackgroundColorのアニメーションがうまくいかない件

新作も変わらずTitaniumでアプリを作っておりますが、
今回はもう少しマテリアルデザインぽくしたいなーと思い、
細かいアニメーションもなるべく資料に寄せるようにしているんですが、
例によってiphoneで動くのにandroidでは動かないみたいなことが多すぎて辟易しています。。
＃以下の現象はSDK 3.5.0GAにて検証しています。

一番はまっていたのが
viewをタップしたら背景色を変更し、離したら背景色を元に戻すというものなんですが、
＃いわゆるクリック感的なやつ
これを単純にbackgroundColorの入れ替えのみ行う分にはいいのですが、
それだとなんかせわしない感じなので、少しアニメーションにしたく。

//これはOK
var W = Ti.UI.createWindow();
W.open();

var view = Ti.UI.createView({height:200,width:200,top:50,left:50,backgroundColor:'#ffffff'});
view = changeColor(view,{start:'#00ffff',end:'#ffffff'});
W.add(view);

function changeColor(view,CSS){
	//Touch and change background color.
	view.addEventListener('touchstart',function(e){ e.source.backgroundColor = CSS.start; });
	view.addEventListener('touchend',function(e){ e.source.animate({backgroundColor:CSS.end}); });
	view.addEventListener('touchcancel',function(e){ e.source.animate({backgroundColor:CSS.end}); });
	return view;

};

こんな感じで、viewにtouchstartなどのリスナーを設定すればうまくいくわけですが
これをカスタマイズしようとすると一気にバグり放題になります。

borderRadiusの罠

上記のviewにちょっとおしゃれにしようとか色気付いてborderRadiusを設定するといきなりバグります。

//これはダメ
var view = Ti.UI.createView({height:200,width:200,top:50,left:50,backgroundColor:'#ffffff',borderRadius:10});

これを回避するにはborderRadiusを親のviewに設定してあげればOKです。
なのでこうなります。

//これはOK
var parent = Ti.UI.createView({height:200,width:200,top:50,left:50,borderRadius:10});
var view = Ti.UI.createView({backgroundColor:'#ffffff'});
parent.add(view);

borderColorの罠

ではborderRadiusuでなくborderColorを足してみたらどうでしょうか。
嫌な予感しかしません。

//これはNG
var parent = Ti.UI.createView({height:200,width:200,top:50,left:50});
var view = Ti.UI.createView({backgroundColor:'#ffffff',borderWidth:1,borderColor:'#ff0000'});
parent.add(view);

またバグりました。

同じようにborderColorも親のviewに渡しましょう

//これはOK
var parent = Ti.UI.createView({height:200,width:200,top:50,left:50,borderRadius:10,borderWidth:1,borderColor:'#ff0000'});
var view = Ti.UI.createView({backgroundColor:'#ffffff'});
parent.add(view);

動きました！

結論

結論、titanium-androidで背景色アニメーションをするときは、
border関係をすべて別のviewに切り出しましょう。
ちょっと古いですが、下記のサイトでも同様のバグっぽいのがでていました。
3.1.3ですが、ずっと続いているものなんですね。
http://umi-uyura.hatenablog.com/entry/2013/12/03/170517

Tweet