From: Ulrich-Matthias Schäfer Date: Thu, 31 May 2018 19:30:10 +0000 (+0200) Subject: fix for the endvalue of the animation X-Git-Tag: 3.0.0~60^2~45 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=d215d392ef980e9e92c62fb124bbbd8b2ee11ac2;p=svg.js.git fix for the endvalue of the animation --- diff --git a/spec/spec/runner.js b/spec/spec/runner.js index e90bb57..2f889f3 100644 --- a/spec/spec/runner.js +++ b/spec/spec/runner.js @@ -254,19 +254,250 @@ describe('SVG.Runner', function () { expect(runFn).toHaveBeenCalledWith(1) }) - it('does behave correctly at the end of reversed loop', function () { - var spy = jasmine.createSpy('stepper') - var runner = new SVG.Runner(1000).loop(6, true) - runner.queue(null, spy) - // the 6th loop is reversed - runner.step(5750) - expect(spy).toHaveBeenCalledWith(0.25) - runner.step(250) - expect(spy).toHaveBeenCalledWith(0) + describe('looping', function () { + describe('without wait', function () { + describe('unreversed', function () { + describe('nonswinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, false) + runner.queue(null, spy) + + runner.step(5750) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, false) + runner.queue(null, spy) + + runner.step(4750) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + }) + + describe('swinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, true) + runner.queue(null, spy) + + runner.step(5750) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, true) + runner.queue(null, spy) + + runner.step(4750) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + }) + }) + + describe('reversed', function () { + describe('nonswinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, false).reverse() + runner.queue(null, spy) + + runner.step(5750) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, false).reverse() + runner.queue(null, spy) + + runner.step(4750) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + }) + + describe('swinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, true).reverse() + runner.queue(null, spy) + + runner.step(5750) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, true).reverse() + runner.queue(null, spy) + + runner.step(4750) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + }) + }) + }) + + + describe('with wait', function () { + describe('unreversed', function () { + describe('nonswinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, false, 100) + runner.queue(null, spy) + + runner.step(5450) + expect(spy).toHaveBeenCalledWith(1) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, false, 100) + runner.queue(null, spy) + + runner.step(4350) + expect(spy).toHaveBeenCalledWith(1) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + }) + + describe('swinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, true, 100) + runner.queue(null, spy) + + runner.step(5450) + expect(spy).toHaveBeenCalledWith(1) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, true, 100) + runner.queue(null, spy) + + runner.step(4350) + expect(spy).toHaveBeenCalledWith(0) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + }) + }) + + describe('reversed', function () { + describe('nonswinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, false, 100).reverse() + runner.queue(null, spy) + + runner.step(5450) + expect(spy).toHaveBeenCalledWith(0) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, false, 100).reverse() + runner.queue(null, spy) + + runner.step(4350) + expect(spy).toHaveBeenCalledWith(0) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + }) + + describe('swinging', function () { + it('does behave correctly at the end of an even loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(6, true, 100).reverse() + runner.queue(null, spy) + + runner.step(5450) + expect(spy).toHaveBeenCalledWith(0) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.75) + runner.step(250) + expect(spy).toHaveBeenCalledWith(1) + }) + + it('does behave correctly at the end of an uneven loop', function () { + var spy = jasmine.createSpy('stepper') + var runner = new SVG.Runner(1000).loop(5, true, 100).reverse() + runner.queue(null, spy) + + runner.step(4350) + expect(spy).toHaveBeenCalledWith(1) + spy.calls.reset() + + runner.step(800) + expect(spy).toHaveBeenCalledWith(0.25) + runner.step(250) + expect(spy).toHaveBeenCalledWith(0) + }) + }) + }) + }) }) + + }) + describe('active()', function () { it('acts as a getter without parameters', function () { var runner = new SVG.Runner() diff --git a/src/runner.js b/src/runner.js index f732e6c..c867049 100644 --- a/src/runner.js +++ b/src/runner.js @@ -233,14 +233,40 @@ SVG.Runner = SVG.invent({ var reversing = (swinging && !this._reversing) || (!swinging && this._reversing) - // Figure out the position in the animation - var endingValue = Number(!this._swing - || (!this._reversing && this._times % 2 == 1) - || (this._reversing && this._times % 2 == 0) + // var endingValue = Number(!this._swing + // || (this._swing && !this._reversing && this._times % 2 == 1) + // || (this._swing && this._reversing && this._times % 2 == 0) + // ) + + /*************************************************** + Karnaugh for endposition + + r = reversed + s = swing + o = odd + + | r |!r + ------------- + !s !o | 1 | 0 + !s o | 1 | 0 + s o | 1 | 0 + s !0 | 0 | 1 + + result = !r && !s || !r && o || r && s && !o + **************************************************/ + + + var endingValue = Number( + (!this._reversing && !this._swing) || + (!this._reversing && this._times % 2) || + (this._reversing && this._swing && this._times % 2 == 0) ) + var startingValue = Number(this._reversing) var position = (this._time % loopDuration) / this._duration var clipPosition = Math.min(1, position) + + // Figure out the position in the animation var stepperPosition = this._time <= 0 ? startingValue : this._time >= duration ? endingValue : (reversing ? 1 - clipPosition : clipPosition)