Поваренная книга SwiftUI: изображения и иконки — Часть 4

Смешивание двух изображений в SwiftUI

Смешивание двух изображений в SwiftUI — отличный способ создать интригующую композицию.

Для смешивания двух изображений используется модификатор blendMode, предоставляемый SwiftUI. Этот модификатор принимает в качестве параметра перечисление BlendMode, указывающее на то, как изображения должны быть объединены.

Вот пример, в котором фотография палатки на восходе солнца сочетается с наложением волнистого узора:

struct ContentView: View {
  var body: some View {
    ZStack {
      Image("SunriseTent")
        .resizable()
        .scaledToFill()
        .edgesIgnoringSafeArea(.all)

      Image("WavyPattern")
        .resizable()
        .scaledToFill()
        .blendMode(.multiply)
        .opacity(0.7)
    }
  }
}

Предварительный просмотр должен выглядеть следующим образом:

Используйте режим blendMode для объединения изображений в SwiftUI.

В этом примере базовым изображением является SunriseTent, а накладываемым — WavyPattern. Режим наложения установлен на .multiply, а непрозрачность наложенного изображения установлена на 0.7, чтобы базовое изображение оставалось видимым.

Выбор режима наложения (multiply, screen, overlay, darken, lighten и так далее) зависит от конкретного эффекта, которого вы хотите добиться. Поэкспериментируйте с различными режимами наложения и значениями непрозрачности, чтобы понять, что лучше всего подходит для ваших конкретных изображений.

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

В заключение следует отметить, что смешивание двух изображений в SwiftUI — это мощный способ добавить динамические визуальные эффекты в ваше приложение. Используя модификатор blendMode, вы можете легко смешивать и компоновать изображения различными способами. Попробуйте и поэкспериментируйте с различными режимами наложения и комбинациями изображений, чтобы создать что-то действительно уникальное!

Использование анимированных изображений в SwiftUI

Анимация оживляет любое статичное изображение и делает пользовательский интерфейс более интересным и интерактивным. SwiftUI позволяет легко анимировать изображения с помощью представления Image и его встроенных функций анимации.

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

Например, вы можете анимировать изображение, масштабируя его сверху вниз, применив модификатор scaleEffect в ответ на изменение переменной состояния в блоке withAnimation, как показано ниже:

struct ContentView: View {
  @State private var isAnimating = false
  
  var body: some View {
    Image("HelloHedgy")
      .resizable()
      .scaledToFit()
      .scaleEffect(isAnimating ? 1.5 : 1.0)
      .onAppear() {
        withAnimation(.easeInOut(duration: 1.0).repeatForever(autoreverses: true)) {
          isAnimating = true
        }
      }
  }
}

Предварительный просмотр:

Вы можете легко анимировать изображения в SwiftUI.

Вот как работает этот код:

• @State private var isAnimating = false объявляет переменную состояния под названием isAnimating и инициализирует значением false. @State — это свойство-обертка, предоставляемое SwiftUI, которое позволяет нам создавать изменяемое состояние для наших представлений.
• Image(«HelloHedgy») объявляет представление Image с именем изображения HelloHedgy. Это загружает изображение из каталога ассетов приложения.
• .resizable() изменяет размер изображения, чтобы его можно было масштабировать до разных размеров.
• .scaledToFit() изменяет масштаб изображения так, чтобы оно помещалось в родительский вид, сохраняя соотношение сторон.
• .scaleEffect(isAnimating ? 1.5 : 1.0) изменяет масштаб изображения, увеличивая его в 1.5 раза, если isAnimating истинно, и до исходного размера (1.0), если isAnimating ложно.
• .onAppear() объявляет действие, которое будет выполняться при появлении изображения на экране.
• withAnimation(Animation.easeInOut(duration: 1.0).repeatForever(autoreverses: true)) указывает, что любые изменения внутри замыкания должны быть анимированы с помощью «ease-in-out» анимации в течение 1.0 секунды, повторяющейся до бесконечности и меняющейся каждый раз на обратную.
• isAnimating = true устанавливает значение isAnimating в true. Поскольку эта функция находится внутри замыкания withAnimation, изменение isAnimating с false на true вызовет анимацию, что, в свою очередь, применит эффект масштабирования изображения.

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

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

Использование PhotosPicker

SwiftUI предоставляет мощный инструмент для просмотра и выбора изображений и видео из фотобиблиотеки — представление PhotosPicker. Этот компонент легко вписывается в ваше приложение для iOS и предлагает возможность как одиночного, так и множественного выбора. Давайте посмотрим, как использовать PhotosPicker при создании приложения с фотографиями. Приложение будет выбирать изображения из библиотеки устройства и представлять их в виде сетки.

Для начала импортируйте необходимые фреймворки: SwiftUI и PhotosUI.

import SwiftUI
import PhotosUI

Затем создайте ContentView:

struct ContentView: View {
  @State private var selectedItems = [PhotosPickerItem]()
  @State private var images = [UUID: Image]()

  var body: some View {
    ZStack {
      ScrollView {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 100))]) {
          ForEach(Array(images.keys), id: \.self) { key in
            images[key]!
              .resizable()
              .scaledToFill()
              .frame(width: 100, height: 100)
              .clipped()
          }
        }
      }

      VStack {
        Spacer()
        PhotosPicker(selection: $selectedItems, matching: .images) {
          Text("Select Images")
        }
        .task(id: selectedItems, {
          await loadImages(from: selectedItems)
        })
        Spacer()
      }
    }
  }

  private func loadImages(from items: [PhotosPickerItem]) async {
    for item in items {
      do {
        let image = try await item.loadTransferable(type: Image.self)
        if let image = image {
          images[UUID()] = image
        }
      } catch {
        print("Failed to load image: \(error)")
      }
    }
  }
}

После нажатия кнопки Select Images предварительный просмотр должен выглядеть следующим образом:

Используйте PhotosPicker, чтобы позволить пользователю выбирать фотографии или видео.

В этом примере показан эффективный способ создания интерактивного фотопикера с помощью SwiftUI. Ключевые моменты включают:

• ZStack, на котором располагаются слои ScrollView для отображения изображений и PhotosPicker для выбора изображений.
• LazyVGrid внутри ScrollView представляет выбранные изображения в виде гибкой сетки.
• Модификатор task в сочетании с синтаксисом async/await в Swift обеспечивает элегантное решение для асинхронной загрузки изображений при изменении selectedItems.
• Функция loadImages(from:) помечена как async и использует блок do-catch для обработки возможных ошибок при загрузке изображений, что делает обработку ошибок более чистой и явной.

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

Создание целостных дизайнов в SwiftUI

При разработке приложения SwiftUI вам может потребоваться обеспечить согласованный внешний вид и восприятие различных представлений и элементов пользовательского интерфейса. Одним из распространенных элементов, который может нарушить эту согласованность, является изображение или иконка, выделяющиеся своим цветом. К счастью, SwiftUI предлагает элегантное решение этой проблемы: режим рендеринга template.

Модификатор представления renderingMode в SwiftUI определяет, как изображение должно отображаться в ваших представлениях. Существует два режима рендеринга: original и template. Оригинальный сохраняет исходный цвет изображения, а шаблонный отбрасывает информацию о цвете и рисует только форму изображения. Цвет шаблонного изображения определяется tint цветом в его окружении.

Давайте рассмотрим пример. Предположим, вы создали пользовательский значок, цвет которого должен меняться в зависимости от того, выбран ли он. Для этого можно использовать режим рендеринга .template.

import SwiftUI

struct ContentView: View {
  @State private var isSelected = false

  var body: some View {
    Button(action: {
      isSelected.toggle()
    }) {
      Image("TransparentHedgy")
        .renderingMode(.template)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200, height: 200)
        .foregroundColor(isSelected ? .brown : .gray)
    }
  }
}

Предварительный просмотр должен выглядеть следующим образом:

Используйте режим шаблонного рендеринга для изменения цветов на кастомных изображениях в SwiftUI.

В этом коде вы определяете кнопку, которая отображает ваше пользовательское изображение. Свойство состояния isSelected определяет цвет изображения: коричневый, если оно выбрано, и серый в противном случае. Волшебство происходит с помощью .renderingMode(.template), который указывает SwiftUI рассматривать изображение как силуэт и применять цвет, заданный с помощью foregroundColor.

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

Использование режима шаблонного рендеринга с анимацией

Анимация — это еще один интересный способ использования режима шаблонного рендеринга. Используя режим .template, вы можете анимировать цвет изображения с течением времени, создавая интересные эффекты.

В следующем примере вы используете анимацию для изменения цвета пользовательского изображения от пурпурного до серого:

struct ContentView: View {
  @State private var changeColor = false

  var body: some View {
    Image("TransparentHedgy")
      .renderingMode(.template)
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: 200, height: 200)
      .foregroundColor(changeColor ? .purple : .gray)
      .onAppear {
        withAnimation(.easeInOut(duration: 2).repeatForever(autoreverses: true)) {
          changeColor.toggle()
        }
      }
  }
}

Вот ваш предварительный просмотр:

Режим рендеринга шаблона также хорошо работает с анимацией в SwiftUI.

Вот что делает этот код:

• @State private var changeColor = false объявляет свойство changeColor как обертку свойства @State. Обертка @State позволяет представлению иметь изменяемое состояние. Изначально свойство changeColor имеет значение false.
• Image(«TransparentHedgy») отображает изображение в представлении. Предполагается, что в каталоге активов вашего проекта есть изображение с именем TransparentHedgy.
• .renderingMode(.template) устанавливает режим рендеринга изображения на .template. Этот режим позволяет изменять цвет изображения с помощью модификатора foregroundColor.
• .resizable() делает изображение изменяемым по размеру, позволяя ему увеличиваться или уменьшаться в зависимости от заданной рамки.
• .aspectRatio(contentMode: .fit) устанавливает соотношение сторон изображения и гарантирует, что оно поместится в доступное пространство. Режим содержимого .fit сохраняет соотношение сторон изображения, вписывая его в рамку, не обрезая и не искажая его.
• .frame(width: 200, height: 200) задает размер рамки изображения. В этом примере изображению заданы ширина и высота 200 точек.
• .foregroundColor(changeColor ? .purple : .gray) устанавливает цвет изображения. Когда значение changeColor равно true, цвет изображения устанавливается в .purple, а когда changeColor равно false, цвет устанавливается в .gray. Свойство changeColor переключается в следующем блоке onAppear.
• .onAppear { } выполняет замыкание при появлении представления на экране.
• withAnimation(.easeInOut(duration: 2).repeatForever(autoreverses: true)) оборачивает настройки анимации для замыкания. Она задает анимацию продолжительностью 2 секунды и автореверсом.
• changeColor.toggle() переключает значение changeColor туда и обратно. Когда представление появляется, замыкание выполняет анимированный цикл, заставляя changeColor чередоваться между true и false. Это переключение changeColor вызывает изменение цвета изображения, анимируя его от фиолетового в серый.

Комбинируя эти модификаторы и свойство @State, код отображает изображение изменяемого размера, фиксированной шириной и высотой в 200 точек и чередует цвет между фиолетовым и серым в анимированном цикле.

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

← Предыдущая статья: Изображения и иконки — Часть 3

Источник