Что такое phyllotaxis или как повторить анимацию в Wallet и Lo | iOS Dev

Что такое phyllotaxis или как повторить анимацию в Wallet и Lock Screen в iOS 16
Оговорюсь, я как и прежде не использую Swift UI в проде, и наверняка код можно сделать чище

С выходом новой iOS многие обратили внимание на крутую анимацию при переходе на заблокированный экран и обратно. Philip Davis в твиттере дополнил, что по факту используемая фигура очень похожа на phyllotaxis (филлотаксис по-русски). Так что же это за зверь такой?

Время нового факта

Филлотаксис — одна из природных загадок, известная со времён Леонардо да Винчи. Название с древнегреческого — «расположение листьев».

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

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

Спасибо математикам за псевдокод:

n = caseIndex
base_angle = pi*(1+sqrt(5))
r = sqrt(n)
theta = n*base_angle
x = r*cos(theta)
y = r*sin(theta)

Для упрощения терминологии: n это индекс семечка (у нас это просто кружок, baseAngle некий стартовый угол, r - радиус, x и y — позиции, на которые мы должны поместить наше семечко).

Что ж, попробуем повторить природное явление с помощью Swift!

Создадим GeometryReader, proxy.size будет размером поля. xCenter и yCenter - координаты центра, от которых я отталкивался.

Радиус можно рассчитать по следующей формуле let radius:Double = maxWidth * sqrt(Double(i)). maxWidth это ширина семечка (тех, что ближе к краю поля).

Заполяем поле с помощью CircleInside в зависимости от максимального количества "семечек" внутри поля.

И небольшой эффект анимации: scaleEffect и rotationEffect по тапу.

В итоге получится то, что вы видите на гифке.

Свой код я залил на Github, можете изменять его так, как захотите.

@iOS Dev — решаю загадки Да Винчи на Swift.