launch animation after user action

In this tutorial, we will animate a shape after a user action.
We use a timer to animate the shape and a key sensor to capture user action.

See Move shape tutorial for example about this node.
We use TimeSensor node to animate the widget.

We define a "ANIM_TIMER" timer (a TimeSensor node).
When widget is launch, timer is not activated ("isActive FALSE").
Timer is activated after a user action.
At end of time interval (after 1 seconds), timer is stopped ("loop FALSE").
Time sensor declaration:

DEF ANIM_TIMER TimeSensor {
  isActive FALSE
  cycleInterval 1.0
  loop FALSE
}

We catch timer pulse with fraction_changed (SFFloat - value between 0.0 (animation start) and 1.0 (end of animation))
We catch end of loop with cycleTime (SFTime - current time)

KeySensor node send event when user press a key.
We use KeySensor node to catch user action and launch animation (activate the timer).

Note:
if animation is already launched, not re-launch animation.

DEF KEY_SENSOR KeySensor {
  # We catch only numeric key
  url            "1234567890"
  activate       TRUE
}
DEF SCRIPT Script {
  eventIn SFTime keyPressed
  field timer USE ANIM_TIMER
  url "
  function keyPressed () {
    if (! ANIM_TIMER.isActive) {
      timer.isActive = true;
      timer.startTime = keyPressed;
    }
  }
  "
}
ROUTE KEY_SENSOR.pressTime TO SCRIPT.keyPressed

We define a shape (a simple rectangle).
To move rectangle, we use a Transform2D node.

DEF SHAPE_TRS Transform2D {
  children [
    Shape {
      appearance Appearance {
        material Material2D { emissiveColor 1 0 0 }
      }
      geometry Rectangle { size 20 20 }
    }
  ]
}

To create animation, we use PositionInterpolator2D node.
In first time, we create a simple animation.

DEF ANIMATION_PI PositionInterpolator2D {
  key      [0.0, 1.0]
  keyValue [0 0, 10 10]
}

Link the Interpolator with the timer:

ROUTE ANIM_TIMER.fraction_changed TO ANIMATION_PI.set_fraction

Link the Interpolator with the shape:

ROUTE ANIMATION_PI.value_changed TO SHAPE_TRS.translation

Final code for the first example:

Group {
  children [
    DEF ANIM_TIMER TimeSensor {
      isActive FALSE
      cycleInterval 1.0
      loop FALSE
    }

    DEF SHAPE_TRS Transform2D {
      children [
        Shape {
          appearance Appearance {
            material Material2D { emissiveColor 1 0 0 }
          }
          geometry Rectangle { size 20 20 }
        }
      ]
    }

    DEF KEY_SENSOR KeySensor {
      # We catch only numeric key
      url            "1234567890"
      activate       TRUE
    }

    DEF ANIMATION_PI PositionInterpolator2D {
      key      [0.0, 1.0]
      keyValue [0 0, 10 10]
    }

    DEF SCRIPT Script {
      eventIn SFTime keyPressed
      field SFNode timer USE ANIM_TIMER
      field SFNode input USE KEY_SENSOR
      url "
      function keyPressed () {
        Browser.print('Key pressed : ' + input.activeKey + ' / anim active ? ' + timer.isActive);
        if (! timer.isActive) {
          timer.isActive  = true;
          timer.startTime = keyPressed;
        }
      }
      "
    }

    ROUTE KEY_SENSOR.pressTime TO SCRIPT.keyPressed
    ROUTE ANIM_TIMER.fraction_changed TO ANIMATION_PI.set_fraction
    ROUTE ANIMATION_PI.value_changed TO SHAPE_TRS.translation
  ]
}

We want to move shape when user press joypad key.
We listen joypad keys with the KeySensor:

DEF KEY_SENSOR KeySensor {
  url            "EUDLR"
  activate       TRUE
}

Define function to move shape when user press a key.
This function:

define the start position for animation (the previous end position).
define the end position (read key to choose the direction).
launch the animation (Active the timer).

function keyPressed () {
  if (! timer.isActive) {
    initX = finalX;
    initY = finalY;
    if (input.activeKey == 'U') {
      finalY = initY + 10;
    } else if (input.activeKey == 'D') {
            finalY = initY - 10;
    } else if (input.activeKey == 'L') {
            finalX = initX - 10;
    } else if (input.activeKey == 'R') {
            finalX = initX + 10;
    } else if (input.activeKey == 'E') {
            finalX = 0;
            finalY = 0;
    }
    timer.isActive  = true;
    timer.startTime = keyPressed;
  }
}

PositionInterpolator2D cannot be use (we cannot redefine animation...).
We use a JavaScript function to compute all positions of animation.
This function use fraction_changed field of timer and return a position (SFVec2f type).

function timerPulse () {
  posChanged.x = initX + ((finalX - initX) * timerPulse);
  posChanged.y = initY + ((finalY - initY) * timerPulse);
}

We define in/out event for animation:

eventIn SFFloat timerPulse
eventOut SFVec2f posChanged

And we link animation event with the timer and the shape:

ROUTE ANIM_TIMER.fraction_changed TO SCRIPT.timerPulse
ROUTE SCRIPT.posChanged TO SHAPE_TRS.translation

Final code for the second example:

Group {
  children [
    DEF ANIM_TIMER TimeSensor {
      isActive FALSE
      cycleInterval 0.25
      loop FALSE
    }

    DEF SHAPE_TRS Transform2D {
      children [
        Shape {
          appearance Appearance {
            material Material2D { emissiveColor 1 0 0 }
          }
          geometry Rectangle { size 20 20 }
        }
      ]
    }

    DEF KEY_SENSOR KeySensor {
      url            "EUDLR"
      activate       TRUE
    }

    DEF SCRIPT Script {
      eventIn SFTime  keyPressed
      eventIn SFFloat timerPulse
      eventOut SFVec2f posChanged

      field SFNode timer USE ANIM_TIMER
      field SFNode input USE KEY_SENSOR

      field SFFloat initX 0
      field SFFloat initY 0
      field SFFloat finalX 0
      field SFFloat finalY 0

      url "
      function keyPressed () {
        if (! timer.isActive) {
          initX = finalX;
          initY = finalY;
          if (input.activeKey == 'U') {
            finalY = initY + 10;
          } else if (input.activeKey == 'D') {
            finalY = initY - 10;
          } else if (input.activeKey == 'L') {
            finalX = initX - 10;
          } else if (input.activeKey == 'R') {
            finalX = initX + 10;
          } else if (input.activeKey == 'E') {
            finalX = 0;
            finalY = 0;
          }
          timer.isActive  = true;
          timer.startTime = keyPressed;
        }
      }
      function timerPulse () {
        posChanged.x = initX + ((finalX - initX) * timerPulse);
        posChanged.y = initY + ((finalY - initY) * timerPulse);
      }
      "
    }

    ROUTE KEY_SENSOR.pressTime  TO SCRIPT.keyPressed
    ROUTE ANIM_TIMER.fraction_changed TO SCRIPT.timerPulse
    ROUTE SCRIPT.posChanged TO SHAPE_TRS.translation
  ]
}