Progress bar airplane movement animation and progress bar airplane Animation

Progress bar airplane movement animation and progress bar airplane Animation

After dinner this afternoon, I sat down next to my computer and made an animation of the progress bar. I was drunk as well. Although I have considered it in all aspects, it would be a bit different, because the front radius changes when the progress bar goes through a point, the length of the plane must be taken into account and cannot stay on the dot. A certain range must be considered, at the beginning, the dot diameter problem was not considered. The error was very large. Later, the diameter problem was also taken into account, but there was still a small error. The designed point diameter was changed before and after the plane passed.

On the home page, you need to calculate the percentages of each of the program outputs, the total number, the animation distance to be executed by the plane, and the two points to be set, and calculate their respective values based on the total length, then locate;
Before executing the animation, You need to calculate the length of the plane, and compare it with two fixed points, when the animation length is greater than the left of a certain point minus the diameter and aircraft length and less than the left value of this point, take a fixed value so that the plane is on the left of the point; when we reach the last vertex and the previous vertex, we will not consider the diameter problem, but only the aircraft length;
The main implementation of js Code is as follows:

Var proStepBox = $ ('div. proStepBox '), proStep = $ ('. prostep', proStepBox), allW = proStep. width (), proHasDot = $ ('# proHasDot'), perAlldot = $ ('div. perAlldot '), perAllNum = parseInt (perAlldot. text (), perCur = parseInt (proHasDot. find ('span '). text ()/perAllNum, layL = allW * perCur, dot = $ ('div. stepDot '). not ('div. stepDot: last '); dot. each (function () {var _ this = $ (this), perc1 = parseInt (_ this. text ()/perAllNum, prodot1L = allW * perc1; _this.css ('left', prodot1L); if (layL >=prodot1L-36-39 & layL <prodot1L) layL = prodot1L-36-39;}); if (layL> = allW-39 & layL <allW) layL = allW-39-10; if (allW = layL) layL = layL-39; $ (function () {proHasDot. animate ({'width': layL}, {step: function (now, fx) {$ (". stepDot "). each (function () {var _ this = $ (this), l returns parseint((this).css ("left "). replace ('px ', ''); if (now> = l) {_ this. addClass ('steppass'); _ this. find ("em "). addClass ('doty ') ;}}, complete: function () {if (layL = allW-39) {// $ (". stepDot: last "). addClass ('steppass'); $ (". stepDot: last "). find ("em "). addClass ('doty '); values (this).find(' I 'demo.css ('display', 'None') ;}}, "slow ")});

Although the function is implemented, some errors still need to be considered. When the distance between the first point and the origin is smaller than the width of the plane and the distance between the two points is smaller than the width of the plane, there will be various problems