How to expertly manipulate animation ?

Concerning animation, we can single out 3 components:

  • carousel
  • grouplist
  • multiview

Carousel and grouplist have built-in default animation which you can't change. multiview also has some default staff but unlike two first components the default value can be changed.
So, this article we'll devote to multiview animation and its manipulation.

multiview has 2 main animation types:

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

To set the desired type - use the following:

$$('multiview_id').config.animate.type = 'flip';

to set the desired subtype:

$$('multiview_id').config.animate.subtype = 'horizontal';

Usage Example

We'll take an example which lets to show all animation variations.

Our actions:
Step 1. Firstly, we need to define interface.

dhx.ui({
			view:"window", //defines window 
			width:480,
                        body:{ 	// the body content consists of multiview with images and toolbar with a control for changing these images 
                                rows:[{
						view:"multiview", id:"MainTab", height:292, cells:[{ template:img, data:{src:"img1.jpg"}, id:"area1" },
								                                { template:img, data:{src:"img2.jpg"}, id:"area2" }]
                	        },
	                        {               view:"toolbar", id:"BottomBar", type:"SubBar", data:[
                        	                                    { type:"segmented", align:"center",  selected: "area1", segment: [   
                        	                                                                              { label: 'Area 1', key: 'area1'},
                        	                                                                              { label: 'Area 2', key: 'area2'}]
					                            }]
                                }
			]},
			head:{ 	//the header of the window contains controls for type and subtype selections
                                view:"toolbar", type:"MainBar", id:"HeadBar", data:[ //control for type selection
					{ align:"center", type:"segmented", id:"animation_type_btn", segment:[{key:"slide", label:"Slide" },
									                                      {key:"flip", label:"Flip"}]
                                        }, // control for subtype selection
					{ align:"center", type:"segmented", id:"animation_subtype_btn",segment:[{key:"together", label:"Together"},// we fill 'segment' with initial data. Then, the appropriate control's buttons will be assigned in concordance with 'option' variable (see step 2)
									                                        {key:"in", label:"In"},
			 						                                        {key:"out", label:"Out"}]
                                }]
			},
});

Step 2. Now, we have to match available types with subtypes, i.e. when you click the desired type the appropriate subtypes should appear.
We'll implement this through toolbar redefining

var options = {// contains animation type variations. 
            slide: [
                {key:"together", label:"Together"},
                {key:"in", label:"In"},
                {key:"out", label:"Out"}
            ],
            flip: [
                {key:"horizontal", label:"Horizontal"},
                {key:"vertical", label:"Vertical"}
            ]
};
 
        $$('HeadBar').attachEvent("onAfterTabClick",function(id, key){// fires when multiview's tab is changed
        	if (id != "animation_type_btn") return;// exits the function if we didn't change the type
 
            var subtype_btn = $$("HeadBar").item("animation_subtype_btn");// gets a value of the currently selected subtype
            subtype_btn.segment = options[key]; // assigns the appropriate subtypes to 'segment' parameter
            subtype_btn.selected = options[key][0][key];// makes the chosen subtype selected
			$$("HeadBar").refresh("animation_subtype_btn");// redefines the top toolbar
        });
  • In options variable we specified available animation variations. It's used to fill segment parameter of animation_subtype_btn control with the appropriate values
  • onAfterTabClick event fires each time you click either animation_type_btn control or animation_subtype_btn control.

Step 3. Our next step in changing multiview views.

$$("BottomBar").attachEvent("onBeforeTabClick",function(button,id){		
            $$('MainTab').config.animate.type = $$("HeadBar").item('animation_type_btn').selected;// applies the specified animation type
            $$('MainTab').config.animate.subtype = $$("HeadBar").item('animation_subtype_btn').selected;// applies the specified animation subtype
            $$(id).show();// shows the appropriate view
            return true
});

Full code of the solution