Question

I was wondering if it’s possible to use custom animation in Sencha Touch 2. If I’ve done my homework correctly, then Sencha Touch by default does not provide any help with animation apart from the fade-in/out, sliders and other simple UI elements.

One would have to use CSS3 for animations, right? I wan’t to use an animation (let’s say something like this : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function3) in my app.

I wan’t the animation to load just after the initial loading screen but I’m not sure how to do that. Can someone help me out with the code? ELI5 please,since I’m new to ST, CSS and HTML5.

Answer 1

Ok @user1324579 this steps are:

1. Create a CSS3 class
2. Create one panel Sencha

3. On html tag put class CSS

   var panel = new Ext.Panel({
      id: 'yourIdPanel',
      fullscreen: true,
      style: 'background-color:#ffffff',
      html: '<div class="animation_css_class"></div>'
   })
   

4. To load you just after the initial loading screen with id panel above or,

   var mainPanel = new Ext.Panel({
       id:'pnlInicio',
       fullscreen:true,
       items : [panel],
       dockedItems: []
   })
   

I hope these helps. 🙂