Merge pull request #526 from tweenjs/relativeyoyo

Fix to make yoyo work with relative values

Author: trusktr

examples/10_yoyo.html

@@ -15,9 +15,15 @@ <h2>10 _ yoyo</h2>
 			<div id="target1" data-rotation="0" data-y="0" class="box" style="left: 0px; top: 0px">
 				yoyo with repeat once
 			</div>
-			<div id="target2" data-rotation="0" data-y="0" class="box" style="left: 300px; top: 0px">
+			<div id="target2" data-rotation="0" data-y="0" class="box" style="left: 200px; top: 0px">
 				yoyo with repeat forever
 			</div>
+			<div id="target3" data-rotation="0" data-y="0" class="box" style="left: 400px; top: 0px">
+				yoyo with repeat once, relative values
+			</div>
+			<div id="target4" data-rotation="0" data-y="0" class="box" style="left: 600px; top: 0px">
+                yoyo with repeat forever, relative values
+			</div>
 		</div>
 
 		<script src="../dist/tween.umd.js"></script>
@@ -50,6 +56,28 @@ <h2>10 _ yoyo</h2>
 							updateBox( target2, object );
 						})
 						.start();
+					target3 = document.getElementById( 'target3' ),
+					tween3 = new TWEEN.Tween( target3.dataset )
+						.to( { rotation: "+360", y:"+300" }, 750 )
+						.repeat( 1 )
+						.delay( 1000 )
+						.yoyo( true )
+						.easing( TWEEN.Easing.Cubic.InOut )
+						.onUpdate( function(object) {
+							updateBox( target3, object );
+						})
+						.start();
+					target4 = document.getElementById( 'target4' ),
+					tween4 = new TWEEN.Tween( target4.dataset )
+						.to( { rotation: "+360", y:"+300" }, 750 )
+						.repeat( Infinity )
+						.delay( 1000 )
+						.yoyo( true )
+						.easing( TWEEN.Easing.Cubic.InOut )
+						.onUpdate( function(object) {
+							updateBox( target4, object );
+						})
+						.start();
 			}
 
 			function animate( time ) {
@@ -94,6 +122,12 @@ <h2>10 _ yoyo</h2>
 			#target2 {
 				background: #cfc;
 			}
+			#target3 {
+				background: deeppink;
+			}
+			#target4 {
+				background: cyan;
+			}
 		</style>
 	</body>
 </html>

src/Tween.js

@@ -475,14 +475,19 @@ TWEEN.Tween.prototype = {
 				// Reassign starting values, restart by making startTime = now
 				for (property in this._valuesStartRepeat) {
 
-					if (typeof (this._valuesEnd[property]) === 'string') {
-						this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
+					if (!this._yoyo && typeof(this._valuesEnd[property]) === 'string') {
+						this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property], 10);
 					}
 
 					if (this._yoyo) {
 						var tmp = this._valuesStartRepeat[property];
 
-						this._valuesStartRepeat[property] = this._valuesEnd[property];
+						if (typeof(this._valuesEnd[property]) === 'string') {
+							this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property], 10);
+						} else {
+							this._valuesStartRepeat[property] = this._valuesEnd[property];
+						}
+
 						this._valuesEnd[property] = tmp;
 					}
 

test/unit/tests.js

@@ -345,7 +345,7 @@
 
 			},
 
-			'Tween relative positive value, with sign': function(test) {
+			'Tween relative positive value': function(test) {
 
 				var obj = { x: 0 },
 					t = new TWEEN.Tween( obj );
@@ -387,6 +387,52 @@
 
 			},
 
+			'Tween relative positive value, with yoyo': function(test) {
+
+				var obj = { x: 0 },
+					t = new TWEEN.Tween( obj );
+
+				t.to( { x: "+100" }, 1000 );
+				t.repeat( 1 );
+				t.yoyo( true );
+				t.start( 0 );
+
+				t.update( 500 );
+				test.equal( obj.x, 50 );
+				t.update( 1000 );
+				test.equal( obj.x, 100 );
+				t.update( 1500 );
+				test.equal( obj.x, 50 );
+				t.update( 2000 );
+				test.equal( obj.x, 0 );
+
+				test.done();
+
+			},
+
+			'Tween relative negative value, with yoyo': function(test) {
+
+				var obj = { x: 0 },
+					t = new TWEEN.Tween( obj );
+
+				t.to( { x: "-100" }, 1000 );
+				t.repeat( 1 );
+				t.yoyo( true );
+				t.start( 0 );
+
+				t.update( 500 );
+				test.equal( obj.x, -50 );
+				t.update( 1000 );
+				test.equal( obj.x, -100 );
+				t.update( 1500 );
+				test.equal( obj.x, -50 );
+				t.update( 2000 );
+				test.equal( obj.x, -0 );
+
+				test.done();
+
+			},
+
 			'Test TWEEN.Tween.start()': function(test) {
 
 				var obj = { },