Как реализовать анимацию раскрытия элемента в модалку?

Question

[Александр]

Хочу реализовать анимацию плавной трансформации элемента в модальное окно. Элемент, как и модальное окно имеет border-radius. Если банально попробовать через transform, то закругление на углах растянется не так как надо. Если анимировать размер элемента, то анимация не будет рендериться на GPU и на слабых устройствах будет тормозить. Что-то всё никак не могу придумать как бы это обыграть, чтобы и красиво и плавно.

В голову разве что приходит идея разбить элемент на углы и центральную часть. Углы просто переместить, а центральную часть растянуть. Но что делать если элемент не однотонный, а например представляет из себя изображение? Разбивать изображение на части и выполнять нетривиальные трансформации?

В идеале хотелось бы такую же анимацию как и на главной в appstore на ipad'е.

Пример конечных точек анимации прилагаю на скриншотах:

Answer 1

[Сергей delphinpro]

Основная фишка — элемент не трансформируется в реальную модалку.
Сначала вычисляется положение элемента и модалки.
Далее анимация элемента (положение, размеры)
И на месте элемента отображается модалка.
Для большей плавности можно добавить фэйд эффектов. Отобразить модалку сжатую на месте элемента прозрачную. Потом синхронно с элементом анимировать до реального положения. Во время анимации прозрачность модалки увеличивается, прозрачность элемента уменьшается.