62. Польза от .drawingGroup() и .compositingGroup()
Oleg991Покажу какими полезным в рабочем проекте для меня оказались модификаторы drawingGroup
и compositingGroup
, доступные с iOS 13.
Примеры из документации
На момент публикации статьи вот они:
Мой пример
Сделаем экран с двумя кнопками:
- Первая имеет только лейбл, который меняется при перемещении по экрану
- Вторая в дополнение к лейблу имеет тень
Задача: при нажатии на любую кнопку перемещать обе вьюхи по экрану с анимацией, и чтобы тень для второй кнопки применялась только к кругу вокруг лейбла.
Начальный код
struct DrawingAndCompositingGroupExample: View { @State private var didTap = false var body: some View { movingExample } private var movingExample: some View { VStack(spacing: 50) { if didTap { Spacer() } demoTextButton demoTextInCircleButton if !didTap { Spacer() } } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(.black) } private var demoTextButton: some View { Button(action: performMoveAction) { makeMovingTextView(title: "top") } } private var demoTextInCircleButton: some View { Button(action: performMoveAction) { ZStack { Circle() .fill(.black) .frame(width: 200, height: 200) makeMovingTextView(title: "bot") } } .buttonStyle(DemoButtonStyleWithShadow(didTap: didTap)) } private func performMoveAction() { withAnimation(.linear(duration: 1)) { didTap.toggle() } } private func makeMovingTextView(title: String) -> some View { Text(didTap ? "TRUE (\(title))" : "FALSE (\(title))") .font(.title.bold()) } }
Без модификаторов:
- верхняя кнопка не ездит, а просто исчезает и появляется
- тени у нижней кнопки применяются к внешнему кругу и внутреннему тексту
Добавим два модификатора
private var demoTextButton: some View { Button(action: performMoveAction) { makeMovingTextView(title: "top") .drawingGroup() // <- первый тут } } private var demoTextInCircleButton: some View { Button(action: performMoveAction) { ZStack { Circle() .fill(.black) .frame(width: 200, height: 200) makeMovingTextView(title: "bot") } .compositingGroup() // <- второй тут } .buttonStyle(DemoButtonStyleWithShadow(didTap: didTap)) }
С модификаторами:
- верхней кнопке добавили
drawingGroup
, и она начала красиво ездить - нижней кнопке добавили
compositingGroup
, и тень применяется только к внешнему кругу
Заключение
drawingGroup
и compositingGroup
могут очень выручить, когда нужна работа с тенями/анимациями 🙂
В интернете есть и другие классные примеры работы с этими модификаторами.
Код для этой статьи можно посмотреть тут, а другие статьи - тут.