Scaling Raster with Paper.js using Tween.js

Question

I'm think I'm having a similar issue as this in that I can not work out (or know if it exists) whereby I can get access to the scaling applied to a given object (in my instance, a raster).

I need to know this so I can animate the scaling via Tween.js.

Anyone have any ideas or know if indeed it is possible to find out the current scaling applied to a raster (or any) object?

I thought it was an issue with Rasters so I tried tweening the scale property of a Path and then a Group and I couldn't get access to the values in order to animate it.

Because I am using Tween.js I can not simply use the object.scale(value) function.

UPDATE

I even tried applying an arbitrary (animated) number to the scale function and it failed to work... i.e.:

object.scale( 0 );
object.arbitraryNumber = 0;
createjs.Tween.get( object )
    .to( { arbitraryNumber:1 } , 1000, createjs.Ease.getPowInOut(2) )
    .addEventListener( "change", function( event ) {
       event.target.target.scale( event.target.target.arbitraryNumber);
} );

Although this did not work, when the same approach was applied to the x position of the object, it animated fine.

Is there anything that needs to be flagged in order to update scaling of an object?

Answer 1

When calling Item.scale() method on each frame with values from 0 to 1, you are actually scaling down item exponentially because each call scales the item relatively to the previous value.
What you want to do is animate the Item.scaling property instead.

You also have to know that by default, PaperJS use global coordinates system and apply every transformations directly to points.
You can change this behavior by setting Item.applyMatrix property to false.
Doing this, scale change will affect item matrix instead of affecting points coordinates and you will be able to animate it as you expect.

Here is simple Sketch of a scale animation:

var circle         = new Path.Circle(view.center, 50);
circle.fillColor   = 'orange';
circle.applyMatrix = false;

function onFrame(event)
{
    circle.scaling = Math.sin(1 + event.count * 0.05);
}

You should be able to transpose this example to your Tween.js context easily.