- Jump To … +
  ./source/core/animation-loop.js ./source/core/display-cycle.js ./source/core/document-root-elements.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/random-seed.js ./source/core/shared-vars.js ./source/core/snippets.js ./source/core/system-flags.js ./source/core/user-interaction.js ./source/core/utilities.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/array-pool.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/canvas.js ./source/factory/cell-fragment.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/conic-gradient.js ./source/factory/coordinate.js ./source/factory/crescent.js ./source/factory/drag-zone.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/filter-engine-bluenoise-data.js ./source/factory/filter-engine.js ./source/factory/filter.js ./source/factory/font-attributes.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/image-asset.js ./source/factory/keyboard-zone.js ./source/factory/line-spiral.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/noise-asset.js ./source/factory/observe-update.js ./source/factory/oval.js ./source/factory/palette.js ./source/factory/particle-force.js ./source/factory/particle-history.js ./source/factory/particle-spring.js ./source/factory/particle-world.js ./source/factory/particle.js ./source/factory/pattern.js ./source/factory/phrase.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/quaternion.js ./source/factory/radial-gradient.js ./source/factory/raw-asset.js ./source/factory/reaction-diffusion-asset.js ./source/factory/rectangle.js ./source/factory/render-animation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/sprite-asset.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/state.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstacked-element.js ./source/factory/vector.js ./source/factory/video-asset.js ./source/factory/wheel.js ./source/mixin/anchor.js ./source/mixin/asset-advanced-functionality.js ./source/mixin/asset-consumer.js ./source/mixin/asset.js ./source/mixin/base.js ./source/mixin/cascade.js ./source/mixin/cell-key-functions.js ./source/mixin/delta.js ./source/mixin/display-shape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shape-basic.js ./source/mixin/shape-curve.js ./source/mixin/shape-path-calculation.js ./source/mixin/styles.js ./source/mixin/tween.js

- §

  # Tween mixin

  This mixin defines attributes and functions shared by Tween objects and Action objects

  - Ticker objects do not use this mixin
- §

  #### Imports

      import * as library from '../core/library.js';

      import { animationtickers } from '../core/library.js';

      import { convertTime, isa_fn, isa_obj, mergeOver, xt, xtGet, λnull, Ωempty } from '../core/utilities.js';

      import { releaseArray, requestArray } from '../factory/array-pool.js';

      import { FUNCTION, PC, TARGET_SECTIONS, UNKNOWN, UNNAMED, ZERO_STR } from '../core/shared-vars.js';

- §

  Helper function

      const locateTarget = (item) => {

          if(item && item.substring) {

              let result;

              return (TARGET_SECTIONS.some(section => {

                  result = library[section][item];
                  return result;

              })) ? result : false;
          }
          return false;
      };

- §

  #### Export function

      export default function (P = Ωempty) {

- §

  #### Shared attributes

          const defaultAttributes = {

- §

  order - integer Number (defaults to `1`) - the order in which Tween/Actions run is determined by their order value: Tween/Actions with a lower order value run before those with a higher value

  - Run order for Tween/Actions with the same order value is determined by the order in which they are defined in code

              order: 1,

- §

  ticker - String - the name-String of the Ticker the Tween/Action uses for its timeline

              ticker: ZERO_STR,

- §

  targets - Array containing the Scrawl-canvas objects on which the Tween/Action will act; one Tween/Action can modify attributes in multiple objects

              targets: null,

- §

  time - the timeline time when the Tween/Action activates and runs.

  - Tween/Actions given a time value of `0` will run as soon as their associated Ticker timeline runs; values greater than 0 will delay their run until that time is reached on the timeline.
  - Time can be set as a Number value representing microseconds
  - It can also be set as a time string - `3s` is 3000 milliseconds; `200ms` is 200 milliseconds
  - Or it can be set as a percentage String - `30%` - measured against the duration of the Ticker timeline.

              time: 0,

- §

  action - a user-defined function which will run every time the Tween/Action completes an update - generally once each Display cycle while the Tween/Action is running

              action: null,

- §

  reverseOnCycleEnd - Boolean flag; when set, the Tween/Action will reverse its direction and continue running, rather than halt.

              reverseOnCycleEnd: false,

- §

  reversed - internal Boolean flag indicating whether the Tween/Action is running in `forwards` or `backwards` mode

              reversed: false,
          };
          P.defs = mergeOver(P.defs, defaultAttributes);

- §

  #### Packet management

  No additional packet functionality defined here

- §

  #### Clone management

  No additional clone functionality defined here

- §

  #### Kill management

          P.kill = function () {

              const ticker = this.ticker;

              if (ticker == `${this.name}_ticker`) {

                  const t = animationtickers[ticker];

                  if (t) t.kill();
              }
              else if (ticker) this.removeFromTicker(ticker);

              this.deregister();

              return true;
          };

- §

  #### Get, Set, deltaSet

          const G = P.getters,
              S = P.setters;

- §

  targets

  - the getter returns a fresh copy of the current targets Array

          G.targets = function () {

              return [].concat(this.targets);
          };

          S.targets = function (item = []) {

              this.setTargets(item);
          };

- §

  action

          S.action = function (item) {

              this.action = item;

              if (typeof this.action != FUNCTION) this.action = λnull;
          };

- §

  #### Prototype functions

- §

  `calculateEffectiveTime` The effective time is the time, relative to the Tween/Action’s associated Ticker timeline, when the Tween/Action will start running

          P.calculateEffectiveTime = function (item) {

              const [cType, cTime] = convertTime(xtGet(item, this.time));

              this.effectiveTime = 0;

              if (cType == PC && cTime <= 100) {

                  if (this.ticker) {

                      const ticker = animationtickers[this.ticker];

                      if (ticker) this.effectiveTime = ticker.effectiveDuration * (cTime / 100);
                  }
              }
              else this.effectiveTime = cTime;

              return this;
          };

- §

  `addToTicker`

          P.addToTicker = function (item) {

              if (xt(item)) {

                  const oldT = this.ticker,
                      newT = animationtickers[item];

                  if (oldT && oldT != item) this.removeFromTicker(oldT);

                  if (xt(newT)) {

                      this.ticker = item;
                      newT.subscribe(this.name);
                      this.calculateEffectiveTime();
                  }
              }
              return this;
          };

- §

  `removeFromTicker`

          P.removeFromTicker = function (item) {

              item = (xt(item)) ? item : this.ticker;

              if (item) {

                  const tick = animationtickers[item];

                  if (xt(tick)) {

                      this.ticker = ZERO_STR;
                      tick.unsubscribe(this.name);
                  }
              }
              return this;
          };

- §

  `setTargets`

          P.setTargets = function (items) {

              items = [].concat(items);

              const newTargets = requestArray();

              items.forEach(item => {

                  if (isa_fn(item)) {

                      if (isa_fn(item.set)) newTargets.push(item);
                  }
                  else if (isa_obj(item) && xt(item.name)) newTargets.push(item);
                  else {

                      const result = locateTarget(item);

                      if (result) newTargets.push(result);
                  }
              });

              if (!this.targets) this.targets = [];
              this.targets.length = 0;
              this.targets.push(...newTargets);
              releaseArray(newTargets);

              return this;
          };

- §

  `addToTargets`

          P.addToTargets = function (items) {

              items = [].concat(items);

              let result;

              items.forEach(item => {

                  if (typeof item == FUNCTION) {

                      if (typeof item.set == FUNCTION) this.targets.push(item);
                  }
                  else {

                      result = locateTarget(item);

                      if (result) this.targets.push(result);
                  }
              }, this);

              return this;
          };

- §

  `removeFromTargets`

          P.removeFromTargets = function (items) {

              items = [].concat(items);

              const identifiers = requestArray(),
                  newTargets = [].concat(this.targets);

              newTargets.forEach(target => {

                  const type = target.type || UNKNOWN,
                      name = target.name || UNNAMED;

                  if (type != UNKNOWN && name != UNNAMED) identifiers.push(`${type}_${name}`);
              });

              items.forEach(item => {

                  let myObj;

                  if (typeof item == FUNCTION) myObj = item;
                  else myObj = locateTarget(item);

                  if (myObj) {

                      const type = myObj.type || UNKNOWN,
                          name = myObj.name || UNNAMED;

                      if (type != UNKNOWN && name != UNNAMED) {

                          const objName = `${type}_${name}`,
                              doRemove = identifiers.indexOf(objName);

                          if (doRemove >= 0) newTargets[doRemove] = false;
                      }
                  }
              });

              if (!this.targets) this.targets = [];
              const t = this.targets;
              t.length = 0;

              newTargets.forEach(target => {

                  if (target) t.push(target);
              }, this);

              return this;
          };

- §

  `checkForTarget`

          P.checkForTarget = function (item) {

              if (!item.substring) return false;

              return this.targets.some(t => t.name == item);
          };

          P.run = λnull;
          P.isRunning = λnull;
          P.halt = λnull;
          P.reverse = λnull;
          P.resume = λnull;
          P.seekTo = λnull;
          P.seekFor = λnull;
      }