Эффект взрыва в полосе прогресса

Взводная вертикальная панель выполнения

Я узнал, как построить аккуратный вертикальный индикатор прогресса с динамическим размером с поперечными барами в Этот вопрос.

Теперь я хочу сделать это весело!

Функция качания бара должна:

возьмите 4 параметра: element, height, speed и random
разброс процентной доли element с настраиваемым рандомизированным фактором
отслеживать высоту элементов, которая может измениться в любое время!
используйте событие (в Fiddle, я поставлю вход и кнопку), чтобы установить истинную высоту на новое значение и оживить ее.

Я ищу простейший ответ. Пожалуйста, объясните, как вы это сделали, чтобы мы, новички JS, могли научиться трюкам! Проводка Bounty +50 для лучшего ответа.

Bonus:

измените значение цвета фона баров на основе истинной высоты бара. Красный - 0%, желтый - 50%, а зеленый - 100%;

Если ваша функция сделает это тоже, я добавлю вместо этого + 100 Bounty.

Template Fiddle

Мой прогресс

Я задаю этот вопрос, потому что я не знаю, как это сделать. Но я собираюсь попробовать это из того, что я узнал до сих пор, и сохранить мои прогресс, опубликованный здесь.

Ответ 1

Итак, здесь JSFiddle.

Комментарии должны быть самоочевидными. Мне пришлось добавить JQuery UI для анимационных эффектов с ослаблением. Я не уверен, что вы имели в виду под random, но скорость должна быть все, что вам нужно изменить.

Извините, на снимках нет анимации.

Ответ 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));
}

Ответ 3

Не думайте, что StackOverflow предназначен для таких "вопросов", но, ну, он чувствовал себя так, поэтому сделал гораздо более широкий ответ, чем здравомыслящий человек.

Позвольте мне начать с нескольких технологий, которые я включил, и их обоснования

SVG, это ужасно неправильно, когда DOM используется для формирования изображения. Либо фактические изображения должны использоваться для фона/переднего плана, или нужно использовать что-то вроде SVG вместо DOM. Недостатком SVG является то, что он может обеспечить только равномерное масштабирование.
X-теги, X-теги - это пользовательский элемент веб-компонентов polyfill, разработанный Mozilla. Это позволяет нам написать что-то вроде
```
<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.