javascript - 将对象数组传递给greensocks的贝塞尔曲线导致错误
问题描述
我想将一组先前定义的 x/y 坐标传递给 greensock 贝塞尔插件,如下所示:
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}]
代码一样。有人知道为什么吗?您还可以在 codepen 上查看代码:https ://codepen.io/heine/pen/aGmXee?editors=1010
编辑好吧,我找到了答案。TweenMax.set 显然改变了对象。因此,当我在传递给 TweenMax.set 之前复制这些 startPoint、controlPoint、endPoint 对象时,代码可以正常工作。
解决方案
我检查了你的代码笔,当我控制台记录你的一个对象时:
TweenMax.set(endCircle, endPoint)
TweenMax.set(controlCircle, controlPoint)
console.log(startPoint);
/*TweenMax.to(ball, 1, {
repeat: -1,
我明白了:
{css:{x:100,y:100}}
可能是您的tweenmax.set
方法正在改变对象。这可以解释为什么传递文字有效。
推荐阅读
- python - 在 python 中使用 @functools.lru_decorator 实现 LRU 缓存
- r - 如何在 Shiny 中使用 DataTable Extensions 更改下载文件中的名称?
- node.js - 带有 Express 和 EJS 的 Node.js 因 pkg 构建而失败
- java - 在传递 char 而不是 int 后,我得到了奇怪的循环行为
- c - 如何将一个枚举中的国家名称映射到另一个单独枚举中的时区
- reactjs - 我可以在反应中使用数组作为 useEffect() 的依赖吗?
- reactjs - 如何打开 Netlify 预览?
- python - 使用 ansible 运行 python 脚本
- css - Material-UI popover动态定位
- python - Kubernetes spark-submit on ADLS Gen2 错误:找不到类 org.apache.hadoop.fs.azurebfs.SecureAzureBlobFileSystem