Разработка
Поваренная книга 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) } } }
Предварительный просмотр должен выглядеть следующим образом:
В этом примере базовым изображением является 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 } } } }
Предварительный просмотр:
Вот как работает этот код:
@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 предварительный просмотр должен выглядеть следующим образом:
В этом примере показан эффективный способ создания интерактивного фотопикера с помощью 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) } } }
Предварительный просмотр должен выглядеть следующим образом:
В этом коде вы определяете кнопку, которая отображает ваше пользовательское изображение. Свойство состояния 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() } } } }
Вот ваш предварительный просмотр:
Вот что делает этот код:
@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