如何在JavaScript中旋转三角形动画？

Question

我花了很长时间尝试构建一个程序，该程序需要一个三角形多边形元素并无限地顺时针旋转它。 我现在面临的问题是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通知，以及如何修改上面的代码来完成将三角形放在上面的任务完成这项任务的无限旋转，或更实用的方式。

Answer 1

如果您需要非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>