Site icon AppTractor

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

AppTractor

Смешивание двух изображений в 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.

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

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

В заключение можно сказать, что анимированние изображения — это мощный инструмент для создания динамичных и интерактивных пользовательских интерфейсов в 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. Ключевые моменты включают:

Этот пример иллюстрирует практическое применение 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, код отображает изображение изменяемого размера, фиксированной шириной и высотой в 200 точек и чередует цвет между фиолетовым и серым в анимированном цикле.

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

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

Источник

Exit mobile version