If you’ve ever trolled through Sencha Touch’s documentation you know how frustrating it can be – they assume that the reader is as proficient with Ext as the Sencha writer who created the doc. There are little to no code samples and what there is is usually provided by the community via the in-documentation commenting system. My assumption here is that the docs are generated from the commented source where one wouldn’t go into such detail thus what we have to work with.

One thing that you’ll likely have to research is configuring layout animations. The “showAnimation” and “hideAnimation” card properties each take a configuration object which the docs on those two properties shed no light on, among others.

Searching for “animation” within the docs reveals few clues among them a list of the animation types but again without further detail. The following is the list though you’ll soon see that some are yet to be implemented while others are iOS-only and one has its config properties completely commented out/disabled in the source:

  • cover
  • cube
  • fade
  • flip
  • pop
  • reveal
  • scroll
  • slide
  • wipe

Default Configs

Its nice to have a list but with no code samples readily available you’re forced to dig deeper into the docs and even into the source to see how to use the animations. I’ve gone ahead and done the digging and have compiled my own documentation on the topic and provided it all below.

There are a handful of config options (as can be seen here) but you’ll largely ignore them and use their default values. The defaults are:

from: {}

The default is empty object, otherwise an object containing CSS values that the animation begins with. If you define a CSS property here, you must also define it in the “to” config. For example:

from:{opacity:'0.5'}

to: {}

The default is an empty object, otherwise an object of CSS values that the animation begins with. If you define a CSS property here, you must also define it in the “from” config. For example:

to:{opacity:'1'}

duration: 250

The duration (number) of the animation in milliseconds. The default value is 250ms.

delay: 0

Delay (number) prior to starting the animation in milliseconds. The default is 0ms.

easing: ‘ease-in-out’

A string defaulting to “ease-in-out”. Valid values are “ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out” or a cubic-bezier curve as defined by CSS.

autoClear: true

A boolean defaulting to “true” where it will remove all custom CSS defined in the {@link #to} config when the animation is over.

out: true

Boolean, true if you want the animation to slide out of the screen.

direction: null

A string indicating the direction of the animation. Valid values are “left”, “right”, “up”, “down” and null. The default is null.

reverse: false

Boolean, “true” to reverse the animation direction. For example, if the animation direction was set to ‘left’, it would then use ‘right’. The default is false.

A quick reference chart

Below is a table showing the animation type support available in Sencha Touch 2 across iOS and Android

Animation Type Platform Support
Animation Type N/A iOS Android
cover X
cube X
fade X X
flip X
pop X X
reveal X
scroll X
slide X X
wipe X

Example Configs

And here are some sample configs for each animation type – note the inclusion of only those configs that are commonly used.

Cover

Not yet implemented.

Cube

Note that this does not work in Android.

Many of the config properties are commented out in the source. As a result below is all you can currently do to achieve a “cube” animation unless you edit the source itself and even then your mileage may vary (this is currently not a “cube” animation at all in Win Chrome 28 but some sort of cross wipe):

{
    type:cube
}

And with the duration configured:

{
    type:cube,
    duration: 250 // 250ms is the default,
}

Fade

A “fade” animation configuration object at minimum appears like so:

{
    type:'fade' // duration will default to 250ms
}

Here is a config object with other useful properties added

{
    type:'fade',
    duration:250, // in milliseconds, this is optional, the default value is 250
    out: false // boolean - determines if a "fade out" animation should occur this is hard to distinguish from "fade in"
}

Flip

Does not work in Android.

The minimun, as in the others, is just a config object with the “type” property set to “Flip”.

{
    type:'flip'
}

Additional settings – note that the “right” direction property value behaves the same as “left”.

{
    type:'flip',
    duration: 250, // 250ms is the default
    direction: 'left' // left (default), right (behaves as "left"), up, down
}

Pop

The minimum config object to get a “pop” animation:

{
    type:'pop'
}

Among the other config properties is the “scaleOnExit” property which is optional and defaults to true – the settings used for true/false of this property imply the following within the framework:

  • if true then:
    • toScale = 0.01
    • toOpacity = 0
  • if false then:
    • toOpacity = 0.8

A sample config with other properties:

{
    type:'pop',// "pop", for show animations, "popOut"for hide animations
    duration:250, // 250ms is the default
    out: false, // default is false
    scaleOnExit: true // default is true
}

Reveal

Not yet implemented.

Scroll

Not yet implemented.

Slide

The minimum “slide” config:

{
    type:'slide'
}

With additional config properties:

{
    type: 'slide',
    duration:250, // 250ms is the default
    direction: 'up', // left, right, up, down, null
    cover:true, // boolean
    out:true, // boolean
    reveal:true // boolean
}

Wipe

Does not work in Android. Apparently this is resource intensive as Sencha says it is best used on small displays (not tablets). This has no config options. The duration is 500ms.

(Doesn’t appear to be functional in Windows, Chrome 28)

{
    type:'wipe'
}