animated labels

Classic Servoy
1

Is there anyway to animate labels on a form so that a method will trigger one set of lables SLIDING off while another set SLIDES on, into position?

2

Haven’t tried it but would have thought that a couple of Loops setting the form.elements.Label.setLocation(x_pos, y_pos) would work.

Graham Greensall
Worxinfo Ltd

3

Animation can be done quite easily! The trick is to move an object by increments. For each increment, “sleep” the application momentarily to slow the whole process down (otherwise your animation will happen in a blink) and update the user interface. Adjust the moving increment and speed intervals to taste. (I’ve been watching too many late night cooking shows…)

//EXAMPLE: slide an object to the right 200px

var count = 20
var multiplier = 10
var sleepTime = 20

var x = elements.lbl_slide.getLocationX()
var y = elements.lbl_slide.getLocationY()

var i = 0
while ( i < count )
{
	elements.lbl_slide.setLocation(x + (i * multiplier), y)
	application.sleep(sleepTime)
	application.updateUI()
	i++
}
4

WOW! That works surprisingly well!

Thanks for that!

5

Hi all,

Here is a method that I’ve used to create an Apple OS X like button bounce. It has been written to be completely reusable (i.e. no references to specific solutions/objects). It can be called by any method by inserting the following statement:

globals.button_bounce(application.getMethodTriggerElementName(),application.getMethodTriggerFormName());

The speed and number of repetitions can be easily altered by changing a few values in the method, shown below. FYI I wrote this some time ago when learning Servoy, and it is entirely possible that this could be improved. All suggestions welcome.

I also have methods for button_blink and button_shake if anyone is interested.

Cheers,

Rich Coulombre

var element_name = arguments[0];
var form_name = arguments[1];
var x = forms[form_name].elements[element_name].getLocationX(); // x axis location of icon

var bounce_qty = 3; // number of bounces
var bounce_height = 20; // in pixels
var bounce_delay = 10; // in milliseconds, bigger number slows it down

for( var bounce = 0; bounce < bounce_qty; bounce++) //controls number of bounces

{

for(var up = 0 ; up < bounce_height ; up++) // move button up…
{
var y = forms[form_name].elements[element_name].getLocationY(); //get current y axis location of button
forms[form_name].elements[element_name].setLocation(x, y-1); //move button one pixel closer to top
application.updateUI(); // refresh button location
application.sleep(bounce_delay); //slow down animation by time delay
};

for(var down = 0 ; down < bounce_height ; down++) // move button down…
{
var y = forms[form_name].elements[element_name].getLocationY(); //get current y axis location of button
forms[form_name].elements[element_name].setLocation(x, y+1); //move button one pixel closer to bottom
application.updateUI(); // refresh button location
application.sleep(bounce_delay); //slow down animation by time delay
};

};

6

Nice! Thanks!

7

Couldn’t resist and tried it Rich. very cool 8)

8

It can be called by any method by inserting the following statement:

globals.button_blink(application.getMethodTriggerElementName(),application.getMethodTriggerFormName());

Here is the method:

var element_name = arguments[0];
var form_name = arguments[1];

var flash_qty = 3; // number of flashes
var flash_delay = 100; // in milliseconds, bigger number slows it down

for( var flash_count = 0; flash_count < flash_qty; flash_count++) //controls number of flashes

{
forms[form_name].elements[element_name].visible = false;
application.updateUI(); // refresh button visible
application.sleep(flash_delay); //slow down animation by time delay
forms[form_name].elements[element_name].visible = true;
application.updateUI(); // refresh button location
application.sleep(flash_delay); //slow down animation by time delay
};

Cheers,

Rich Coulombre

9

It can be called by any method by inserting the following statement:

globals.button_shake(application.getMethodTriggerElementName(),application.getMethodTriggerFormName());

var element_name = arguments[0];
var form_name = arguments[1];
var x = forms[form_name].elements[element_name].getLocationX(); // x axis location of icon
var y = forms[form_name].elements[element_name].getLocationY(); // y axis location of icon

var shake_qty = 3; // number of bounces
var shake_distance = 3; // in pixels
var shake_delay = 2; // in milliseconds, bigger number slows it down

for( var shake = 0; shake < shake_qty; shake++) //controls number of shakes

{

do // move button left…
{
var current_x = forms[form_name].elements[element_name].getLocationX(); //get current y axis location of button
forms[form_name].elements[element_name].setLocation(current_x - 1, y); //move button one pixel to left
application.updateUI(); // refresh button location
application.sleep(shake_delay); //slow down animation by time delay
}

while ( forms[form_name].elements[element_name].getLocationX() > x - shake_distance );

do // move button right…
{
var current_x = forms[form_name].elements[element_name].getLocationX(); //get current y axis location of button
forms[form_name].elements[element_name].setLocation(current_x + 1, y); //move button one pixel closer to bottom
application.updateUI(); // refresh button location
application.sleep(shake_delay); //slow down animation by time delay
};

while ( forms[form_name].elements[element_name].getLocationX() < x + shake_distance );

};

forms[form_name].elements[element_name].setLocation(x, y); // Move back to starting position