将一组对象传递给greensocks的bezier导致错误

时间:2018-04-26 20:12:49

标签: javascript

我想将一个先前定义的x / y坐标数组传递给greensock bezier插件,如下所示:

var ball = document.querySelector('#ball')

var startCircle = document.querySelector('#startPoint')
var controlCircle = document.querySelector('#controlPoint')
var endCircle = document.querySelector('#endPoint')

var startPoint = { x: 100, y: 100 }
var controlPoint = { x: 50, y: 200 }
var endPoint = { x: 200, y: 200 }

TweenMax.set(ball, startPoint)
TweenMax.set(startCircle, startPoint)
TweenMax.set(endCircle, endPoint)
TweenMax.set(controlCircle, controlPoint)

TweenMax.to(ball, 1, {
  repeat: -1,
  bezier: {
    type: "quadratic",
    values: [
      startPoint,
      controlPoint,
      endPoint
    ]
  } 
})

我收到此错误

TypeError: undefined has no properties[Learn More]
TypeError: undefined has no properties[Learn More]
invalid css tween value: [object Object]
TypeError: this._beziers[d] is undefined[Learn More]

如果我将values对象中的bezier更改为文字,(例如values: [{x: 1, y: 2}, {x: 3, y: 4}]代码可以正常工作。 有人知道为什么吗?您还可以检查代码集上的代码:https://codepen.io/heine/pen/aGmXee?editors=1010

编辑好的我找到了答案。 TweenMax.set显然改变了对象。因此,当我在传递给TweenMax.set之前复制那些startPoint,controlPoint,endPoint对象时,代码可以工作。

1 个答案:

答案 0 :(得分:1)

我检查了你的codepen,当我控制台登录你的一个对象时:

--dependency

我明白了:

TweenMax.set(endCircle, endPoint)
TweenMax.set(controlCircle, controlPoint)

console.log(startPoint);

/*TweenMax.to(ball, 1, {
  repeat: -1,

可能是您的{css:{x:100,y:100}} 方法正在改变对象。这可以解释为什么传递文字有效。