Question

摆动垂直进度条

我学习了如何使用This Question中的横条构建一个整洁，动态调整大小的垂直进度条。

现在，我想让它变得有趣！

酒吧的摆动功能应该：

取4个参数：element，height，speed，＆amp; random
使用可自定义的随机因素摆动element身高百分比
跟踪元素的真实高度，可以随时改变！
使用事件（在小提琴中，我提供输入和按钮）将真实高度设置为新值，并设置为该高度的动画。

我正在寻找最简单的答案。请解释一下你是如何做到的，这样我们JS新手就可以学习技巧！在最佳答案上发布+50的赏金。

enter image description here

加成：

根据条形的真实高度更改条形图的背景颜色值。红色为0％，黄色为50％，绿色为100％;

如果您的功能也是如此，我会在您的答案中添加+100 Bounty。

Template Fiddle

My Progress

我问这个问题因为我还不知道怎么做。但是，我将从我迄今学到的东西中尝试一下，并保留我的进展在这里。

Answer 1

所以这是我的JSFiddle接受它。

评论应该是自我解释的。我不得不通过缓动为动画效果添加JQuery UI。我不确定random你的意思，但速度应该是你需要改变的全部。

WobbleBar 抱歉，屏幕截图中没有动画。

Answer 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));
}

Answer 3

不要认为StackOverflow是针对这些问题的，但是哦，感觉就像这样，所以做出了比理智的人更广泛的答案。

让我先介绍一下我所采用的几种技术及其理由

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动画制作一些电子摆动，但是对它的控制和颜色变化要求的要求使人们可以选择Javascript。
包含两个摆动效果，一个简单的y=sin(t)和一个更复杂的减震波。人们也可以很容易地添加其他波浪，但这些似乎是最合理有趣的波浪。
关于计算颜色的代码。我只是把酒吧分成两半，上半部分我定义了从绿色到橙色的颜色范围，下半部分从橙色到红色。接下来在代码I＆＃39;找到要点＆＃39;这两种颜色之间取决于酒吧的填充程度。（例如，如果我们按总栏数的80％填充，则表示我们处于上半部分的60％，因此我们将这一点置于橙色和绿色之间）

由于代码本身超过200行，我将不在此处发布，您可以在this jsfiddle找到它。

进度条摆动效果

3 个答案: