进度条摆动效果

Posted 2023-05-08

【中文标题】进度条摆动效果

【英文标题】：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 看到搞砸非结构化解决方案是多么容易，但无论哪种方式，让我概述一下您将如何解决此类问题