1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    16
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Answered: Custom startup animation in CSS...has anyone done this?

    Answered: Custom startup animation in CSS...has anyone done this?


    Hi,

    I was thinking about making a custom startup animation in CSS to replace the one that is automatically generated by the framework.

    Has anyone done this before? I didn't want anything too fancy, just some animated objects moving around with perhaps a fading in and out loading text/animation, I was thinking to create this in Flash and then export to css with something like Google Swiffy, that converts to HTML/Javascript. Would this approach work, or would it be better to use Sencha Animator to create the most suitable/optimized animation for Sencha Touch?

    Thanks

  2. Sencha Animator is strongly suggested when you need to create custom complex animations, however, since you are going to replace the startup animation, I recommend you to don't use any of your mentioned tools.
    That simple default startup animation is just used to provide a visive feedback that the app is not frozen but something is loading so you need to wait, however, if you create an heavy animation as replacement, you will increase the app loading time, just to load the loading animation...you understand that doesn't make sense.
    For this reason, if you really want to customize it, I suggest you to create something simple just by using direct CSS3 animations on a bunch of dom elements.
    I'm talking about best practices but you are absolutely free to do what you want.

    Hope this helps.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Sencha Animator is strongly suggested when you need to create custom complex animations, however, since you are going to replace the startup animation, I recommend you to don't use any of your mentioned tools.
    That simple default startup animation is just used to provide a visive feedback that the app is not frozen but something is loading so you need to wait, however, if you create an heavy animation as replacement, you will increase the app loading time, just to load the loading animation...you understand that doesn't make sense.
    For this reason, if you really want to customize it, I suggest you to create something simple just by using direct CSS3 animations on a bunch of dom elements.
    I'm talking about best practices but you are absolutely free to do what you want.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  4. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    16
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Awesome

    Awesome


    Awesome thanks....I was just thinking of creating a simple CSS animation like a simple fade-in of the picture and a loading animation. That shouldn't be too heavy on resources but would add an extra bit of polish to the app.

    :-)

Thread Participants: 1

Tags for this Thread