Effect class

From PhiWiki
Jump to: navigation, search

Describes the effect for an element in a web or intranet document. You may let an item fade in or out, draw shadows, let items rotate in and so on. This is a special Phi class. The Effect class is a sub class of the Item class.


The Effect class provides many additional functions in the Phi environment which are not available in HTML so they will be completely ignored outside Phi. A small amount of effects which can be implemented in HTML as well are available through the PhiBase class.

You reference an element by its id (the ID you set in the Aphilo editor):

var item1=phi.getElementById( 'id' ); // prefered version in the client environment
var item2=window.document.getElementById( 'id' ); // client environment
var item3=document.getElementById( 'id' ); // server environment
item1.effect.fadeIn( 0, 2000, 1.0 );

Note: the visual effects blur(), colorize(), shadow() and surface() are exclusive, ie. setting a new visual effect overwrites the old one.


  • StringArray properties [read]
  • Number xAxis [read]
  • Number yAxis [read]
  • Number zAxis [read]

StringArray properties

Returns the string array of available properties for the Item class.

var i=0;
while ( item.properties[i] ) print( item.properties[i++] );

Number xAxis

Returns the x axis corresponding number, ie. 0x1.

item.effect.rotate( item.effect.xAxis+item.effect.zAzis );

Number yAxis

Returns the y axis corresponding number, ie. 0x2.

item.effect.rotateIn( item.effect.yAxis );

Number zAxis

Returns the z axis corresponding number, ie. 0x4.

item.effect.rotate( item.effect.zAxis );


Void blur()


Blurs out the item with radius pixels.

myitem.effect.blur( radius=5.0 );
item.effect.blur( 2.5 );

Void clear()

Clears all visual and positioning effects for the item, including any rotation.


Void colorize()


Colorizes the item with color and a strength. The default is a light blue color.

myitem.effect.colorize( color='#0000C0', strength=1.0 );

By default, the strength is 1.0. A strength 0.0 equals to no effect, while 1.0 means full colorization.

Void fadeIn()

Fades the item myitem in after start ms, a fading duration of duration ms, up to opacity value opac.

myitem.effect.fadeIn( start=0, duration=1000, opac=1.0 );
item.effect.fadeIn( 0, 2000, 0.8 );

Starts immediatly fading the item in with a duration of 2 seconds and 80% opacity.

Note: this is also available in XHTML through phi.fadeIn() in the client environment.

Void fadeOut()

Fades the item myitem out after start ms, a fading duration of duration ms, up to opacity value opac.

myitem.effect.fadeIn( start=0, duration=1000, opac=0 );
item.effect.fadeIn( 0, 2000, 0 );

Starts immediatly fading the item out with a duration of 2 seconds to fully transparent.

Note: this is also available in XHTML through phi.fadeOut() in the client environment.

Void move()

Moves the item to the new position left and top.

myitem.effect.move( left, top, start=0, duration=1000 );
item.effect.move( 10, 10, 0, 10000 ); // moves the item to the top left corner (10px) in 10s

See also: Additional notes.

Void rotate()

Rotates the item over the specified axis with stepX, stepY and stepZ degree per tick.

myitem.effect.rotate( axis=0x4, stepX=0.0, stepY=0.0, stepZ=1.0 );
item.effect.rotate(); // rotates the item counter clock wise with 1 degree per timer tick

Void rotateIn()

Rotates the element in.

item.effect.rotateIn( axis, start, duration );
item.effect.rotateIn( item.effect.xAxis+item.effect.yAxis, 0, 1000 ); // rotates the item immediately in through the x-axis and y-axis in 1sec

You should prefer phi.rotateIn() which is working in both modes (in HTML mode the element will be faded in).

Void rotateOut()

Rotates the element out.

item.effect.rotateOut( axis, start, duration );
item.effect.rotateOut( item.effect.xAxis, 3000, 1000 ); // rotates the item out after 3sec through the x-axis with a duration of 1sec

You should prefer phi.rotateOut() which is working in both modes (in XHTML the element will be faded out).

Void shadow()


Creates a visual shadow for the item with color, opacity, xOffset, yOffset and radius.

myitem.effect.shadow( color='#3F3F3F', opacity=0.7, xOffset=8.0, yOffset=8.0, radius=1.0 );
item.effect.shadow(); // creates a grayed shadow with 70% opacity to the right, bottom corner

Void surface()


Creates a mirrored surface effect with yOffset and size pixels. Use the yOffset to increase the visual distance from the surface.

myitem.effect.surface( yOffset=0., size=30.0 );
item.effect.surface( -5.0 ); // mirror effect with an y offset of -5px

Warning: you should rarly animate items with a surface effect set. The computing is very time consuming and may slow down your animations.

Additional notes

The internal timer fires with 25 ticks per second (each 40ms) for each positioning and rotation change. However this (high) resolution can not be hold if the system is too slow or to many items are animated or the item computed is to complex. The result is a slow down of the animation. That also means the specified duration of a movement can not be guaranteed.