如何将变量传递给 createjs Tween 函数

Question

我希望能够将变量传递给 createjs Tween 函数：

function openPanel(id, pos) {
    //alert("This panel is: "+id+" and is pos: "+pos);
    createjs.Tween.get(id, {
        loop: false
    }).to({
        pos: 50
    }, 500, createjs.Ease.getPowInOut(4));
}

id 和 pos 变量都是字符串 - 值出现在警报中但 Tween 没有触发。有什么想法吗？

谢谢

Answer 1

使用 change 参数并在 Tween 为运行时监听变化。但是你需要像 alpha 或 x/y 那样补间 'something'。我不确定 'pos' 是否可以属性..

createjs.Tween.get(id, {override:true}).to({x:100}).addEventListener("change",handleChange);
     function handleChange(event) {
         // The id object with changed.
         // do something with 'pos'
     }

Answer 2

id 必须是对象而不是字符串。你可以给每个形状起一个名字，传递形状然后得到它的名字来决定x或y。

Answer 3

好的。如果我理解正确的话，您希望能够将属性的名称连同要对其进行补间的对象的 ID 一起传递给补间。

我不确定你是如何通过字符串 id 查找对象的（因为这不是 EaselJS 内部所做的事情），所以我编辑了你的代码以处理对象引用：

var myShape = new createjs.Shape();
// .... etc.
openPanel(myShape, "x");

function openPanel(target, prop) {
    var tweenProps = {};
    tweenProps[prop] = 50; // dynamic property access.

    createjs.Tween.get(target, {
        loop: false
    }).to(tweenProps, 500, createjs.Ease.getPowInOut(4));
}

如您所见，我使用动态属性访问（通过方括号）来设置我的补间值对象，然后将其传递给 to() 调用。

如何将变量传递给 createjs Tween 函数

How to pass variables to a createjs Tween function

javascript

easeljs

createjs