进度条摆动效果

Question

摆动的垂直进度条

---

我在This Question 中学习了如何构建一个带有交叉条的整洁、动态大小的垂直进度条。

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

---

柱的摆动功能应该：

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

我正在寻找最简单的答案。请解释一下你是怎么做到的，以便我们JS新手学习技巧！向最佳答案发布 +50 的赏金。

---

---

奖金：

• 根据条的真实高度更改条的背景颜色值。红色为 0%，黄色为 50%，绿色为 100%；

如果您的函数也这样做，我会在您的答案中添加 +100 赏金。

---

Template Fiddle

---

My Progress

我问这个问题是因为我还不知道该怎么做。 但是，我将尝试从我目前所学到的知识中，并保持我的 此处发布进度。

Answer 1

所以这是我的JSFiddle 承担。

评论应该是不言自明的。我必须为带有缓动的动画效果添加 JQuery UI。我不确定您所说的 random 是什么意思，但您只需要更改速度即可。

抱歉，截图中没有动画。

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 动画制作一些 elemantary wobble，但对它的控制要求和颜色更改要求使我们选择 Javascript。
• 结合了两个摆动效果，一个简单的y=sin(t) 和一个更复杂的阻尼波。也可以轻松添加其他波浪，但这些似乎是最有趣的波浪。
• 关于计算颜色的代码。我只是将条形图分成两半，上半部分定义了从绿色到橙色的颜色范围，下半部分定义了从橙色到红色的颜色范围。接下来在代码中，我根据条形的填充程度在这两种颜色之间“找到点”。 （例如，如果我们填充了整个条形的 80%，这意味着我们处于上半部分的 60%，因此我们将这一点置于橙色和绿色之间）

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