Sequence

Graphery SVG Sequence plugin is a useful tool when you need coordinate several animation. This plugin add a new function svg.Seq() for create a new sequence animations object. With. the method seq.add() you can add animations and the method seq.play() run the complete group of animation.

The plugin is load with:

import gySVG    from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';
import sequence from 'https://cdn.graphery.online/svg/1.0.0/module/sequence.plugin.js';
gySVG.extend (sequence);

This a complete example:

<div id="example"></div>
<button id="play">play</button>
<script type="module">
  import gySVG    from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';
  import sequence from 'https://cdn.graphery.online/svg/1.0.0/module/sequence.plugin.js';
  gySVG.extend(sequence);
  const svg      = gySVG().viewBox(0, 0, 100, 100)
                          .width(200).height(200);
  const rect     = svg.add('rect')
                      .x(0).y(0).width(10).height(10)
                      .fill('red');
  const circle   = svg.add('circle')
                      .cx(95).cy(5).r(5)
                      .fill('blue');
  const triangle = svg.add('polygon')
                      .points([95, 90], [100, 100], [90, 100])
                      .fill('green');
  const octagon  = svg.add('polygon')
                      .points([3, 90], [7, 90], [10, 93], [10, 97], [7, 100], [3, 100], [0, 97], [0, 93])
                      .fill('violet');
  svg.attachTo('#example');
  const play = document.querySelector('#play');
  const seq = svg.Seq(before, after);
  seq
    .add(
      rect,
      {x: 90, fill: 'blue'},
      {duration: 400})
    .add(
      circle,
      {cy: 95, fill: 'green'},
      {delay: seq.prev.end(-100), duration: 500})
    .add(
      triangle,
      {transform: {translate: -90}, fill: 'violet'},
      {delay: seq.prev.end(-100), duration: 600})
    .add(
      octagon,
      {transform: {translate: [0, -90]}, fill: 'red'},
      {delay: seq.prev.end(-100), duration: 700});
  function before() {
    play.disabled = true;
    rect.x(0).fill('red');
    circle.cy(5).fill('blue');
    triangle.transform('').fill('green');
    octagon.transform('').fill('violet');
  }
  function after() {
    play.disabled = false;
  }
  play.addEventListener('click', function() {
    seq.play();
  });
</script>

Create a new sequence

const seq = svg.Seq();

The .Seq() method create a new animation sequence object. With this object you can define and run several animations coordinated.

.Seq([before] [, after]) has two optional parameter:

• {function} before: it is a callback that run before the sequence run. It is very useful for initializing attributes. Optional.

• {function} after: it is a callback that run after the sequence run. It is very useful for reset the attributes. Optional.

seq.add()

seq.add(rect, [{x: 0, fill: 'red'}, {x: 90, fill: 'blue'}], {duration: 400})

By seq.add() you can add new steps of fragment to the animation sequence.

seq.add(element, keyframes [,options] [, before] [, after]) has these parameters:

• {string|object} element:

  • {string} element: is the selector of the element to apply the animation.

  • {object} element: is the object to apply the animation.

• {object|array} keyframes:

  • {object} properties_values: is an object with the attributes or properties names as keys and target value as values.

  • {array} keyframes_array: is an array with object with the attributes or properties names as keys and target value as values.

• {number|object} options: optional

  • {number} duration: is a number that defines, in milliseconds, the time of the animation. The default value is 200 (fast animation). It must be 0 for an immediate change. Optional.

  • {object} options_object: is an object with serval options, includes duration, delay, etc. Optional.

• {function} before: a callback function called before the element animation is executed. Optional.

• {function} after: a callback function called after the element animation has finished. Optional.

Link animations

To facilitate linked animation, the Sequence plugin provides some complementary functions. Commonly, these functions are used to link animations with the delay option.

seq.add(rect, {x: 90, fill: 'blue'}, {duration: 400})
   .add(circle, {cy: 95, fill: 'green'}, {delay: seq.prev.end(-100), duration: 500})

• seq.prev.begin([diff]): return the previous added animation begin time.

• seq.prev.end([diff]): return the previous added animation finish time.

• seq.step(position).begin([diff]): return the animation begin time for one animation by index.

• seq.step(position).end([diff]): return the animation begin time for one animation by index.

seq.play()

seq.play();

This method executes the sequence immediately. If .play() is called again before the current sequence ends, the previous sequence is not canceled and the result should be unexpected.