3

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

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

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

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

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

为了更新对象的缩放，是否需要标记任何内容？

4

1 回答 1

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

于 2018-09-21T09:11:11.117 回答