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

时间:2016-06-01 12:42:15

标签: javascript paperjs tweenjs

我认为我有similar issue as this因为我无法解决(或知道它是否存在)我可以访问应用于给定对象的缩放(在我的实例,一个栅格)。

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

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

我认为这是Rasters的一个问题,所以我尝试补间Path的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位置使用相同的方法时,它会动画很好。

是否需要标记任何内容才能更新对象的缩放?

1 个答案:

答案 0 :(得分:1)

在值从0到1的每一帧上调用Item.scale()方法时,实际上您正在按指数比例缩小项目,因为每次调用都相对于先前值缩放项目。
您想要做的是为Item.scaling属性设置动画。

您还必须知道,默认情况下,PaperJS使用全局坐标系并将每个变换直接应用于点。
您可以通过将Item.applyMatrix属性设置为File "/home/pi/Desktop/testFB.py", line 1, in <module> import pyrebase ImportError: No module named 'pyrebase' 来更改此行为。
这样,比例更改将影响项目矩阵,而不是影响点坐标,并且您可以按照预期对其进行动画处理。

以下是简单的Sketch的缩放动画:

 import pyrebase

    config = {
      "apiKey": "apikey",
      "authDomain": "db.firebaseapp.com",
      "databaseURL": "https://db.firebaseio.com/",
      "storageBucket": "db.appspot.com"
    }
firebase = Pyrebase.initialize_app(config)
db=firebase.database()
print(db.get())

您应该能够轻松地将此示例转换到Tween.js上下文中。