]> source.dussan.org Git - svg.js.git/commitdiff
fix for the endvalue of the animation
authorUlrich-Matthias Schäfer <ulima.ums@googlemail.com>
Thu, 31 May 2018 19:30:10 +0000 (21:30 +0200)
committerUlrich-Matthias Schäfer <ulima.ums@googlemail.com>
Thu, 31 May 2018 19:30:10 +0000 (21:30 +0200)
spec/spec/runner.js
src/runner.js

index e90bb5745eae424ab04e8e9dff07348cf41464f0..2f889f3626b62f848b33fdf5ae94119da97d08c6 100644 (file)
@@ -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()
index f732e6cd6d0755f161e88ea9c9fc57bacad4a387..c867049a8bb628048d7171d028913eeaa1e04e9e 100644 (file)
@@ -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)