<animateFromSequence/>

<animateFromSequence/> is a General Operator component that renders an animation of a changing component over a specified interval of uniform steps.

Attributes and Properties

Example: Animated counting

The <animateFromSequence/> component is used to animate a <number> over a sequence of values from 1 to 20.

Example: Animation with start/stop button

A <callAction> component references a named <animateFromSequence /> with the actionName set to toggleAnimation.

Example: Animated circle radius

<graph size="small">
  <circle radius="$r" center="(0, 0)"/>
</graph>
 
<p>r = <number name="r">0</number></p>
<animateFromSequence 
  target="$r" 
  from="0"
  to="10" 
  animationInterval="200" 
  animationOn="true"
/>

The <animateFromSequence /> component is used to animate the radius of a <circle> where the radius has been defined as a <number/> over a sequence of values from 0 to 10.

Example: Point moving along a function

The <animateFromSequence /> component is used to animate the $x$-coordinate of a point which has been defined as a <number/> over a sequence of values from -9 to 9. The $y$-coordinate of the point is defined with the function evaluation macro $$f(x).

Attribute Example: target

<graph size="small">
  <point name="P">(-10, 0)</point>
</graph>
 
<animateFromSequence target="$P.x" from="-10"to="10" animationInterval="100" animationOn="true"/>

The target attribute is used to specify the value to animate. Since points have a numerical property corresponding to their $x$-coordinate, this value can be animated directly without having to define a separate <number/>.

Attribute Example: animationOn

<slider name="s">0</slider>
Click to animate <booleanInput name="switch"/> $switch
<animateFromSequence target="$s" from="0" to="10" animationInterval="200" animationOn="$switch"/>

The animationOn attribute is used to specify the current state of the animation. This attributes takes a boolean value or an expression which evaluates to a boolean. In this particular example the boolean value is specified by the user with a <booleanInput/>.

Attribute Example: animationMode

The animationMode attribute is used to specify the directional behavior of the animation. Valid values for the input text are: increase, increase once, decrease, decrease once, and oscillate. The default value is increase.

Attribute Example: animationInterval

The $y$-coordinate of two points are both animated with the <animateFromSequence /> component, and the user must specify the input value for the animationInterval attribute for each point. The length of the animationInterval governs the amount of time elapsed between successive steps of the animation sequence. The default value is 1000 ms.

Attribute Example: type=“letters”

<text name="letter">a</text>
<p><booleanInput name="switch">
  <label>Start/Stop Animation</label>
</booleanInput></p>
 
<animateFromSequence 
    target="$letter" 
    from="a" 
    to="z" 
    type="letters" 
    animationInterval="100" 
    animationOn="$switch" 
    animationMode="increase once"
    />    

The type attribute takes either “letters” or “number” as a text input. If unspecified, the default type is “number”.

Attribute Example: length

<number name="n">0</number>
<p><booleanInput name="switch">
  <label>Start/Stop Animation</label>
</booleanInput></p>
 
<animateFromSequence 
  target="$n" 
  from="0" 
  step="2" 
  length="10" 
  animationInterval="600" 
  animationOn="$switch" 
  animationMode="increase once"
  />    

The length attribute specifies the length, in number of terms, of the animation sequence.

Attribute Example: from, to

<number name="n">1</number>
<p><booleanInput name="switch">
  <label>Start/Stop Animation</label>
</booleanInput></p>
 
<animateFromSequence 
  target="$n" 
  from="1" 
  step="2" 
  to="19" 
  animationInterval="200" 
  animationOn="$switch" 
  animationMode="increase once"
  />    

The from and to attributes specify the starting and ending values in the animation sequence.

Attribute Example: step

<number name="n">1</number>
<p><booleanInput name="switch">
  <label>Start/Stop Animation</label>
</booleanInput></p>
 
<animateFromSequence 
  target="$n" 
  from="0" 
  step="10" 
  to="100" 
  animationInterval="200" 
  animationOn="$switch" 
  animationMode="increase once"
  />    

The step attribute specifies the size of each increment in the animation sequence. The default step is $1$.

Attribute Example: exclude

<number name="n">1</number>
<p><booleanInput name="switch">
  <label>Start/Stop Animation</label>
</booleanInput></p>
 
<animateFromSequence 
  target="$n" 
  from="0" 
  to="5" 
  exclude="3" 
  animationInterval="600" 
  animationOn="$switch" 
  animationMode="oscillate"
  />    

The exclude attribute specifies values to exclude in the animation sequence.

Property Example: Attributes as properties

The above listed <animateFromSequence/> attributes are also accessible as properties.

Property Example: value

n = <number name="n">1</number>
<animateFromSequence 
  name="countingAnimation" 
  target="$n" 
  from="1" 
  to="20" 
  animationOn="true"
/>
    
<p><c>value</c> = $countingAnimation.value</p>

The value property of the <animateFromSequence/> component renders the current sequence value of the animation target.

Property Example: currentAnimationDirection

n = <number name="n">0</number>
    <animateFromSequence 
      name="countingAnimation" 
      target="$n" 
      from="-2" 
      to="2" 
      animationOn="true" 
      animationMode="oscillate"
      />
    <p><c>currentAnimationDirection</c> = $countingAnimation.currentAnimationDirection</p>

The currentAnimationDirection property of the <animateFromSequence/> component renders the current direction of the animation; i.e. whether the sequence values are increasing or decreasing.

Property Example: selectedIndex

n = <number name="n">0</number>
    <animateFromSequence 
      name="countingAnimation" 
      target="$n" 
      from="2" 
      to="20" 
      step="2" 
      animationOn="true" 
      animationMode="increase"
      />
    <p><c>selectedIndex</c> = $countingAnimation.selectedIndex</p>

The selectedIndex property returns the index number of the current sequence value.