< previous

next >

move

<move start_x_offset='float' 
      start_y_offset='float' 
      end_x_offset='float' 
      end_y_offset='float' 
      step='float'
      
      shake_frequency='int'
      shake_span='float' 
      shake_snap='float' 

      shadow_alpha='int'
      shadow_x_offset='float' 
      shadow_y_offset='float' >
      
         element to move
         element to move
         ...
      
</move>
              

Description

move is used in gauges with sliding pointers to move them from one point to another. It moves all the design elements nested inside it.

Animation tags (move, rotate , scale) only animate elements generated with the drawing tags (circle , image , line , polygon , rect , text .) Only drawing tags can be nested inside the animation tags. Animation tags can't be nested inside each other.

• start_x_offset: This adjusts the pointer's horizontal location at the beginning of the animation, relative to the location it was created in. This is useful when updating the gauge, to align the pointer's starting point with its previous ending point. The default is zero
  
  
• start_y_offset: This adjusts the pointer's vertical location at the beginning of the animation, relative to the location it was created in. This is useful when updating the gauge, to align the pointer's starting point with its previous ending point. The default is zero
  
  
• end_x_offset: The pointer's horizontal location at the end of the animation, relative to the location it was created in. The default is zero
  
  
• end_y_offset: The pointer's vertical location at the end of the animation, relative to the location it was created in. The default is zero
  
  
• step: The number of pixels the pointer moves in each step. This determines the pointer's speed. This must be a positive number. The default is 2
  
  
  
• shake_frequency: After the pointer reaches its destination, shake_frequency determines how often the pointer shakes as a visual effect. Valid values are 0 (never shake) to 100 (always shake). The default is 100. The shake direction is the same as the animation direction, determined by the offset attributes above. Therefore, it's necessary to offset the pointer at least slightly to establish a shake direction.
  
  
• shake_span: The maximum movement in pixels generated by the shake. The default is 10
  
  
• shake_snap: If the pointer should snap to fixed positions while shaking, this determines the intervals in pixels at which to snap. This must be a positive value greater than zero. If this attribute is omitted or equal to zero, then the pointer shakes smoothly without snapping. The default is zero (no snapping)
  
  
  
• shadow_alpha: The transparency value of the pointer's shadow. Valid values are 0 (fully transparent) to 100 (fully opaque, hard shadow). Shadows give gauges some depth. To hide the shadow, set this value to zero. The default is 20
  
  
• shadow_x_offset: The shadow's horizontal distance in pixels from the pointer. This makes the pointer look more or less elevated from the layers below it. The default is 2
  
  
• shadow_y_offset: The shadow's vertical distance in pixels from the pointer. This makes the pointer look more or less elevated from the layers below it. The default is 2
  
  

Example

	
<gauge>

   <!-- reload the web page to see the animation from the beginning -->


   <!-- draw a green and red rectagles in the background -->
   <rect x='50' y='100' width='250' height='50' fill_color='88ff00' />
   <rect x='310' y='100' width='40' height='50' fill_color='ff3300' />
   
   <!-- create a pointer for the green rectangle -->
   <move end_x_offset='200' step='3' shadow_alpha='10'>
      <line x1='50' y1='100' x2='50' y2='150' thickness='3' />
      <rect x='45' y='130' width='10' height='20' />
   </move>
   
   <!-- create a pointer for the red rectangle -->
   <move end_y_offset='-20' step='1' shake_span='5' shadow_x_offset='-1' shadow_y_offset='1'>
      <polygon>
         <point x='350' y='130' />
         <point x='350' y='150' />
         <point x='340' y='140' />
      </polygon>
   </move>

</gauge>
	

< previous

next >