进度条小飞机移动动画

今天下午吃完饭就坐在电脑旁整一个进度条的动画效果，整这个效果自己也是醉了，虽然各方面都考虑到了，但是还会有点误差，因为进度条经过一个点的时候，前面半径发生变化，还要考虑到小飞机的长度问题，不能停留在圆点上，必须考虑一定的范围，刚开始没考虑圆点的直径问题，误差很大，后来把直径问题也考虑到了，但是还会有小误差，设计的点直径大小在飞机经过前后发生了变化。

首页需要根据程序输出的数，总数、小飞机要执行的动画距离及两个要设置的点，算出它们各自所占的百分比，根据总长度，算出各自的值，然后定位；
在动画执行前需要用算出小飞机执行的长度，跟两个固定的点做比较，当执行动画长度大于某个点的left减去直径和飞机长度且小于这个点left值时候，取个固定的值，让飞机在点的左边；当到最后一个点和前一个点的时候，不再考虑直径问题，只考虑飞机长度；
html代码：

<div class="proStepBox"><div class="proStep"><div id="proHasDot" class="stepProgress" style="width: 240px;"><i></i><p>发布商品 <span>40</span> 条<br>同行排名：365</p></div><div class="stepDot  stepPass" style="left: 180px;"><span class="proSDot"><em class="dotN  dotY">30</em></span><div class="stepTip">提升获取询盘机会2倍<i></i></div></div><div class="stepDot " style="left: 480px;"><span class="proSDot"><em class="dotN">80</em></span><div class="stepTip"><i></i>提升获取询盘机会2倍</div></div><div class="stepDot perAlldot"><em class="dotN ">100</em></div></div></div>

主要实现js代码如果下：

 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 =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');$(this).find('i').css('display','none');}}
},"slow")});

虽然功能实现了，但是还需要考虑一定的误差，当第一个点离原点的距离小于小飞机的宽度和，两个点之间的距离小于飞机宽度的时候，就会出现各种问题

进度条小飞机移动动画相关推荐

超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
IOS贝塞尔曲线圆形进度条和加载动画
做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加.其中主要用到贝塞尔曲线.UIBezierPath是对CGContextRef的进一步 ...
Android 下载进度条，自定义加载进度条，loading动画
1.自定义loadingline动画 /*** 作者:created by meixi* 邮箱:13164716840@163.com* 日期:2018/9/6 10*/public class Lo ...
ios弧形进度条_IOS贝塞尔曲线圆形进度条和加载动画-阿里云开发者社区
做项目让做一个加载动画,一个圈圈在转中间加一个图片,网上有好多demo,这里我也自己写了一个,中间的图片可加可不加.其中主要用到贝塞尔曲线.UIBezierPath是对CGContextRef的进一步 ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
python之Rich库使用入门(打印彩色字体，表单，进度条与状态动画，高级数据类型)
文章目录前言一.Rich是什么? 二.安装与导入Rich 1.Rich安装 2.导入rich库(快速使用打印功能) 三.Console类的使用 1.官方推荐的构造与导入方式 2.Console的构 ...
自定义圆形进度条 100% ，动画，拖延进入
.CircleProgressBar public class CircleProgressBar extends View {private Context context;private int ...
进度条制作-CSS动画
温馨提示代码参考 [本人博客]:https://blog.csdn.net/qq_41115965/article/details/83713343 代码修改不同于使用 GIF 图片,使用 CSS ...
Silverlight进度条控件动画源代码
效果: 代码: 1 <UserControl x:Class="ShineDraw.Controls.LoadingAnimation" 2 xmlns=& ...

进度条小飞机移动动画

进度条小飞机移动动画相关推荐

最新文章

热门文章