使用Tween.js扩展Paper.js的光栅缩放

Question

我认为我遇到了一个类似于这个问题，我无法找出（或者不知道是否存在）一种方法来获取应用于给定对象（在我的情况下是光栅）的缩放比例。

我需要知道这个值，以便可以通过Tween.js进行缩放动画。

有人有任何想法或者知道是否可能找出当前应用于光栅（或任何）对象的缩放比例吗？

我以为这是光栅图的问题，所以我尝试过对路径和组的比例属性进行补间处理，但我无法访问值以进行动画处理。

由于我正在使用Tween.js，因此无法简单地使用object.scale（value）函数。

更新

我甚至尝试将任意（动画）数字应用到比例函数中，但它无法工作...即：

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);
} );

尽管这种方法不起作用，但是当同样的方法应用于对象的x位置时，它可以正常动画。是否需要标记任何东西以更新对象的缩放？

- jayfield1979

Answer 1

当在每一帧上使用从0到1的值调用Item.scale()方法时，实际上是按指数方式缩小物品，因为每次调用都相对于前一个值缩放物品。
你想要做的是动画Item.scaling属性。

你还需要知道，默认情况下，PaperJS使用全局坐标系，并直接将每个变换应用于点。
你可以通过将Item.applyMatrix属性设置为false来更改此行为。
这样做，缩放更改将影响项目矩阵，而不是影响点坐标，你将能够按预期对其进行动画处理。

这是一个简单的比例动画Sketch:

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);
}

你应该能够轻松地将这个示例转换到你的 Tween.js 上下文中。

- sasensi