Знакомство с новым GeometryEffect

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

Двигаясь дальше, в WWDC 2020 на SwiftUI 2.0 произошло многое. Я не мог не увидеть ряд новых модификаторов представления, которые выглядели так, как будто они были предназначены для новых ноутбуков iOS, которые появятся в 2021 году, хотя не все из них. В частности, мое внимание привлекла одна: matchedGeometryEffects.

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

Что именно делает matchedGeometry? Можете ли вы заметить разницу с двумя видео ниже?

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

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

На втором гифке я реализую тот же код с согласованной геометрией. Это впечатляет.

Как видите, в данном случае разница кардинальная, разница совсем не тонкая. Сопоставление геометрии также может быть выполнено на нескольких видах вместе с разными привязками, как показано здесь.

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

Этот код представляет собой пример анимации, которая не работает с видами геометрии!

Это код для примера, который вы видите в первых двух показанных анимированных гифках.

Вот сетка из девяти квадратов:

И это код увеличения изображения с четырьмя кругами:

И, наконец, это код, стоящий за представлениями с двойным текстом и изображениями с элементами географического соответствия:

Продолжайте кодировать, сохраняйте спокойствие.