Создание звуковых панелей с помощью jQuery и CSS

0

Я пытаюсь создать анимированные звуковые панели, используя jquery (js скрипка здесь: http://jsfiddle.net/rhK4n/)

HTML

<div class="eq">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

CSS

.bar {
    background-color: green;
    width:15px;
    height:40px;
    display: inline-block;
    vertical-align: bottom;
}

JQuery

function fluctuate(bar) {
    var hgt = Math.random() * 10;
    hgt += 1;
    var t = hgt * 30;

    bar.animate({
        height: hgt
    }, t, function() {
        fluctuate($(this));
    });
}

$(".bar").each(function(i) {
    fluctuate($(this));
});

Я хочу, чтобы саунд-бары были высотой 40 пикселей.

Однако этот метод сжимает их до c.15px, и поэтому базовый уровень перемещается вверх и вниз, я хочу, чтобы он был исправлен.

Я не могу понять, почему эта ошибка происходит.

  • 0
    Мне кажется CSS3 анимация поможет в этой ситуации
  • 0
    Я использую jQuery для совместимости с XB
Теги:

3 ответа

0
Лучший ответ

Чтобы остановить базовый уровень от перемещения вверх и вниз, вам нужно сделать некоторые вещи с помощью CSS. Может быть несколько возможных решений, вот один.

http://jsfiddle.net/rhK4n/6/

В основном CSS всегда работает из верхней строки и базовой линии. Но, используя абсолютное позиционирование, вы можете " .eq панели в нижней части .eq div. Затем вам нужно разделить бары отдельно, но я думаю, что это даст вам результаты ближе к тому, что вы хотите.

Поделиться
0

Почему не высокая производительность css только звуковая анимация :)

Пожалуйста, проверьте это перо и sass css:

$bars-number: 40; // this must reflect markup changes in html too
$bar-color: blue;

.animate-bars {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  overflow: hidden;
  background-color: lighten($bar-color, 45%);

  div {
    flex: 1 0 auto;
    height: 100%;
    margin: 0 -2px;
    background-color: $bar-color;
    animation: animate-bar 300ms linear infinite alternate;
    transform-origin: bottom;
    opacity: 0;

    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }

    @for $i from 1 to $bars-number + 1 {
      &:nth-child(#{$i}) {
        animation-duration: (350 + random(450)) + ms;
        animation-delay: random(500) + ms;
      }
    }
  }
}

@keyframes animate-bar {
  0% {
    transform: scaleY(0);
    opacity: .8;
  }
  100% {
    transform: scaleY(100%);
    opacity: .4;
  }
}
Поделиться
0

В исходном коде вы возвращаете высоту, которая является целым числом в диапазоне [0,1), а затем добавляет 1 к значению. Затем вы масштабируете значение на 30. Вы должны возвращать случайное целое число между диапазоном [0,40) следующим образом:

var amplitude = Math.floor(Math.random() * 40) + 1;

Таким образом, ваш код может выглядеть так:

function fluctuate(bar) {
    var height = Math.floor(Math.random() * 40) + 1;
    //Animate the equalizer bar repeatedly
    bar.animate({
        height: height
    }, function() {
        fluctuate($(this));
    });
}

$(".bar").each(function(i) {
    fluctuate($(this));
});

Или, если вам нужны значения с плавающей запятой, используйте:

var height = (Math.random() * (40.000)).toFixed(4)

EDIT: Здесь работает jsFiddle, который показывает, как вы можете справиться с базовой проблемой: http://jsfiddle.net/3mhJJ/. Это решение не требует, чтобы вы отдельно располагали каждую панель эквалайзера.

Поделиться
  • 0
    Интересно, вот скрипка: jsfiddle.net/rhK4n/2 Проблема в соответствии с комментарием @ Роберта; базовая линия движется вверх и вниз.
  • 0
    Да, но я думал, что этот побочный эффект выходит за рамки вопроса.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню