使用Tween.js使用Paper.js缩放光栅

Question

我认为我遇到了类似的问题 ，因为我无法解决（或者知道它是否存在）我可以访问应用于给定对象的缩放（在我的实例中，是栅格）。

我需要知道这一点，所以我可以通过Tween.js动画缩放。

任何人都有任何想法或知道是否确实可以找出应用于栅格（或任何）对象的当前缩放？

我认为这是Rasters的一个问题，所以我尝试补间Path的scale属性，然后是一个Group，我无法访问这些值以便为它设置动画。

因为我使用的是Tween.js，所以我不能简单地使用object.scale（value）函数。

UPDATE

我甚至尝试将任意（动画）数字应用于缩放功能，但它无法工作...即：

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位置时，它会动画很好。

是否有任何需要标记以更新对象的缩放？

Answer 1

在每个帧上调用Item.scale（）方法时，值为0到1，实际上是按指数缩小项目，因为每个调用都会相对于前一个值缩放项目。
您要做的是改为设置Item.scaling属性的动画。

您还必须知道，默认情况下，PaperJS使用全局坐标系统并将每个转换直接应用于点。
您可以通过将Item.applyMatrix属性设置为false来更改此行为。
执行此操作时，比例更改将影响项目矩阵，而不是影响点坐标，您将能够按预期对其进行动画处理。

这是一个缩放动画的简单草图 ：

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上下文中。