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}
Related
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.
I have this example: http://codepen.io/poliveira89/pen/VeZLJX/
One this example, I have a <ion-nav-view></ion-nav-view> where I insert a Tab View with 2 tabs (Home and About) with nested views and nested states, as well.
My main focus: retrieve screen/device orientation and dynamically rearrange content for Portrait and Landscape orientation.
On the Home tab is what I "pretend" to achieve => update View (HTML) regarding the Models changes after a screen rotation. Which clearly does not work on emulator and real device.
I duplicated the example on About tab, because on Home tab does not work, but I have changed the code a little bit I have tried some "refresh" trigger with a button (ng-click) and $timeout with an alert. And when I click the button the View refresh the HTML with the new values on Model.
Note: I have tried with other triggers - $http, $interval, ...
I thought that could be something related to "cache" on the NavView, like this:
.state('tabs.home', {
url: "/home",
cache: false,
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
But, after I disable it, nothing have changed and still does not work.
PS: Screen Rotation/Orientation listener works, on emulator and real device, I have debugged on console messages.
What could be not working properly on Angular or Ionic? Or why only updates the View after the triggers?
It's because you're updating the $scope outside of the Angular digest loop.
Try:
$scope.$apply(function() {
$scope.orientation = $window.orientation;
});
Situation: hammer.js 2.0.4, jQuery 2.1 on a Cordova cross-platform mobile app. I was running into well-documented (for example) issues with delay of click events, so I thought I'd try hammer.js for this. It works beautifully on my iPad, but on my Android phone (Android v4.4) is dreadful: very slow to respond, and frequently misses taps entirely.
I implemented my own small tap detection (using mouseUp events) and it performs much better than Hammer.js on my Android (but terribly on my iPad).
So my question is: are there known issues for hammer.js on Android, or known workarounds? I'd really prefer not to conditionally use two different approaches based on platform, especially when there is no conceivable way for me to test all possible mobile platforms.
Example of the hammer.js tap code; nothing very interesting going on:
$(".menuitem").each( function(i, elem) {
var mc = new Hammer.Manager(elem);
mc.add(new Hammer.Tap());
mc.on("tap", action);
});
In addition there is a top-level swipe recognizer that covers the entire page:
var swipelistener = new Hammer($("body")[0], {
recognizers: [[Hammer.Swipe,{ direction: Hammer.DIRECTION_RIGHT }]]
});
swipelistener.on("swipe", swipeRight );
In total there will be fewer than two dozen elements responding to tap events, and no overlapping or nested elements. I thought it might have something to do with the swipe recognizer overlapping the tap recognizers, but removing the swipe listener didn't change the tap behavior at all.
You need to play with the settings of each recognizer.
hammertime.get('swipe').set({
direction: hammer.DIRECTION_ALL, threshold: 1, velocity: 0.1
});
This worked for me for swipe on 4.1.1
Would be really helpful if someone could write some example code for tap as I'm still fiddling with that.
Also, you don't need mc.add as the Manager by default has all the recognizers. You only need to use .add once you've manually removed (using mc.remove) one.
If you are unsure what settings any of the recognizers have, look on their website eg http://hammerjs.github.io/recognizer-swipe/ shows that I could set direction, threshold and velocity etc as per the code above.
As I can see you need to detect swipe on entire screen without any specific options. Maybe cordova-android-gestures (only for Android) helps you? This plugin "catches" gestures on total device surface. So, for detect swipes:
//check the platform
if (device.platform=="Android") {
MegaduckGestures.swiper(function(direction){
switch (direction) {
case 'rightSwipe':
//do your staff
break;
case 'leftSwipe':
//do your staff
break;
default: break;
}
});
}
else {
//use your iPad approach
}
And for handling tap on menu item:
$(".menuitem").each( function(i, elem) {
//check the platform
if (device.platform=="Android") {
MegaduckGestures.swiper(function(direction){
if (direction=='singleTap') {
//do your staff
}
});
}
else {
//use your iPad approach
}
});
I have 2 MyGameScreen objects that extends cocos2d::CCLayer. I am capturing the ccTouchesMove of the first screen so that I can create the moving effect exactly like sliding between pages of iOS application screen.
My class is like so:
class MyGameScreen: public cocos2d::CCLayer {
cocos2d::CCLayer* m_pNextScreen;
}
bool MyGameScreen::init() {
m_pNextScreen = MyOtherScreen::create();
}
void MyGameScreen::ccTouchesMoved(CCSet *touches, CCEvent *event){
// it crashes here... on the setPosition... m_pNextScreen is valid pointer though I am not sure that MyOtherScreen::create() is all I need to do...
m_pNextScreen->setPosition( CCPointMake( (fMoveTo - (2*fScreenHalfWidth)), 0.0f ) );
}
EDIT: adding clear question
It crashed when I try to setPosition on m_pNextScreen...
I have no idea why it crashed as m_pNextScreen is a valid pointer and is properly initialized. Could anybody explain why?
EDIT: adding progress report
I remodelled the whole system and make a class CContainerLayer : public cocos2d::CCLayer that contains both MyGameScreen and MyOtherScreen side by side. However, this looked like not an efficient approach, as when it grows I may need to have more than 2 pages scrollable side by side, I'd prefer to load the next page only when it is needed rather than the entire CContainerLayer that contains all the upcoming pages whether the user will scroll there or not... Do you have any better idea or github open source sample that does this?
Thank you very much for your input!
Use paging enable scrollview.download files from following link and place in your cocos2d/extenision/gui/ after that you have to set property of scrollview to enablepaging true with paging view size.
https://github.com/shauket/paging-scrollview
For Scene Transitions you can do this:
void MyGameScreen::ccTouchesMoved(CCSet *touches, CCEvent *event)
{
CCScene* MyOtherScene = CCTransitionFadeUp::create(0.2f, MyOtherScreen::scene());
CCDirector::sharedDirector()->replaceScene(MyOtherScene);
}
Problem is that swipeleft/swiperight event is trigger when I want vertical scroll.
We are using jQuery mobile 1.1.0 version and jQuery 1.7.1.
and code is:
$(document).delegate('#quizResumePage', 'swipeleft swiperight', function (event) {
event.stopImmediatePropagation();
if (event.type == 'swipeleft') {
$('#btnnext').trigger('click');
} else if (event.type == 'swiperight') {
$('#btnprevious').trigger('click');
}
event.preventDefault();
});
Then why swipe event trigger when I want to scroll the page?
This problem is occur in the Samsung galaxy android 2.3.5...
Can any one help me for this issue?
You can control how the swipe event works changing the values of the following object
$.extend($.event.special.swipe,{
scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
durationThreshold: 1000, // More time than this, and it isn't a swipe.
horizontalDistanceThreshold: 30, // Swipe horizontal displacement must be more than this.
verticalDistanceThreshold: 75, // Swipe vertical displacement must be less than this.
});
place it on your code before listening to the swipes. Change for example the verticalDistanceThreshold to 15 and the durationThreshold to 500 that will help to reduce the false positive.
On the other side, in your code you're triggering the click event on your buttons, while that works, a better approach would be to call directly the method that executes next/previous actions.
Good luck!