1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    37
    Answers
    1
    Vote Rating
    0
    jakobgrannas is on a distinguished road

      0  

    Default Unanswered: No animations on android

    Unanswered: No animations on android


    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.

    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Android handle CSS3 pretty poorly. Chrome beta does a lot better job but not as well as iOS still.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    37
    Answers
    1
    Vote Rating
    0
    jakobgrannas is on a distinguished road

      0  

    Default


    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?

Thread Participants: 1