我在鼠标事件上调用了两个函数:
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 是否有任何机制可以自动执行此过程?
感谢大家的关注:)
最佳答案
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
作为变量传递给函数。
关于javascript - GreenSock,补间函数参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32316255/