Animations

Animations

Button and Label Animations


uiAnimated=false;

The best method to see it in action is through the sample project (button animation room). That way you can play with different speed and rotations.

To animate a widget you set the animation settings and then call uiAnimated=true; To stop the animation you set uiAnimated=false; To set animation settings you make the animation property NON-ZERO. So to enable uiWobble to 15 (which means wobble back and forth 15 degrees), to disable set uiWobble to 0 (remember that uiAnimated=true is needed). You can also compound animations, which means you can do all/some all at the same time.

The following properties are self explanatory…. for duration and easy type see Easing Animation section below.


uiWobble=10; //set degree to wobble text 15= 15 degrees back and forth
uiEaseWobbleDur=40; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


uiPulse=0; // this is a percent: so setting is to 0.2 will pulse 20% (80-120%) of original size.
uiEasePulseDur=40; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.
uiPulseJello=false; //set to true to have a jello pulse effect.


uiFading=0; //0.5 would fade between 100% and 50%
uiEaseFadeDur=50; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


uiSparkle=15; //15 is a good number here, experiment (creates a sparkle every 15 steps)


uiGlowing=0; // 0.6 would be 60% glow, uses the uiEaseFadeType and uiEaseFadeDur for glow speed.

 

PopUP & PopDown

Sometimes you just want to quickly PopUp some text, or make a widget disappear nicely. You can use the simple properties uiPopUp=true; and uiPopDown=true;
Here’s a sample of displaying a POPUP message that will also automatically destroy itself after 30 steps:

 

with instance_create(100,110,ui_label)
{
uiTextValue=’Popping UP some text’;
uiAlign=fa_center;
uiVisible=false;
uiSetWidth=500;
uiFont=fnt_bigarial;
uiPopUp=true;
uiDestroy=30;
}

Note that PopUP and PopDown will only zoomin or zoomout the widget. The widget is still alive. If you want to auto-destroy the widget use the uiDestroy=x (x=number of steps).

 

Simple Movement

 

Button moving is where you want to move the button to a different location, but animate that motion. To move a button simply set the final positions (uiMoveX,uiMoveY) and then set uiAniMove=true to start the movement. You don’t need to do anything else afterwards, the button will end up at the final position. If you look at the sample project menu room you can see a simple ‘trick’ so that it looks like the button is coming off screen into its final position.

uiMoveX=0;
uiMoveY=0;
uiAniMove=true; //start moving

To change the way the movement looks and the duration see Easing Animations below….

Easing Animations (v1.4+)

Since v1.4 of the widget library, the entire animation engine has changed to support easing animations for many widgets. See the sample project to get an idea of some of the great ways to animate widgets. When setting which EaseNumber to use, see the index from the JQuery Easing Plugin website here
These are the following properties that will allow you to change the easing/animations on widgets. Mainly these are set on ui_button_ani widget and the ui_label widget.
default ease

uiEaseType=25; //type of ease based on JQuery Easing Plugin
uiEaseDur=30; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


uiEaseMoveType=40; //movement animation type of ease based on JQuery Easing Plugin (uiAniMove will use this)
uiEaseMoveDur=30; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


uiEaseWobbleType=31; //Wobble animation type of ease based on JQuery Easing Plugin
uiEaseWobbleDur=40; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


uiEasePulseType=36; //Pulse Animation type of ease based on JQuery Easing Plugin
uiEasePulseDur=40; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


uiEaseFadeType=0; // for Fade/glowing Animation type of ease based on JQuery Easing Plugin
uiEaseFadeDur=50; // duration of ease/animation (in steps). so if your room speed is 30 then 30=1 second length.


 

You may also like...