我已经花了很长时间尝试构建一个程序，该程序采用三 Angular 形多边形元素并按顺时针方向无限旋转它。我现在面临的问题是 rangeError:超出了最大调用堆栈，并且我不知道如何以更实用的方式对此进行编码。这是我的代码，其中包含注释。
var _poly = document.getElementById('pol'); //triangular polygon element
var y1 = 0; // y coordinates for each point of _poly.
var y2 = 375;
var y3 = 375;
var xPTS = [];
/*the following for loop pushes corresponding x coordinates
for each y coordinate into this variable.*/
for (var i = 0; i < _poly.animatedPoints.length; i++) {
xPTS.push(_poly.animatedPoints[i].x);
}
/*The purpose of the following return function `xVar` is to assign the
appropriate value for x to each of their respective y coordinates. Each x
variable will switch from one return function to the other as they cross
each verticle halves of the svg element.*/
var xVar = function(x, y) {
if (x >= 250 && y !== 500) {
return () => {
return (Math.sqrt(62500 - Math.pow(y - 250, 2)) + 250).toString() + ",";
};
} else {
return () => {
return (250 - Math.sqrt(62500 - Math.pow(y - 250, 2))).toString() + ",";
};
}
};
/*variables `x1`, `x2`, and `x3` are assigned to appropriate values as per
the y argument in function `xVar`.*/
for (var i = 0; i < 3; i++) {
window["x" + (i + 1).toString()] = xVar(xPTS[i], window["y" + (i + 1).toString()]);
}
/*`coordF` when constantly invoked in `tFunc` is meant to constantly update
and keep track of the polygon element's x,y coordinates.*/
var coordF = function() {
coords = [_poly.animatedPoints[0].x.toString() + "," +
_poly.animatedPoints[0].y.toString() + " ",
_poly.animatedPoints[1].x.toString() + "," +
_poly.animatedPoints[1].y.toString() + " ",
_poly.animatedPoints[2].x.toString() + "," +
_poly.animatedPoints[2].y.toString()
];
}
coordF(); //invoked so coords is accessible.
//main function
var tFunc = function(x, y, c) {
/*`ticks` is assigned on the condition evaluated for verifying which
verticle half a point of the polygon is located.*/
ticks = (x >= 250 && y !== 500) ? function(_x, _y) {
/*note: this is
where the error incurs*/
/*each point is meant to travel x2 as fast as from ranges 0-125 and 375-500 down and up the y-axis when each y coordinate is in the following range: 125-375 so as for the polygon to remain an equilateral triangle.*/
if (_y >= 125 && _y <= 375) {
_y += 2;
return _x() + _y.toString();
} else {
_y += 1;
return _x() + _y.toString();
}
} : function(_x, _y) {
if (_y >= 125 && _y <= 375) {
_y -= 2;
return _x() + _y.toString();
} else {
_y -= 1;
return _x() + y.toString();
}
};
tick_tocks = setInterval(function() {
/*`coords` is constantly updated so as to utilize each item of `coords` as an argument for c so `_poly`'s `points` attribute can constantly be assigned the value to render the triangular polygon element equilateral as it spins.*/
coordF();
//`c` argument is evaluated to verify which item of the `coords` array is passed.
switch (c) {
/*As each y coordinate changes via `ticks` function, each x coordinate changes correspondingly*/
case c[0]:
_poly.setAttribute("points", ticks(x1, y1) + " " + c[1] + c[2]);
break;
case c[1]:
_poly.setAttribute("points", c[0] + ticks(x2, y2) + " " + c[2]);
break;
case c[2]:
_poly.setAttribute("points", c[0] + c[1] + ticks(x3, y3));
}
}, 100);
//alternate functions are assigned when the following boolean expression is true.
if (y === 0 || y === 500) {
clearInterval(tick_tocks);
//x variables are assigned to alternate functions defined in `xVar`.
for (var i = 0; i < 3; i++) {
window["x" + (i + 1).toString()] =
xVar(xPTS[i], window["y" + (i + 1).toString()]);
}
/*`tFunc` is invoked 3 times with 3 different sets of arguments. `x` is the x coordinate, `y` is the y coordinate, and `c` is an item of the `coords` array.*/
for (var i = 0; i < 3; i++) {
tFunc(window["x" + (i + 1).toString()], window["y" + (i + 1).toString()], coords[i]);
}
}
};
/*`tFunc` is invoked 3 times with 3 different sets of arguments. `x` is the x coordinate, `y` is the y coordinate, and `c` is an item of the `coords` array.*/
for (var i = 0; i < 3; i++) {
tFunc(window["x" + (i + 1).toString()], window["y" + (i + 1).toString()], coords[i]);
}<svg width=500 height=500 style="border:1px solid black;display:block;margin:auto;">
<polygon id="pol" stroke="black" stroke-width=3 fill="green" points="250,0 466.50635094610965,375 33.49364905389035,375"/>
</svg>我对 js 的了解仍然很平庸，但希望我能得到任何关于为什么我在控制台中的 ticks 处收到 rangeError 通知的答案，以及如何修改上述内容代码来完成将三 Angular 形无限旋转的任务，和/或完成此任务的更实用的方法。
最佳答案
如果您需要非 js 解决方案，那么您可以尝试通过 css3 transform 属性以及使用 animation、@keyframe 等来旋转它:
#triangle{
animation: polyRotation 8s linear infinite;
}
@keyframes polyRotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<svg id="triangle" width=500 height=500 style="border:1px solid black;display:block;margin:auto;">
<polygon id="pol" stroke="black" stroke-width=3 fill="green" points="250,0 466.50635094610965,375 33.49364905389035,375"/>
</svg>关于javascript - 如何在javascript中旋转三 Angular 形动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52511292/