Tweens now have built-in point array support. This means thatyou can tween any numeric value, or any array of points. Very handy for Line, spline, Polygon, and Blob

src/Tween.js

@@ -85,7 +85,7 @@
         _addAttrs: function(key, end) {
             var node = this.node,
                 nodeId = node._id,
-                tweenId;
+                start, diff, tweenId, n, len, startVal, endVal;
 
             // remove conflict from tween map if it exists
             tweenId = Kinetic.Tween.tweens[nodeId][key];
@@ -96,22 +96,57 @@
 
             // add to tween map
             start = node['get' + Kinetic.Util._capitalize(key)]();
+            
+            if (Kinetic.Util._isArray(end)) {
+                end = Kinetic.Util._getPoints(end);
+                diff = [];
+                len = end.length;
+                for (n=0; n<len; n++) { 
+                    startVal = start[n];
+                    endVal = end[n];
+                    diff.push({
+                        x: endVal.x - startVal.x,
+                        y: endVal.y - startVal.y
+                    });
+                }
+
+            }
+            else {
+                diff = end - start;
+            }
+
             Kinetic.Tween.attrs[nodeId][this._id][key] = {
                 start: start,
-                diff: end - start
+                diff: diff
             };    
             Kinetic.Tween.tweens[nodeId][key] = this._id; 
         },
         _tweenFunc: function(i) {
             var node = this.node,
                 attrs = Kinetic.Tween.attrs[node._id][this._id],
-                key, attr, start, diff, newVal;
+                key, attr, start, diff, newVal, n, len, startVal, diffVal;
 
             for (key in attrs) {
                 attr = attrs[key];
                 start = attr.start;
                 diff = attr.diff;
-                newVal = start + (diff * i);  
+
+                if (Kinetic.Util._isArray(start)) {
+                    newVal = [];
+                    len = start.length;
+                    for (n=0; n<len; n++) {
+                        startVal = start[n];
+                        diffVal = diff[n];
+                        newVal.push({
+                            x: startVal.x + (diffVal.x * i),
+                            y: startVal.y + (diffVal.y * i)
+                        });
+                    }
+                }
+                else {
+                    newVal = start + (diff * i); 
+                }
+                 
                 node['set' + Kinetic.Util._capitalize(key)](newVal);
             }
         },

src/shapes/Line.js

@@ -72,36 +72,6 @@
             this._setAttr('points', points);
             this._points = points;
         },
-        setEndPoints: function(val) {
-            var points = Kinetic.Util._getPoints(val);
-            this._setAttr('endPoints', points);
-        },
-        setPointsPosition: function(val) {
-            var points = this._points,
-                endPoints = this.getEndPoints(),
-                len = points.length,
-                newPoints = [],
-                n, point, endPoint, diff;
-
-            for (n=0; n<len; n++) {
-                point = points[n];
-                endPoint = endPoints[n];
-
-                diffX = (endPoint.x - point.x) * val;
-                diffY = (endPoint.y - point.y) * val;
-
-                newPoints.push({
-                    x: point.x + diffX,
-                    y: point.y + diffY
-                });
-            }
-
-            this._setAttr('pointsPosition', val);
-            this._setAttr('points', newPoints);
-        },
-        getPointsPosition: function() {
-            return this.attrs.pointsPosition;
-        },
         /**
          * get points array
          * @method
@@ -111,9 +81,6 @@
          // default array literal each time because arrays are modified by reference
         getPoints: function() {
             return this.attrs.points || [];
-        },
-        getEndPoints: function() {
-            return this.attrs.endPoints || [];
         }
     };
     Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);

src/shapes/Spline.js

@@ -88,10 +88,6 @@
 
             canvas.stroke(this);
         },
-        setPointsPosition: function(val) {
-            Kinetic.Line.prototype.setPointsPosition.call(this, val);
-            this._setAllPoints();
-        },
         setPoints: function(val) {
             Kinetic.Line.prototype.setPoints.call(this, val);
             this._setAllPoints();

tests/js/manualTests.js

@@ -1,5 +1,5 @@
 Test.Modules.Tween = {
-    '*tween spline': function(containerId) {
+    'tween spline': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -14,19 +14,12 @@ Test.Modules.Tween = {
                 500, 109,
                 300, 109
             ],
-            endPoints: [
-                200, 160,
-                200, 23,
-                500, 109,
-                100, 10
-            ],
             stroke: 'blue',
             strokeWidth: 10,
             lineCap: 'round',
             lineJoin: 'round',
             draggable: true,
-            tension: 1,
-            pointsPosition: 0
+            tension: 1
         });
 
         layer.add(spline);
@@ -35,7 +28,14 @@ Test.Modules.Tween = {
         var tween = new Kinetic.Tween({
             node: spline,
             duration: 1,
-            pointsPosition: 1,
+           //x: 100,
+
+            points: [
+                200, 160,
+                200, 23,
+                500, 109,
+                100, 10
+            ],
             easing: Kinetic.Easings.BackEaseOut
         });
 
@@ -48,7 +48,7 @@ Test.Modules.Tween = {
         });
 
     },
-    '*ease-in, ease-out, ease-in-out hovers': function(containerId) {    
+    'ease-in, ease-out, ease-in-out hovers': function(containerId) {    
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -137,7 +137,7 @@ Test.Modules.Tween = {
             evt.targetNode.tween.reverse();
         });
     },
-    '*simple tween': function(containerId) {
+    'simple tween': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -259,7 +259,7 @@ Test.Modules.ANIMATION = {
         var centerX = stage.getWidth() / 2 - 100 / 2;
 
         var anim = new Kinetic.Animation(function(frame) {
-            rect.attrs.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
+            rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
         }, layer);
 
         anim.start();