javascript - 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);
    }

元素属性是一个 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]});
}

但是当我翻身并(在任何时候)滚出时它只在拳头按钮上起作用，它直接移动到给定位置(没有补间)然后补间永远永远给我错误(至少 - 我不能'得到任何错误或任何其他尝试)。

Uncaught TypeError: Cannot read property 'css' of undefined

在: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 作为变量传递给函数。