Problem Description
Ti.UI.animation with backgroundColor doesn't work with 3.3.0. We tested this issue with our sample code. Its working well as we expected in Titanium SDK version 3.2.3 GA
but its not working in Titanium SDK version 3.3.0 RC.It’s a bug.
Testing Environment
Titanium SDK: 3.2.3.GA and 3.3.0.RC
Titanium CLI: 3.2.3
OS X Version: 10.9.3
IOS Simulator: 7.1
Android API Level: 17 and 19
TEST CODE
XML Markup
<Alloy>
<Window class="container" id="win">
<Button id="signinBtn" class="frmBtn" onClick="didClick"/>
</Window>
</Alloy>
TSS
".container": {
backgroundColor: "white",
navBarHidden: "true"
},
".frmBtn":{
top: 30,
width: Ti.UI.FILL,
height: 50,
backgroundColor: "#3a97d4",
borderRadius: 15,
color: "#fff",
font: {
fontFamily: "SourceSansPro-Bold",
fontSize: 22
},
textAlign: "center"
},
".frmBtn[formFactor=tablet]":{
width: "40%"
},
".frmBtn[platform=ios]":{
style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
},
"#signinBtn":{
titleid: "login"
}
index.js(Controller)
$.win.open();
function didClick(e) {
var view = e.source;
//view.setBackgroundColor("red");
var animation = Titanium.UI.createAnimation();
animation.backgroundColor = 'black';
animation.duration = 1000;
var animationHandler = function() {
animation.removeEventListener('complete', animationHandler);
animation.backgroundColor = 'orange';
view.animate(animation);
};
animation.addEventListener('complete', animationHandler);
view.animate(animation);
console.log("signin");
}
STEPS TO REPRODUCE:
a) Create a simple project.
b) Update this code in app.js
c) Run this with testing environment
TESTING RESULT(Titanium SDK: 3.3.0.RC):
In iOS : Nothing happens.Only show the Button.
In Android : The backgroundColor of the curved area (in TSS I have given a border Radius)
only changing and rest remains same.
Original reporter [~mano_mykingdom].
This is not an Alloy issue. The following Classic project demonstrates the same behavior. Both samples fail to animate the bg color if you use hex values rather than named strings.
var win = Titanium.UI.createWindow({ title:'Tab 1', backgroundColor:'#fff' }); var btn = Ti.UI.createButton({ top: 30, width: Ti.UI.FILL, height: 50, backgroundColor: "#3a97d4", borderRadius: 15, color: "#fff", font: { fontFamily: "SourceSansPro-Bold", fontSize: 22 }, textAlign: "center", title: 'login' }); btn.addEventListener('click', didClick); win.add(btn); function didClick(e) { var view = e.source; //view.setBackgroundColor("red"); var animation = Titanium.UI.createAnimation(); animation.backgroundColor = 'black'; /*#000 also fails to work*/ animation.duration = 1000; var animationHandler = function() { animation.removeEventListener('complete', animationHandler); animation.backgroundColor = 'orange'; view.animate(animation); }; animation.addEventListener('complete', animationHandler); view.animate(animation); console.log("signin"); } win.open();