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

Question

Я не знал, как это выразить, так что потерпите меня: p

Вот скриншот идеи, которую я хочу реализовать, но я не уверен, как лучше подойти к ней или описать ее,

Я могу сделать это либо в React Native, либо в нативной iOS, поэтому идеи в любой области будут великолепны.

Идея состоит в том, что, когда в комнате только один человек, ваше видео будет немного больше, и когда люди присоединятся, они будут правильно масштабироваться для телефона и размещаться в веселой раскладке (не обязательнокак показано на рисунке, идея в том, что они масштабируются, чтобы занять максимально возможное пространство в зависимости от размера устройства и количества людей в комнате)

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

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

Answer 1

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

.6-user-layout {
    height: 60px;
    width: 60px;
}
.4-user-layout {...}
.2-user-layout {...}

В качестве базового стиля ^ просто динамически меняйте классы:

const sizingClass = \`${userCount}-user-layout\`;

return (
    <YourVideo classNames={sizingClass} />
);

Если вы не ищете действительно специфические методы, это простой способ сделать это с React независимо от браузера илиMobile:)

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