Progress bar airplane movement animation and progress bar airplane Animation

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.