进度条摆动效果

Question

摆动垂直进度条

---

我学会了如何在本课题中使用交叉条构建一个整洁,动态大小的垂直进度条.

现在,我想让它变得有趣!

---

酒吧的摆动功能应该:

• 取4个参数:element,height,speed,和random
• element使用可定制的随机因子摆动高度百分比
• 跟踪元素的真实高度,随时可以改变!
• 使用一个事件(在小提琴中,我提供一个输入和按钮)将真实高度设置为一个新值,并设置为该高度的动画.

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

---

---

奖金:

• 根据条形的真实高度更改条形图的背景颜色值.红色为0%,黄色为50%,绿色为100%;

如果你的功能也这样做,我会在你的答案中加上+100 Bounty.

---

模板小提琴

---

我的进步

我问这个问题因为我还不知道怎么做.但是,我将从目前为止所学到的内容中尝试一下,并在此处发布我的进度.

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";
  

  好吧？但这意味着您首先需要阅读此处的文档.在您能够理解代码之前.

• 用于动画的Javascript:尽管你可以使用CSS3动画制作一些电子摆动,但是对它的控制和颜色变化要求的要求使得人们可以选择Javascript.
• 结合了两种摆动效果,一种简单y=sin(t)且更复杂的阻尼波.人们可以很容易地添加其他波浪,但这些似乎是最合理有趣的波浪.
• 关于计算颜色的代码.我只是把酒吧分成两半,上半部分我定义了从绿色到橙色的颜色范围,下半部分从橙色到红色.接下来在代码中我会找到这两种颜色之间的点',这取决于条的填充程度.(例如,如果我们在总栏中填充了80%,则意味着我们处于上半部分的60%,所以我们将这一点在橙色和绿色之间)

由于代码本身超过200行,我将避免在此处发布它,你可以在这个jsfiddle上找到它.