Results 1 to 3 of 3

Thread: No animations on android

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    37
    Answers
    1
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Android handle CSS3 pretty poorly. Chrome beta does a lot better job but not as well as iOS still.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    37
    Answers
    1
    Vote Rating
    0
      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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •