62. Польза от .drawingGroup() и .compositingGroup()

Покажу какими полезным в рабочем проекте для меня оказались модификаторы drawingGroup и compositingGroup, доступные с iOS 13.

Примеры из документации

На момент публикации статьи вот они:

Мой пример

Сделаем экран с двумя кнопками:

1. Первая имеет только лейбл, который меняется при перемещении по экрану
2. Вторая в дополнение к лейблу имеет тень

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

Начальный код

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 могут очень выручить, когда нужна работа с тенями/анимациями 🙂

В интернете есть и другие классные примеры работы с этими модификаторами.

Код для этой статьи можно посмотреть тут, а другие статьи - тут.