Как анимировать страницу, например, используя «камеру» на двухмерной плоскости, особенно панорамирование и масштабирование? - PullRequest
0 голосов
/ 15 октября 2018

У меня есть задание, в котором мне нужно создать сетку прямоугольников 3х3, где человек может щелкнуть один из этих прямоугольников, и страница увеличит масштаб этого прямоугольника, так что теперь он заполняет экран.
I 'Мы получили это, работая в Angular 6, просто используя их систему анимации и выполняя transform: scale(3) и translateX / translateY, в зависимости от того, какой из прямоугольников был нажат.Так что никаких проблем нет.(см. рисунок ниже)

GIF of what already works

Однако мне также необходимо создать 2 или 3 прямоугольника, которые отображаются перед показом сетки.Поэтому, когда пользователь заходит на страницу, он сначала видит 1 прямоугольник, заполняющий экран, нажимает «далее», а затем видит сетку.

По сути, я хочу иметь вид «сверху вниз»моей DOM, возможность масштабировать один из прямоугольников или уменьшить масштаб и увидеть сетку.

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

Итак, каков наилучший способ создать целую связку прямоугольников и иметь возможность увеличивать масштаб?и перемещаться между ними?Большое спасибо заранее!

Пожалуйста, если вам нужна дополнительная информация, оставьте комментарий:)

...