No animations on android

[jakobgrannas]

Hi,

(I'm using sencha-touch-debug-all.js on Beta 3)

I have a question: Is it possible that too many components, or too much css3 could slow the app down so much that cardswitch animations are simply not shown because it took so long for the browser to render the card that it didn't have any 'power' left to do the animation? This only happens on Android, not on iOS or in Chrome on my PC.

I have a tabpanel based app containing a couple of card layout panels. On one of these panels I'm trying to call setActiveItem like in the example code below. The example code works fine, and the animations are shown (a little slow though, but still shown) but when I try to do the same thing in my app it just doesn't show the animation. It just switches card without any animation.

Ext.Loader.setConfig({enabled: true});


Ext.setup({
    onReady: function() {
        Ext.define('ContactCard', {
            extend: 'Ext.Panel',
            alias: 'widget.contactcard',
            config: {
                layout:{
                    type:'card',
                    animation:{
                        type:'slide',
                        direction:'left'
                    }
                },
                items:{
                    xtype:'panelcard'
                }
            },
            initialize: function() {
                this.callParent(arguments);


                this.onAfter('activeitemchange', function(scope, newCard, oldCard, eOpts) {
                    if(oldCard) {
                        oldCard.destroy();
                    }
                }, this);
            }
        });


        Ext.define('PanelCard', {
            extend: 'Ext.Panel',
            alias: 'widget.panelcard',
            config: {
                items: [
                    {
                        html: 'we party rawk'
                    },
                    {
                        xtype: 'button',
                        text: 'Left',
                        itemId: 'leftBtn'
                    },
                    {
                        xtype:'button',
                        text:'Right',
                        itemId:'rightBtn'
                    }
                ]
            },
            initialize: function() {
                this.callParent(arguments);


                this.down('#leftBtn').on('tap', function() {
                    var newCard = Ext.create('PanelCard');
                    this.parent.getLayout().setAnimation({ type: 'slide', direction: 'left'});
                    this.parent.setActiveItem(newCard);
                    this.parent.getLayout().setAnimation({ type: 'slide', direction: 'left'});
                }, this);


                this.down('#rightBtn').on('tap', function () {
                    var newCard = Ext.create('PanelCard');
                    this.parent.getLayout().setAnimation({ type:'slide', direction:'right'});
                    this.parent.setActiveItem(newCard);
                    this.parent.getLayout().setAnimation({ type: 'slide', direction: 'left'});
                }, this);
            }
        });


        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            items: [
                {
                    xtype: 'panel',
                    title: 'Home',
                    html: 'testing'
                },
                {
                    title: 'Contact',
                    xtype: 'contactcard'
                }
            ]
        });


    }
});

I might also add that both versions work perfectly fine in Chrome on my PC and the app works on iOS aswell. I've tested my app on a Samsung Galaxy S2 with android 2.3.5 (I think) and an iPhone 3GS with iOS 5, though I haven't tested the example code on a mobile device, only the android emulator.

[mitchellsimoens]

Android handle CSS3 pretty poorly. Chrome beta does a lot better job but not as well as iOS still.

[jakobgrannas]

So you can confirm that it is in fact possible that too much is happening for the browser to show the animation? I'm guessing apart from removing components the only thing i can do to make my app lighter is to minimize the amount of css3 used in my app?