Concert.js

Repeat Behaviors

All the animations we've seen so far just run from the beginning to the end. But what if you'd like the same thing to happen more than once, or bounce back and forth, without having to suplicate all the more segments or keyframes again and again?

A sequence has two behavioral properties you can set to define how it acts past the end and before the beginning of the defined timeline. Each of these can be set to three different values.

See these in action in the below example:

const SegmentDuration = 1250, MovementDistance = 240,
    Box0 = document.getElementById("Box0"),
    Box1 = document.getElementById("Box1"),
    Defaults =
    {
      applicator: Concert.Applicators.Style,
      easing: Concert.EasingFunctions.ConstantRate,
      unit: "px"
    };

let bounceSequence = new Concert.Sequence(),
  loopSequence = new Concert.Sequence();

bounceSequence.setDefaults(Defaults);
loopSequence.setDefaults(Defaults);

bounceSequence.addTransformations(
  {
    target: Box0,
    feature: "left",
	keyframes:
    {
	  times: [0, SegmentDuration],
	  values: [0, MovementDistance]
    }
  });

loopSequence.addTransformations(
  {
    target: Box1,
    feature: "left",
	keyframes:
    {
	  times: [0, SegmentDuration],
	  values: [0, MovementDistance]
    }
  });

document.getElementById("GoButton").onclick =
  function ()
  {
    bounceSequence.begin({ after: Concert.Repeating.Bounce(4) });
    loopSequence.begin({ after: Concert.Repeating.Loop(4) });
  };

The above code creates two Concert.Sequence objects. Each has an identical animation, but one is begun with an after parameter of Concert.Repeating.Bounce(4), and the other is given an after value of Concert.Repeating.Loop(4).

Let's see what the different possible values mean that can be specified here.

• Concert.Repeating.None: This is the default. If the current time is before the start time, the value set is the start value. If the current time is after the end time, the value set is the end value.
• Concert.Repeating.Bounce(bounceCount): This causes the sequence to alternate between running forward and running in reverse. The bounceCount parameter tells it how many times to bounce back the other way. (That is, a value of 0 would mean nothing extra happens at all, a value of 1 would mean a single run-through in the opposite direction, and so on.)
• Concert.Repeating.Loop(loopbackCount): This causes the sequence to repeat in the forward direction the specified number of times. The loopbackCount is the number of times it loops back. (So a value of 0 would mean no looping, just playing through once. A value of 1 would mean it plays once then loops back once, for 2 total play-throughs, and so on.)

These values can be specified in two different ways.

First, they can be passed in a parameters object to any of the run()-type methods (run(), begin(), follow(), or syncTo()), as a value given to the before or after properties. This is how it is done in the example above.

Alternatively, they can be passed ahead of time to the setBefore() or setAfter() methods of the sequence object, and then those settings will be used whenever the sequence is run.

Want more details?

Reference documentation links for items covered in this step of the tutorial:

• Concert.Repeating namespace
• Concert.Sequence.setBefore() method
• Concert.Sequence.setAfter() method
• Concert.Sequence. run() / begin() / follow() / syncTo() methods