javascript - 使用 Tween.js 使用 Paper.js 缩放栅格

Question

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

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

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

我认为这是 Rasters 的问题，所以我尝试补间 Path 和 Group 的比例属性，但我无法访问这些值来为其设置动画。

因为我使用的是 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 位置时，它的动画效果很好。

是否需要标记任何内容以更新对象的缩放比例？

Answer 1

调用Item.scale()时每个帧上的方法的值从 0 到 1，您实际上是按指数方式缩小项目，因为每次调用都会相对于前一个值缩放项目。
你想要做的是为 Item.scaling 设置动画。属性(property)代替。

您还必须知道，默认情况下，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 上下文。