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

 < previousnext > 

 

Rotate

 

<rotate x='number' 
        y='number' 
        start='number' 
        span='number' 
        step='number'
      
        shake_frequency='number'
        shake_span='number' 
        shake_snap='number' 
        />
      


Description

Rotate can be added to an object to make it rotate without any user input or actions. This can be used to create rotating dial needles, background animations, etc.:

 

This function might affect the operation of other functions. This tool does not prevent combining functions, but it is necessary to test and verify each combination. In general, use this function only with transitions and functions that do not move, rotate, or scale the same object.

 

The rotate attributes are:

  • x: The horizontal coordinate of the point to rotate around. The default is zero.

  • y: This vertical coordinate of the point to rotate around. The default is zero.

  • start: The angle to start rotating from. Angle zero is the 12 o'clock position. This can be used to create a continuously updated dial needle with the current start angle aligned with the previous end angle. The default is zero.

  • span: The number of degrees to rotate the object. A positive value rotates it clockwise. A negative value rotates it counterclockwise. To rotate the object more than full circle, make this value larger than 360 or smaller than -360. The default is 360 (full circle, clockwise).

  • step: The number of degrees the object rotates in each step. This determines the rotation speed. This must be a positive number. The default is 2.


  • shake_frequency: After the object reaches its destination, shake_frequency determines how often the object shakes as a visual effect. Valid values range from 0 (never shake) to 1 (always shake). The default is 1.

  • shake_span: The maximum rotation in degrees generated by the shake. The default is 10.

  • shake_snap: If the object should snap to fixed positions while shaking, this determines the intervals in degrees at which to snap. This must be a positive value greater than zero. If this attribute is omitted or equal to zero, then the object shakes smoothly without snapping. The default is zero (no snapping).

 

Example

<slickboard>

   <!-- background dial image -->
   <image url='images/speed.jpg' />
   
   
   <object shadow='default'>
   
      <!-- needle made of a polygon and a rectangle -->
      <polygon fill_color='ff4400' fill_alpha='.8' line_alpha='0'>
         <point x='237' y='30' />
         <point x='241' y='30' />
         <point x='242' y='126' />
         <point x='236' y='126' />
      </polygon>
      <rect x='234' y='154' width='10' height='30' fill_alpha='.9' line_alpha='.5' />   
      
      <!-- rotate needle -->
      <rotate x='239' y='140' start='250' span='130' step='3' shake_span='3' />   

   </object>


   <!-- foreground needle cap -->
   <circle x='239' y='140' radius='14' fill_alpha='.5' />
   

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

 


<slickboard>

   <!-- this is similar to the first example, but with looping updates that rotate the -->   
   <!-- needle repeatidly to 60 MPH and 100 MPH -->
   <image url='images/speed.jpg' />
   
   
   <object shadow='default'>
   
      <polygon fill_color='ff4400' fill_alpha='.8' line_alpha='0'>
         <point x='237' y='30' />
         <point x='241' y='30' />
         <point x='242' y='126' />
         <point x='236' y='126' />
      </polygon>
      <rect x='234' y='154' width='10' height='30' fill_alpha='.9' line_alpha='.5' />   
      
      <rotate x='239' y='140' start='250' span='108' step='3' shake_span='3' />  

      <!-- call the update for the second needle position --> 
      <update url='xml/speed_2.xml' delay='4' />
      
   </object>


   <!-- foreground needle cap -->
   <circle x='239' y='140' radius='14' fill_alpha='.5' line_alpha='0' />
   

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

<!-- the speed_2.xml update code --> 
<object shadow='default'>
   
   <polygon fill_color='ff4400' fill_alpha='.8' line_alpha='0'>
      <point x='237' y='30' />
      <point x='241' y='30' />
      <point x='242' y='126' />
      <point x='236' y='126' />
   </polygon>
   <rect x='234' y='154' width='10' height='30' fill_alpha='.9' line_alpha='.5' />   
      
   <rotate x='239' y='140' start='358' span='77' step='3' shake_span='3' />  

   <!-- call the update for the second needle position --> 
   <update url='xml/speed_1.xml' delay='4' />
      
</object>

<!-- the speed_1.xml update code --> 
<object shadow='default'>
   
   <polygon fill_color='ff4400' fill_alpha='.8' line_alpha='0'>
      <point x='237' y='30' />
      <point x='241' y='30' />
      <point x='242' y='126' />
      <point x='236' y='126' />
   </polygon>
   <rect x='234' y='154' width='10' height='30' fill_alpha='.9' line_alpha='.5' />   
      
   <rotate x='239' y='140' start='435' span='-77' step='3' shake_span='3' />  

   <!-- call the update for the second needle position --> 
   <update url='xml/speed_2.xml' delay='4' />
      
</object>

 

 < previousnext > 


Copyright © 2010-2017, maani.us