使用Tween.js在Paper.js中缩放栅格

Question

我想我有一个similar issue as this，因为我不能计算出(或者知道它是否存在)，因此我可以访问应用于给定对象(在我的实例中，是栅格)的缩放。

我需要知道这一点，这样我才能通过Tween.js进行动画缩放。

任何人有任何想法或知道是否确实有可能找到当前应用于栅格(或任何)对象的缩放比例？

我认为这是Raster的问题，所以我尝试对路径和Group的scale属性进行补间，但我无法访问这些值来对其进行动画处理。

因为我使用的是值，所以不能简单地使用object.scale( Tween.js )函数。

更新

我甚至尝试将任意(动画)数字应用到scale函数，但它不起作用……即：

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

当在值从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上下文中。