How to use shifty - 10 common examples

it('sets up custom curves correctly', () => {
      setBezierFunction('custom', 0, 0.25, 0.5, 0.75);
      rekapi = setupTestRekapi();

      exportedTimeline = rekapi.exportTimeline();

      // Reset for a clean test
      unsetBezierFunction('custom');

      targetRekapi = new Rekapi();
      targetRekapi.importTimeline(exportedTimeline);

      assert.equal(typeof Tweenable.formulas.custom, 'function');
      assert.equal(Tweenable.formulas.custom.x1, 0);
      assert.equal(Tweenable.formulas.custom.y1, 0.25);
      assert.equal(Tweenable.formulas.custom.x2, 0.5);
      assert.equal(Tweenable.formulas.custom.y2, 0.75);

      // Clean up Tweenable
      unsetBezierFunction('custom');
    });
  });

it('sets up custom curves correctly', () => {
      setBezierFunction('custom', 0, 0.25, 0.5, 0.75);
      rekapi = setupTestRekapi();

      exportedTimeline = rekapi.exportTimeline();

      // Reset for a clean test
      unsetBezierFunction('custom');

      targetRekapi = new Rekapi();
      targetRekapi.importTimeline(exportedTimeline);

      assert.equal(typeof Tweenable.formulas.custom, 'function');
      assert.equal(Tweenable.formulas.custom.x1, 0);
      assert.equal(Tweenable.formulas.custom.y1, 0.25);
      assert.equal(Tweenable.formulas.custom.x2, 0.5);
      assert.equal(Tweenable.formulas.custom.y2, 0.75);

      // Clean up Tweenable
      unsetBezierFunction('custom');
    });
  });

it('sets up custom curves correctly', () => {
      setBezierFunction('custom', 0, 0.25, 0.5, 0.75);
      rekapi = setupTestRekapi();

      exportedTimeline = rekapi.exportTimeline();

      // Reset for a clean test
      unsetBezierFunction('custom');

      targetRekapi = new Rekapi();
      targetRekapi.importTimeline(exportedTimeline);

      assert.equal(typeof Tweenable.formulas.custom, 'function');
      assert.equal(Tweenable.formulas.custom.x1, 0);
      assert.equal(Tweenable.formulas.custom.y1, 0.25);
      assert.equal(Tweenable.formulas.custom.x2, 0.5);
      assert.equal(Tweenable.formulas.custom.y2, 0.75);

exportedTimeline = rekapi.exportTimeline();

      // Reset for a clean test
      unsetBezierFunction('custom');

      targetRekapi = new Rekapi();
      targetRekapi.importTimeline(exportedTimeline);

      assert.equal(typeof Tweenable.formulas.custom, 'function');
      assert.equal(Tweenable.formulas.custom.x1, 0);
      assert.equal(Tweenable.formulas.custom.y1, 0.25);
      assert.equal(Tweenable.formulas.custom.x2, 0.5);
      assert.equal(Tweenable.formulas.custom.y2, 0.75);

      // Clean up Tweenable
      unsetBezierFunction('custom');
    });
  });

play (iterations = -1) {
    cancelLoop(this);

    if (this._playState === PAUSED) {
      // Move the playhead to the correct position in the timeline if resuming
      // from a pause
      this._loopTimestamp += Tweenable.now() - this._pausedAtTime;
    } else {
      this._loopTimestamp = Tweenable.now();
    }

    this._timesToIterate = iterations;
    this._playState = PLAYING;

    // Start the update loop
    tick(this);

    fireEvent(this, 'playStateChange');
    fireEvent(this, 'play');

    return this;
  }

play (iterations = -1) {
    cancelLoop(this);

    if (this._playState === PAUSED) {
      // Move the playhead to the correct position in the timeline if resuming
      // from a pause
      this._loopTimestamp += Tweenable.now() - this._pausedAtTime;
    } else {
      this._loopTimestamp = Tweenable.now();
    }

    this._timesToIterate = iterations;
    this._playState = PLAYING;

    // Start the update loop
    tick(this);

    fireEvent(this, 'playStateChange');
    fireEvent(this, 'play');

    return this;
  }

export default function tweenExtender(
    target,
    {
        duration = 1000,
        easing = 'easeOutQuad',
        resetValue = target(),
        resetOnChange = false,
        useDiscreteValues = false
    }
) {
    const result  = ko.observable(resetValue);
    tween({
        from: { val: resetValue },
        to: { val: target() },
        duration: duration,
        easing: easing,
        step: ({ val }) => result(val)
    });

    // Create a pure observable to control the life time of the subscription
    // and to allow for automatic disposing in order to prevent memory leaks.
    const pure = ko.pureComputed(
        useDiscreteValues ? () => Math.round(result()) : result
    );

    let subscription;
    pure.subscribe(() => {
        subscription = target.subscribe(val =>

let start = 0
    let allPorts = canvas.getAllPorts().clone()
    allPorts.each(function (i, element) {
      if (typeof element.__beforeInflate === "undefined") {
        element.__beforeInflate = element.getWidth()
      }
      start = element.__beforeInflate
    })


    // animate the resize of the ports
    //
    allPorts.grep(function (p) {
      return (p.NAME != figure.NAME && p.parent !== figure.parent) || (p instanceof draw2d.HybridPort) || (figure instanceof draw2d.HybridPort)
    })
    this.tweenable = new Tweenable()
    this.tweenable.tween({
      from: {'size': start / 2},
      to: {'size': start},
      duration: 200,
      easing: "easeOutSine",
      step: function (params) {
        allPorts.each(function (i, element) {
          // IMPORTANT shortcut to avoid rendering errors!!
          // performance shortcut to avoid a lot of events and recalculate/routing of all related connections
          // for each setDimension call. Additional the connection is following a port during Drag&Drop operation
          element.shape.attr({rx: params.size, ry: params.size})
          element.width = element.height = params.size * 2
        })
      }
    })

setZoom: function (zoomFactor, animated) {

    // determine the center of the current canvas. We try to keep the
    // current center during zoom operation
    //
    let scrollTop = this.canvas.getScrollTop()
    let scrollLeft = this.canvas.getScrollLeft()
    let scrollWidth = this.canvas.getScrollArea().width()
    let scrollHeight = this.canvas.getScrollArea().width()
    let centerY = scrollTop + (scrollHeight / 2) * this.canvas.zoomFactor
    let centerX = scrollLeft + (scrollWidth / 2) * this.canvas.zoomFactor

    if (animated) {
      let myTweenable = new Tweenable()
      myTweenable.tween({
        from: {'x': this.canvas.zoomFactor},
        to: {'x': zoomFactor},
        duration: 300,
        easing: "easeOutSine",
        step: params => {
          this._zoom(params.x, centerX, centerY)
        },
        finish: state => {
          this.debouncedZoomedCallback()
        }
      })
    }
    else {
      this._zoom(zoomFactor, {x: centerX, y: centerY})
      this.debouncedZoomedCallback()

it('easing is taken from the destination frame', () => {
        let tweenableComparator;

        actor
          .keyframe(0, { x: 0 }, 'linear')
          .keyframe(1000, { x: 100 }, 'easeInSine')
          .keyframe(2000, { x: 200 }, 'easeOutCirc');

        tweenableComparator =
          interpolate({ x: 0 }, { x: 100 }, 0.5, 'easeInSine');

        actor._updateState(500);
        assert.equal(actor.get().x, tweenableComparator.x);

        tweenableComparator =
          interpolate({ x: 100 }, { x: 200 }, 0.5, 'easeOutCirc');

        actor._updateState(1500);
        assert.equal(actor.get().x, tweenableComparator.x);
      });
    });