I have superview (flashcardView ), i added the two subviews(frontView and backView) to this view. If user tap the any one of the view it flip and shows the other view. I am using the following code for achieve this functionality.
frontView.addEventListener('click', function(e) {
var animation = require('alloy/animation');
animation.flip( frontView,backView, 'horizontal',500, function(){
});
});
backView.addEventListener('click', function(e) {
var animation = require('alloy/animation');
animation.flip( backView,frontView, 'horizontal',500, function(){
});
This code is only working in iOS devices. It is not working in Android devices. Pls suggest me to do the flip animation for Android.
In Titanium available animations depend on the system (iOS or Android) you use. Therefore the code you use is only working for iOS. As far as I know there is no built-in flip animation for Android. But there is a solution by another user he gave in this answer.
Here is the code he uses:
var anim_minimize = Titanium.UI.createAnimation({width:0,duration:500});
var anim_maximize = Titanium.UI.createAnimation({width:320,duration:500});
tabGroup.animate(anim_minimize);
setTimeout(function(){
tabGroup.animate(anim_maximize);
},500);
Basically he creates the views next to each other and uses another animation which should look the same as a flip animation.
Another option you could try is using a module such as Flipium.
Related
I have a titanium app where I load a web view. In this web view I load a html5 with a chart.
I want to show a vertical line and get some information about the position of the line. This line will be controlled by a slider in Titanium App, so the line would change its position very fast and very often.
You can see something similar here: graph
In html file, I write the graph and I add a listener for an event. When the event is fired, it draw a line in some position with this code:
function updateVerticalLine(posX) {
drawSeries(c);
c.strokeStyle = '#000000';
c.beginPath();
c.moveTo(getXPixel(posX), graph.height() - yPadding);
c.lineTo(getXPixel(posX), 0);
c.stroke();
}
In Titanium app, I only fire the event when I receive the change slider event and I pass the new position of the line:
slider.addEventListener('change', function(e) {
Ti.App.fireEvent('sliderhtml5line:change', {
value : e.value
});
});
It works ok on ios, but on Android, it is very slow and events are disorganized.
Do you know how I can solve it? Is there any better option for this?
Thanks!!
it should be done the otherway.
when the user changes the slider, you should call the method in the HTML page using the evaljs function to update the user interface directly
I'm working on Titanium 2.1.3 and deploying for both iOS and Android.
I'm having trouble displaying images on ImageView on Android in a TableView, if I do something like clicking on the search bar and show the keyboard then the images are shown or if I scroll the TableView the images appear and disappear with no apparent reason. It seems that unless I do something that forces a layout refresh on the TableView, the images aren't rendered.
The images are being loaded the same way in both Android and iOS, which is like this:
var itemIconHolder = Titanium.UI.createView({
width : '100dp',
left : '55dp',
height : "100%"
});
var itemIcon = Titanium.UI.createImageView({
left : '0dp',
height : '100%',
});
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "thumb-" + filename);
itemIcon.image = f;
itemIconHolder.add(itemIcon);
This problem doesn't happen in iOS, on iOS devices/simulator the behaviour is normal and flawless, but on Android devices/emulator it happens.
Do I have to load the images differently in Android? Am I missing something? I hope someone could help me in this one.
Thanks in advance.
EDIT
I tried these approaches:
itemIcon.image = f.read();
and
itemIcon.image = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "thumb-" + filename);
but the images still aren't rendered until I make something that causes the TableView to refresh in some way.
I found a workaround for this particular issue on Android.
Since it takes a layout refresh for the images to be rendered properly, what I did was to animate the table, moving it 1dp in a direction and at the completition of said animation I animated it again to return it to its original position. This is the code I used:
var table_bottom = '-1dp'
var tableAnimation = Ti.UI.createAnimation({
bottom : table_bottom,
duration : 100
});
tableAnimation.addEventListener('complete', function(e){
var table_bottom = '50dp';
if (osname === 'android')
{
table_bottom = '0dp'
}
table.animate({
bottom : table_bottom,
duration : 100
});
});
I've encountered this kind of problem with both Titanium SDK 2.1.3 and Titanium 3.0.
I have built a slide show and right now I am trying to add swipe support that cross platform compatible. currently my jquery hammer js build works great on ios but not in android 4. in android my slide show will run until I try to swipe to another slide, then it stops working. Its a pretty simple setup. I only care about left and right swipe and want the default vertical scroll.
var hammertime = $('#slideshow').hammer();
hammertime.on("swipeleft", function(ev) {
ev.gesture.preventDefault();
swipeLeft();
});
hammertime.on("swiperight", function(ev) {
ev.gesture.preventDefault();
swipeRight();
});
slide will work perfectly in ios without the preventDefault() function, I put it in for android as it has given some success for android in the past, but this time yielded no extra results. Any ideas on whats causing android not to work at all here?
try this.
I found that hammer.js recoginze most of swipe touch as drag.
var hammertime = $('#slideshow').hammer();
hammertime.on("swipeleft dragleft", function(ev) {
ev.gesture.preventDefault();
swipeLeft();
});
hammertime.on("swiperight dragright", function(ev) {
ev.gesture.preventDefault();
swipeRight();
});
I'm wondering what is the best way to swap out two panels on the screen with a fade effect?
I have two panels which I have positioned over top of each other using CSS. panelOne is visible, panelTwo is hidden.
On click of another button (not on either panel), I want panelOne to fade out and panelTwo to fade in.
I currently have this working using the code below, but I find it's quite laggy on some Android devices we have here for testing. Is there a better way to do it than what I'm currently using? How can I improve this animation?
This code is executed on button tap:
Ext.Anim.run(panelOne, 'fade', {
duration: 100,
after: function() {
panelOne.hide();
}
});
Ext.Anim.run(panelTwo, 'fade', {
out: false,
duration: 100,
before: function() {
panelTwo.show();
}
});
Any help is much appreciated.
Thanks.
It's not necessary to use Ext.Anim such long.
For example, your app has an Ext.Container which contains panelOne and panelTwo as the first and second item, respectively.
Then if you want to navigate from panelOne to panelTwo with a fade animation, just simply use:
Ext.getCmp('your_container_id').animateActiveItem(1,'fade')
or you can do this:
Add showAnimation: 'fadeIn' to your panelTwo's config
Add hideAnimation: 'fadeOut' to your panelOne's config
Hope it helps.
to control other config, such as duration, use:
hideAnimation: {type:'fadeOut', duration: 1000}
I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.
I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.