关键词：
【中文标题】进度条摆动效果【英文标题】：Progress Bar Wobble Effect 【发布时间】：2014-04-19 01:33:37 【问题描述】：摆动的垂直进度条
我在This Question 中学习了如何构建一个带有交叉条的整洁、动态大小的垂直进度条。
现在，我想让它变得有趣！
柱的摆动功能应该：
取4个参数：element，height，speed，&random
使用可自定义的随机因子调整 element 的高度百分比
跟踪元素的真实高度，可以随时更改！
使用事件（在 Fiddle 中，我提供输入和按钮）将真实高度设置为新值，并为该高度设置动画。
我正在寻找最简单的答案。请解释一下你是怎么做到的，以便我们JS新手学习技巧！向最佳答案发布 +50 的赏金。
奖金：
根据条的真实高度更改条的背景颜色值。红色为 0%，黄色为 50%，绿色为 100%；如果您的函数也这样做，我会在您的答案中添加 +100 赏金。
Template Fiddle
My Progress
我问这个问题是因为我还不知道该怎么做。 但是，我将尝试从我目前所学到的知识中，并保持我的 此处发布进度。
【问题讨论】：
那么...您希望堆栈摆动吗？你的意思是当它跳跃时它会产生反弹效果然后稳定下来，然后如果它再次改变它会做同样的事情？ 酒吧。传递给函数的任何元素都应该摆动。摆动的性质取决于你。目的是让酒吧看起来有趣和充满活力。 @jsve 我认为这可以通过最简单的方式实现，方法是制作渐变的透明分层 png。条是透明的。然后在它后面有一个 div，并使用 jquery animate 为高度设置动画，并使用 jquery ui animate 设置颜色：完成时的反弹效果。如果我有更多的时间，我会为你做，但我没有。感谢下面的人花时间并做出了巨大的努力。全方位 +1。 【参考方案1】：所以这是我的JSFiddle 承担。
评论应该是不言自明的。我必须为带有缓动的动画效果添加 JQuery UI。我不确定您所说的 random 是什么意思，但您只需要更改速度即可。
抱歉，截图中没有动画。
【讨论】：
这个动画很健壮。好的。你能展示一个经常摇摆不定的版本吗？ 始终如一……永无止境？尝试检查 SO: How to make a jQuery infinite animation 并将其集成到代码中。在这种情况下，它所做的只是在 jQuery.ready 中添加setInterval( updateAttendance, 700 );
这可能不会在一致的基础上改变水平（this 也不会被定义），所以你可能想要创建另一个函数来改变$('.level') 的高度有点让你看到动画。 JSFiddle Updated【参考方案2】：
真的很喜欢玩这个，所以谢谢 :) 我采用了不同的方法，但代码少得多。我觉得我的颜色有点过火了，如果需要我可以把它改回红黄绿。
http://jsfiddle.net/3wN77/23/
$('#change-height').on('click', function()
var element = $('.attendance-level');
var height = parseInt( $('#true-height').val() ); // %
var speed = 1000; //ms
var random = 50; //px
bar_wobble( element, height, speed, random );
);
function bar_wobble(element, height, speed, random)
//set the color
$(element).css('-webkit-filter','hue-rotate('+ 140*(250/height) +'deg)'); //red = 0 deg, green = 140deg
//wibbly wobbly timey wimey stuff
height = height/100*250;
var number_of_wobbles = 3;
for(var i=1; i<=number_of_wobbles; i++)
$(element).animate( height: (height + random/i )+'px', speed/(number_of_wobbles*2 + 1));
$(element).animate( height: (height - random/i )+'px', speed/(number_of_wobbles*2 + 1));
console.log( i: i, random_i: random/i, random:random, height:height );
$(element).animate( height: height+'px', speed/(number_of_wobbles*2 + 1));
【讨论】：
谢谢！你的答案是最短、最简单的答案之一，但我认为你犯了一个错误。色调旋转是一种更改颜色的简单方法，但它还不能跨浏览器兼容，如果不按照该解决方案的方式遍历整个光谱，我将无法在此处的两种颜色之间进行更改。不过，在简单性方面做得很好。 这是我在这个线程上看到的最好的解决方案。 +1 只为努力！【参考方案3】：不要认为 *** 是针对这类“问题”的，但是哦，好吧，感觉就是这样，所以比理智的人做出的回答要广泛得多。
让我从我整合的一些技术及其理由开始说起
SVG，当用DOM来塑造图像时感觉非常不对劲。要么应该使用实际图像作为背景/前景，要么应该使用 SVG 之类的东西而不是 DOM。 SVG 的缺点是只能提供统一的缩放。X-Tags，X-tags 是 Mozilla 开发的一个 Web Components Custom Element polyfill。它允许我们写类似的东西
<x-bar id="test"></x-bar>
然后做
var xbar1 = document.getElementById("test");
xbar1.value = 10;
xbar1.speed = 2;
xbar1.wobble = 10;
xbar1.effect= "dampen";
很酷吧？然而，这意味着您首先需要阅读文档here。在您能够理解代码之前。
用于动画的 Javascript：虽然您可以使用 CSS3 动画制作一些 elemantary wobble，但对它的控制要求和颜色更改要求使我们选择 Javascript。 结合了两个摆动效果，一个简单的y=sin(t) 和一个更复杂的阻尼波。也可以轻松添加其他波浪，但这些似乎是最有趣的波浪。
关于计算颜色的代码。我只是将条形图分成两半，上半部分定义了从绿色到橙色的颜色范围，下半部分定义了从橙色到红色的颜色范围。接下来在代码中，我根据条形的填充程度在这两种颜色之间“找到点”。 （例如，如果我们填充了整个条形的 80%，这意味着我们处于上半部分的 60%，因此我们将这一点置于橙色和绿色之间）
由于代码本身超过 200 行，我将避免在此处发布，您可以在 this jsfiddle 上找到它。
【讨论】：
现在，先生，这很漂亮。在我看来，SVG 总是像网页设计中一些奇怪的补偿部分。现在，多亏了你，我要去学习它。结果的平滑度和变化很好。我现在也在阅读有关 X-tags 的信息。 在这种情况下使用 SVG 是否比使用 DOM 更高效？ 另外，当我对此进行修改时，我注意到两个高度值之间的转换是一个锯齿状的强制过程。在 LaughDonor 实现此效果的方法中，输入新值会导致平滑过渡到新高度。我将如何在您的脚本中解决这个问题？ 抱歉回复晚了。嗯，对我来说，这主要是一个清洁问题。 DOM 是关于结构化数据的，css 是关于呈现数据的，svg 是用于*动态的）矢量图像，gif、jpg 和 png 是用于位图图像。所以我看看你的侧边栏，它绝对是一张图片，因为它必须是动态的，所以我决定选择 svg。那么效率更高吗？在这种情况下，效率可能大致相同，但是一旦您需要多边形等，这是唯一的方法。 不，你是对的，我没有在状态转换中编程，因为它与自定义的“摆动”公式结合使用非常复杂。您可以在 jsfiddle.net/q2SAK/9 看到搞砸非结构化解决方案是多么容易，但无论哪种方式，让我概述一下您将如何解决此类问题css静态进度条效果
今天学习到了实现一个静态进度条的方法，固写一篇笔记稳固一下自己的知识。最终的效果如下，进度条放在一个框里，水平宽自适应。现在就开始，首先写一个进度条先。.progress-bar{/*进度条的槽*/width:47%;/*设置进度条的高度*/h... 查看详情
纯css实现进度条效果
...城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 一个完整的进度条效果其实可以拆分一下： 一段背景； 一小段的静态的斜纹进度条； 斜纹进度条用线性渐变 linear-gr... 查看详情
粒子效果进度条
在线演示本地下载 查看详情
进度条控件cprogressctrl实现进度滚动效果
...CProgressCtrl控件的基本操作网上有很多资料，可我想实现进度条中进度滚动效果，即很多时候程序出现的等待或启动画面，如下图： 实现这个效果的函数为SetMarquee(_In_BOOLfMarqueeMode,_In_intnInterval)，第一个参数为开关，第二个参... 查看详情
模仿进度条效果(代码片段)
进度条效果 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>#progresswidth:400px;height:30px;border:1pxsolidblack; 查看详情
shell脚本实现转圈、进度条等效果
参考技术A开始shell光标闪烁通过符号#填充[]完成进度每个阶段有不同颜色区分进度按照百分比显示进度printf%3d为显示百分比预留了3位，循环条件i每次递增5主要是为了减少进度条显示的长度。i每次递增5，取模之后的index值还是... 查看详情
js实现进度条效果
源代码：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <styletype="text/css"> *{ margin:0pxauto; } #wk{ width:800px; h 查看详情
例题进度条效果点击图片滑动效果。(代码片段)
进度条效果<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-eq 查看详情
androidprogressbar横向进度条动画效果
这篇文章主要为大家展示了“Android如何实现横向进度条演示效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Android如何实现横向进度条演示效果”这篇文章吧。1.效果... 查看详情
vue项目实战61添加页面加载进度条效果(代码片段)
...数据报表的开发，本篇我们学习如何为项目添加加载进度条的效果。一、进度条效果我们要实现的效果就是，当我们点击每一个菜单，加载相应的页面时，在页面顶部中间会有一个加载的蓝色条条，随着页面... 查看详情
自定义view实现钟摆效果进度条pendulumview
...个IOS组件PendulumView，实现了钟摆的动画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。废话不多说，先上效果图底部黑边是录制时不小心录上的，可以忽略。... 查看详情
自定义view实现钟摆效果进度条pendulumview
...个IOS组件PendulumView，实现了钟摆的动画效果。由于原生的进度条确实是不好看，所以想可以自定义View实现这样的效果，以后也可以用于加载页面的进度条。 废话不多说，先上效果图 底部黑边是录制时不小心录上的，可... 查看详情
android从无到有打造一个炫酷的进度条效果
从无到有打造一个炫酷的进度条效果 查看详情
用htmlcssjs制作圆形进度条（无动画效果）
...然后我们再用一个比底圆小的圆去覆盖这个大圆就可以出进度条效果了 代码：<style> /*支持IE9及以上*/ &nb 查看详情
关于vb.net进度条的实例
我想编一个进度条程序,让它每0.5秒进度增加1%,并用文本显示当前的进度,该如何实现?这是我自己写的一个进度条控件，如图：边框粗细和边框颜色以及进度条颜色都可以调。进度条大小你可以自己拉伸。同时，进度条还提供了丰... 查看详情
使用定时器实现进度条效果
<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <style> body{ margin:0; padding:0; } header{ width:1000px; top:50px; 查看详情
jqueryajax进度条效果
如题：我在执行一个ajax请求的时候，如果实现带进度条的那种效果，beforeSend这个属性没反应啊，求教！！！！其实这种效果在实际应用中并不是太实用，如果你需要有一个进度的话，这必然前台与后台要实时交互才会出效果。... 查看详情
java中如何实现进度条效果
...cfinalintHEIGHT=Toolkit.getDefaultToolkit().getScreenSize().height;//定义进度条组件publicJProgressBarprogressbar;//定义标签组件publicJLabellabel;//构造函数publicDemo( 查看详情