PDA

View Full Version : [FIXED] Sliding performance on IOS5 !



olouvignes
13 Oct 2011, 6:21 AM
Just tested my app on my device, running fine.

However, transitions between pages are much more sluggish than compared to 1.x !

It is slower, doesn't get any ios-like-math effect (like EaseOutExpo...)
And worse, it gets like a second to start !
Touch the button, wait 500ms-1s animation starts.

Here is the code i use :



items: [
{
xtype: 'button',
text: 'Register',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {
Ext.getCmp('viewport').setActive('register', {type: 'slide', direction: 'left'});
}
}
]


With setActive defined like this in my Viewport :



setActive: function(target, animation) {
var containerLayout = this.getLayout(),
targetComponent = this.getComponent(target);
containerLayout.setAnimation(animation || containerLayout.getAnimation());
this.setActiveItem(targetComponent);
},


Please tell me i can expect an UI-Experience at least as good as with 1.X !

senchito
13 Oct 2011, 6:53 AM
ack!! really?? 2.0 was supposed to make everything FASTER.. not the other way around... /worried

TommyMaintz
13 Oct 2011, 7:35 AM
In our testing the animations are very fast on iOS. Could you give us some more details about the app, like the type of card you are animating to etc? Also, are you dynamically loading the register view when you click the button?

Basically it would be helpful if you could share some more of your source code.

Jamie Avins
13 Oct 2011, 7:39 AM
Do you use much custom CSS in your application? Also, do you experience this animation start delay all the time or only on the first action you use?

olouvignes
13 Oct 2011, 7:52 AM
In fact my app is really simple (one viewport, two childViews).
I removed any customized css.

Slide feels good on chrome/simulator but lags on device (running with phonegap 1.1.0).

Playing with register & back button to go back & forth
Animation start is delayed everytime.

Running on an iPhone4 restored yesterday (clean restore from iCloud) on IOS5.

Here is my app.js :


Ext.application({

name: 'MyApp',


controllers: [/*'Sessions'*/],
autoCreateViewport: true,
viewport: {
autoMaximize: false
},


launch: function() {
this.launched = true;
this.mainLaunch();
},


mainLaunch: function() {
if ((Ext.os.deviceType == 'Phone' && !device) || !this.launched) {return;}
}


});

A view/Viewport.js :


Ext.define('MyApp.view.Viewport', {

id: 'viewport',
extend: 'Ext.Container',
requires: [
],


controllers: [/*'Sessions'*/],
views: ['Login', 'Register'/*, 'Container'*/],


config: {
layout: {
type: 'card',
animation: {type: 'slide'}
}
},


setActive: function(target, animation) {
var start = new Date().getTime();
var containerLayout = this.getLayout(),
targetComponent = this.getComponent(target);
console.warn(new Date().getTime() - start);
containerLayout.setAnimation(animation || containerLayout.getAnimation());
console.warn(new Date().getTime() - start);
this.setActiveItem(targetComponent);
console.warn(new Date().getTime() - start);
},


constructor: function(config) {
console.log(this.self.getName() + '::constructor()', [this, arguments]);
//this.initConfig(config); // not working
this.callParent([config]);
},


initialize: function() {
console.log(this.self.getName() + '::initialize()', [this, arguments]);

this.add([
{'xtype':'login'},
{'xtype':'register'},
//{'xtype':'container'}
]);

Ext.Viewport.add(this);

this.callParent();
}


});

an view.session.Login :


Ext.define('MyApp.view.session.Login', {

id: 'login',
name: 'Login',
alias: 'widget.login',
extend: 'Ext.form.FormPanel',
//requires: ['Ext.Animator'],


config: {
items:[{
xtype: 'toolbar',
title: 'myapp',
docked: 'top',
ui: 'dark'
}]
},


initialize: function() {
console.log(this.self.getName() + '::initialize()', [this, arguments]);


// Configure component
this.add([{
xtype: 'fieldset',
id: 'LoginFieldset',
title: 'Login',
items: [
{
xtype: 'emailfield',
placeHolder: 'email',
name: 'email',
id: 'email',
required: true,
}, {
xtype: 'passwordfield',
placeHolder: 'password',
name: 'password',
required: true
}, {
xtype: 'togglefield',
name: 'remember_me',
label: 'Save login?',
labelWidth: '60%'
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {
}
}
]},
{
xtype: 'fieldset',
title: 'New user?',
items: [
{
xtype: 'button',
text: 'Register',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {
Ext.getCmp('viewport').setActive('register', {type: 'slide', direction: 'left'});
}
}
]}
]);


this.callParent();
}


});

And finally a view.user.Register :


Ext.define('MyApp.view.user.Register', {

id: 'register',
name: 'Register',
alias: 'widget.register',
extend: 'Ext.form.FormPanel',
requires: [],


config: {
items:[{
xtype: 'toolbar',
title: 'Register',
docked: 'top',
ui: 'dark',
items: [
{
text: 'Back',
ui: 'back',
xtype:'button',
listeners: {
'tap': function () {
Ext.getCmp('viewport').setActive('login', {type: 'slide', direction: 'right'});
}
}
}
]
}]
},


initialize: function() {
console.log(this.self.getName() + '::initialize()', [this, arguments]);


// Configure component
this.add([
{
xtype: 'fieldset',
title: 'About you',
items: [
{
xtype: 'textfield',
id: 'firstName',
name: 'firstName',
placeHolder: 'first name',
required: true,
},
{
xtype: 'textfield',
placeHolder: 'last name',
name: 'lastName',
id: 'lastName',
required: true,
},
{
xtype: 'button',
text: 'Register',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {
}
}
]
}]);


this.callParent();
}


});

Jamie Avins
13 Oct 2011, 7:54 AM
Awesome test case, thanks!

olouvignes
13 Oct 2011, 2:02 PM
After testing back with 1.x app on my iphone it seems that it is not that much slower on 2.x on an iPhone4.

Was comparing my last test with an iPad2 perf on 1.x (everything is perfectly smooth) vs an iPhone4 on 2.x today, tested back 1.x on my iPhone4 tonight, if it is indeed slow (delay), but not really that much slower.

I guess i did expect a perfect user experience with an iPhone4 running IOS5.

Jamie Avins
13 Oct 2011, 3:28 PM
After testing back with 1.x app on my iphone it seems that it is not that much slower on 2.x on an iPhone4.

Was comparing my last test with an iPad2 perf on 1.x (everything is perfectly smooth) vs an iPhone4 on 2.x today, tested back 1.x on my iPhone4 tonight, if it is indeed slow (delay), but not really that much slower.

I guess i did expect a perfect user experience with an iPhone4 running IOS5.
Maybe they just want us all to buy the 4s (mine will be here tomorrow :) )

edspencer
13 Oct 2011, 10:58 PM
I've had an iPhone 4 for a while. It's a slow device, though iOS 5 makes it a good deal faster (ST 2.0 starts almost twice as fast with iOS 5 compared with iOS4 on the same hardware). We've focused most of our attention on Android so far so it is possible we've regressed on iPhone, there'll be lots of optimizing over the coming few releases though