Animation

Problem

How to add animation to an app?

Solution

The only control where you can change animation type is multiview (see details about multiview here).

Animation Types

There are 2 animation types with a few subtypes:

  • slide
    • together
    • in
    • out
  • flip
    • horizontal
    • vertical

Setting the desired type (subtype)

By default, multiview uses SLIDE animation of TOGETHER subtype.

You can change the default animation values in three ways:

  1. In an object constructor while multiview creating by means of the parameter animate. New specified values will 'rewrite' the default ones.

    dhx.ui({
            view:"multiview",
            cells:[{ ... }],
            animate:{type:"flip", subtype:"vertical"}
    })
  2. By means of the method show().The changes will be applied once while showing the appropriate view. Then, the default values (initial or ‘rewrote’) will be used.

     $$(id).show({type:"flip", subtype:"horizontal"}) 
  3. By direct assigning the desired values (out of an object constructor). New specified values will ‘rewrite’ the default ones as in the first case.

    //sets a type
    $$('multiview_id').config.animate.type = 'flip';
    //sets a subtype
    $$('multiview_id').config.animate.subtype = 'horizontal';

Direction

By default, for each type of animation DHTMLX Touch applies the appropriate direction. But if you want you can change the default value. Use for this purpose the attribute direction.
Possible values: left, right, top, bottom.

$$('multiview_id').config.animate.direction = 'top';

Related sample: 01_views/10_multiview_animations.html
Related sample: 11_others/01_animation.html