Альтернативы для ранжирования анимации - PullRequest
0 голосов
/ 07 января 2019

Это не вопрос относительно «лучших» альтернатив, а более актуальных / поддерживаемых альтернатив.

Я хочу реализовать обновленную живую анимацию рейтинга для системы голосования по списку песен. Сейчас я не большой фронтмен, но несколько человек сделали то, что я искал в прошлом, тот, который в основном делает то, что я хочу, вот этот: Codepen

 <script>
var app;
window.addEventListener('DOMContentLoaded', function () {
  app = new RankingApp('#ranking').start();
});

// {{{ !Demo
var timer1, timer2,
    CHARS = [
      'lorem ipsum'
    ];

function stop() {
  clearInterval(timer1);
  clearInterval(timer2);
}

function rand (min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randElm(array) {
  return array[rand(0, array.length - 1)];
}

function createRandomItem() {
  var i = 0, iz = 0,
      userName = '',
      item = new RankingItem();

  item.userId = rand(1, 0xFFFF);
  for (i = 0, iz = rand(4, 12); i < iz; ++i) {
    userName += randElm(CHARS);
  }
  item.userName = userName;
  item.score = rand(0, 99);
  return item;
}

setTimeout(function () {
  var i = 0, iz = 0;

  for (i = 0, iz = rand(4, 8); i < iz; ++i) {
    app.ranking.insert(
      createRandomItem(),
      rand(1, app.ranking.items.length + 1)
    );
  }
  timer1 = setInterval(function () {
    if (!app.ranking.items.length) { return; }
    app.ranking.move(
      randElm(app.ranking.items),
      rand(1, app.ranking.items.length)
    );
    randElm(app.ranking.items).score = rand(0, 99);
  }, 1009);
  timer2 = setInterval(function () {
    app.ranking.move(
      randElm(app.ranking.items),
      rand(1, app.ranking.items.length)
    ).move(
      randElm(app.ranking.items),
      rand(1, app.ranking.items.length)
    );
    randElm(app.ranking.items).score = rand(0, 99);
    randElm(app.ranking.items).score = rand(0, 99);
    if (app.ranking.items.length <= 1 || app.ranking.items.length <= 99 && rand(0, 1)) {
      app.ranking.insert(
        createRandomItem(),
        rand(1, app.ranking.items.length)
      );
    }
    if (app.ranking.items.length >= 100 ||  app.ranking.items.length >= 2 && rand(0, 1)) {
      app.ranking.remove(randElm(app.ranking.items));
    }
  }, 3001);
}, 500);
// }}} !Demo

Тем не менее, это довольно старый код, и в какой-то момент он начинает глючить. Другие редкие альтернативы, которые я нахожу через поисковые системы, также датированы 2011/2012. Поскольку я надеюсь запустить это приложение еще на несколько лет, я бы предпочел что-то более свежее или обновленное, желательно с более новой версией, например, jQuery.

Я смотрел на диаграммы D3, но ни один из них, похоже, не занимал ранжирование, как в примере выше. Будем весьма благодарны за любые альтернативы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...