SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Transition

 

 <transition_in type='string'
                delay='number'
                duration='number'
                easing='string'
                   
                numStrips='number'
                dimension='number'
                startPoint='number'
                shape='string'
                xSections='number'
                ySections='number'
                ccw='boolean'
                degrees='number'
                />


<transition_out type='string'
                delay='number'
                duration='number'
                easing='string'
                  
                numStrips='number'
                dimension='number'
                startPoint='number'
                shape='string'
                xSections='number'
                ySections='number'
                ccw='boolean'
                degrees='number'
                />
                  


Description

Transition_in can be added to an object to determine how it appears. Transition_out can be added to an object to determine how it disappears.

The transition attributes are:

  • type: The type of the transition. Valid values are:

    • blinds
    • dissolve
    • fade
    • fly
    • iris
    • none (default)
    • photo
    • rotate
    • squeeze
    • wipe
    • zoom

    The default is none, which draws the object immediately without a transition. If an object is interactive and can be moved from its original position, the fly transition type is not recommended with transition_out.


  • delay: The delay in seconds before starting the transition. In transition_in, this determines how long to wait before making the object appear. In transition_out, this determines how long to wait after the object appeared before making it disappear.

  • duration: The transition's duration in seconds. The default is 2. The duration of transition_out should be the same or smaller than the duration of transition_in to make the old object disappear by the time the new one appears.

  • easing: The way the animation comes to a stop. Valid values are:

    • back: Moves the object past its destination and then brings it back.

    • bounce: Bounces the abject on its destination with several decaying rebounds.

    • elastic: Bounces the abject past its destination and then back with several decaying rebounds.

    • regular: Slows down the object to its destination. This is the default value.

    • strong: Similar to regular, but starts faster and decelerates faster.

    • none: Moves the object to its destination without a change in speed.



  • numStrips: This attribute works only with the transition type: blinds. It determines the number of blind strips.

  • dimension: This attribute works only with the transition type: blinds, and squeeze. It determines whether the effect is horizontal or vertical. Valid values are 0 and 1.

  • startPoint: This attribute works only with the transition type: fly, iris, and wipe. it determines the starting position. Valid values range from 1 to 9. Top-left: 1; Top-center: 2; Top-right: 3; Left-center: 4; Center: 5; Right-center: 6; Bottom-left: 7; Bottom-center: 8, Bottom-right: 9.

  • shape: This attribute works only with the transition type: iris. It determines the iris shape. Valid values are circle and square.

  • xSections: This attribute works only with the transition type: dissolve. It determines the number of rectangle sections along the horizontal axis. The recommended range is 1 to 50.

  • ySections: This attribute works only with the transition type: dissolve. It determines the number of rectangle sections along the vertical axis. The recommended range is 1 to 50.

  • ccw: This attribute works only with the transition type: rotate. Valid values are false for clockwise rotation and true for counter-clockwise rotation.

  • degrees: This attribute works only with the transition type: rotate. It determines the number of degrees the object is to be rotated. The recommended range is 1 to 9999. For example, a degrees setting of 1080 would rotate the object completely three times.

 


Pivot Point

Transitions always use the origin point (0, 0) as a reference. The rotate transition, for example, always pivots the graphics around point (0, 0). To make an object pivot around another point, draw the graphics as if point (0, 0) is the pivot point, but then set an action and a timer to move the object to another pivot point:

<slickboard>
   
   <object>
      
      <!-- image centered on point (0,0) -->
      <image url='images/image_roadrunner.jpg' x='-70' y='-50' width='140' height='100' /> 
      <transition_in type='rotate' degrees='90' duration='1' />
      
      <!-- actions with immediate timers that move the image to a new pivot point -->
      <!-- the rotate transition pivots the image around its center, but the center is now point (300, 150) -->   
      <action>
         <item type='move_to' duration='0' x='300' y='150' event='timer' delay='0' />
      </action>
      
   </object>
   
</slickboard>

See the second example below.

 

Example

<slickboard>
   
   <!-- reload the webpage to see the transitions again -->
   
   
   <!-- draw two red squares, transition them in, and then out after 3 seconds -->
   <object>
      <rect x='50' y='100' width='40' height='40' fill_color='ff3300' shadow='default' />
      <rect x='150' y='100' width='40' height='40' fill_color='ff3300' shadow='default' />   
      <transition_in type='fly' duration='1' easing='back' />
      <transition_out type='fly' duration='1' easing='back' delay='3' />
   </object>
      
   <!-- draw a green square and transition it in after a 2-second delay -->   
   <object>
      <rect x='250' y='100' width='80' height='80' fill_color='88ff00' shadow='default' />
      <transition_in type='blinds' delay='2' duration='1' numStrips='5'  />
   </object>
   
   <!-- draw a blue square and transition it in after a 3-second delay -->   
   <!-- update this object 1 second after it transitions in -->   
   <object>
      <rect x='380' y='100' width='50' height='50' fill_color='8888ff' shadow='default' />
      <transition_in type='fly' delay='3' duration='1' easing='bounce' startPoint='2'  />   
      <update delay='1' url='xml/update_example_1.xml'/>
   </object>
   
   
   <filter>
      <shadow id='default' />
   </filter>

</slickboard>

The update file update_example_1.xml contains this code:

<object>

   <!-- replace the blue square with a white circle -->
   <circle x='405' y='125' radius='25' fill_color='ffffff' shadow='default' />
   
   <!-- transition out the old blue square with this transition -->
   <transition_out type='fly' startPoint='2' easing='strong' />
   
   <!-- transition in the new white circle with this transition -->
   <transition_in type='fly' startPoint='2' easing='bounce' duration='1' />
   
</object>

 


<slickboard>
   
   <object>
      <!-- the first image -->
      <image url='images/image_roadrunner.jpg' x='0' y='0' width='240' height='150' shadow='default' />   
   
      <!-- rotate transition with the default pivot point (0, 0) -->
      <transition_in type='rotate' degrees='90' duration='1'  />
   </object>


   <object>
   
      <!-- the second image is initially drawn at point (0, 0), but gets moved by the actions below -->
      <image url='images/image_roadrunner.jpg' x='0' y='0' width='240' height='150' shadow='default' /> 
      
      <!-- the same rotate transition -->
      <transition_in type='rotate' degrees='90' duration='1' />
      
      <!-- actions with immediate timers that move the image to a new pivot point -->
      <action>
         <item type='move_to' duration='0' x='240' y='150' event='timer' delay='0' />
      </action>
      
   </object>


   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

 

 

 < previousnext > 


Copyright © 2010-2017, maani.us