GreenSock，补间函数参数

Question

我在鼠标事件上调用了两个函数：

function menuBtnOver(e){
    var b = e.data;
    b.setPosition(b.x, b.y+5);
}

function menuBtnOut(e){
    var b = e.data;
    b.setPosition(b.x, b.y-5);
}

和：

setPosition:function(x, y) {
        if(!x) x = 0;
        if(!y) y = 0;
        this.element.css("left", x);
        this.element.css("top", y);
    }

element 属性是一个 jQuery 对象。 它工作正常，但我想对此进行动画处理。我如何使用 TweenLite 做到这一点？ 我试过以下代码：

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {top:500});
}

还有这个：

function menuBtnOver(e){
    TweenLite.to(e.data.getElement(), 1, {top:500});
}

和许多其他组合，但没有一个有效。 只有部分有效的方法是这样的：

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y]});
}

但是当我翻身并且（在任何时间之后）推出时，它只在第一个按钮上起作用，它直接移动到给定位置（没有补间），然后补间每次都会永远给我错误（至少 - 我不能'不会得到任何错误或任何其他尝试）。

未捕获的类型错误：无法读取未定义的属性“css”

在：this.element.css("left", x);

更新

我知道发生了什么。 我已经更改了代码：

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.setPosition, onUpdateParams:[e.data.x, e.data.y], onUpdateScope:e.data});
}

但问题在于，我设置为 e.data.y/x 的更新函数的参数不是动态引用，并且始终保持为来自 menuBtnOver 状态的确切值。因此，如果我将 setPosition 函数更改为：

setPosition:function(x, y) {
    if(!x) x = 0;
    if(!y) y = 0;
    this.element.css("left", this.x);
    this.element.css("top", this.y);
}

但显然这不是我想做的。 所以我可以选择做这样的事情：

 MenuButton.prototype = {
    setPosition:function(x, y) {
        if(!x) x = 0;
        if(!y) y = 0;
        this.x = x; this.y = y;
        this.element.css("left", x);
        this.element.css("top", y);
    },
    updatePosition:function(){
        this.element.css("left", this.x);
        this.element.css("top", this.y);
    }
}

function menuBtnOver(e){
    TweenLite.to(e.data, 1, {y:400, onUpdate:e.data.updatePosition, onUpdateScope:e.data});

}

或者以类似的方式定义外部更新函数。问题仍然保持不变，所以有一种简单的方法可以更简单地做到这一点。 GS tween 是否有任何机制可以自动执行此过程？

感谢大家的关注:)

Answer 1

setPosition 中的this 指的是该函数，而不是 onClick 事件的this。

您需要将this 传递给setPosition。如下例所示，我在 setPosition 函数中将其作为self 传递。

function menuBtnOver(e){
  var b = e.data;
  b.setPosition(this, b.x, b.y+5);

}

function menuBtnOut(e){
  var b = e.data;
  b.setPosition(this, b.x, b.y-5);

} 和：

setPosition:function(self, x, y) {
    if(!x) x = 0;
    if(!y) y = 0;
    self.element.css("left", x);
    self.element.css("top", y);
}

this 总是引用被调用的函数。你可以读到她。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

所以你可以在函数中将this 作为变量传递。