Правильная анимация простого графика c в PIXI. js - PullRequest
Новая
       28

Правильная анимация простого графика c в PIXI. js

0 голосов
/ 22 апреля 2020

У меня есть график c в PIXI, и я хотел бы просто развернуть его влево с помощью плавного перехода. Изучая официальные документы, я действительно не нашел каких-либо лучших практик или того, что делать здесь.

Мой код в настоящее время выглядит так 

var bar = new PIXI.Graphics();
bar.beginFill(color);
bar.lineStyle(1, 0x000000, 10);
bar.drawRect(
  my_x,
  my_y * line,
  bar_width,
  bar_height
);

и правильно отображает гистограмму в окончательной форме. , Теперь мой вопрос заключается в том, как медленно увеличить его с 0.

Я пытался дать бару новую позицию с помощью bar.length = final_pos, но она мгновенно меняется.

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

Пожалуйста, проверьте мой ответ на аналогичный вопрос об анимации примитивов / фигур в Pixi. js: { ссылка }. Там я показал, как анимировать многоугольник (drawPolygon метод) - но аналогично вы можете сделать это с помощью прямоугольника (drawRect).

Основная идея заключается в том, чтобы выполнять следующую итерацию «main l *» 1026 * ":

  1. Создание фигуры с требуемыми параметрами (положение, положение вершин, размер, цвет и т. Д. c).
  2. Добавьте эту фигуру на сцену (прямо на сцену или к некоторому контейнеру, находящемуся в стадии).
  3. Визуализация этапа.
  4. Удалите эту форму со сцены (или из контейнера - если он был добавлен в другой контейнер).
    • это также должно позволить сборщику мусора очистить этот объект из памяти - чтобы память не заполнилась через некоторое время после запуска l oop.
  5. Измените некоторые параметры, поэтому на следующей итерации он будет немного отличаться в точке 1.
0 голосов
/ 29 апреля 2020

Благодаря @ domis86 и @PAEz я попытался реализовать это и немного уточнить в следующем коде. Я использовал маску, но она также должна работать с настройкой ширины напрямую. 

var mask_width = 0;
var loading_bar = setInterval(function () {
  if (mask_width < bar_width) {
    var this_mask = new PIXI.Graphics();
    this_mask.beginFill(0xff3300);
    this_mask.drawRect(my_x, my_y * line, bar_width, bar_height);
    this_mask.endFill();
    bar.mask = this_mask;
    mask_width += 1;
  } else {
    bar.mask = null;
    clearInterval(loading_bar);
  }
}, 10);

Этот код применяет новую маску с немного увеличенным покрытием каждые 10 мс, пока она не достигнет полной ширины.

...