I need to do a crossfade animation between views for my project. Which is the best way to produce animation and creating views/windows which one is best. Suggest me a solutions for this work around? Am using Titanium 3.1.2.GA, Alloys and Android Emulator for my testing environment. Any examples may be appriciated? My thread in appcelerator forum
index.xml
<Alloy>
<Window id="fblogin" class="container">
<Require src="loginsuccess" id="loginsuccess"></Require>
<Require src="loginFailure" id="loginFailure"></Require>
<Require src="loginPage" id="loginPage"></Require>
</Window>
</Alloy>
loginPage.xml
<Alloy>
<View class="container">
<LoginButton ns="Alloy.Globals.Facebook"/>
<Button title="Google"></Button>
</View>
</Alloy>
loginFailure.xml
<Alloy>
<View class="container">
<Label>Login Failed. Please try again later.</Label>
</View>>
</Alloy>
loginsuccess.xml
<Alloy>
<View class="container">
<Label>Login Successful</Label>
</View>
</Alloy>
index.js
var animation = require('alloy/animation');
var loginPage = $.loginPage;
var loginsuccess = $.loginsuccess;
var loginFailure = $.loginFailure;
function loginFails(){
animation.crossFade(loginPage, loginFailure, 500, function(){});
}
function loginSuccess(){
animation.crossFade(loginPage, loginsuccess, 500, function(){});
}
$.fblogin.open();
Referring to the problem description from your link:
Now if I call loginFails() or loginSuccess(), then its showing error because its in controller Index and not in other view controller. How to solve this?
In order to reference an element inside a required view, you have to use getView('elementId').
index.xml
<Alloy>
<Window id="fblogin" class="container">
<Require src="loginsuccess" id="loginsuccess"></Require>
<Require src="loginFailure" id="loginFailure"></Require>
<Require src="loginPage" id="loginPage"></Require>
</Window>
</Alloy>
loginsuccess.xml
<Alloy>
<View class="container" id="successContainer" visible="false">
<Label>Login Successful</Label>
</View>
</Alloy>
index.js
var successView = $.loginsuccess.getView('successContainer');
You can now perform your crossfade on successView.
Edit:
Added visible="false" to the container view