При добавлении визуальных элементов в SwiftUI-приложение SF-символы всегда были надежным выбором для соответствия рекомендациям Apple по созданию пользовательских интерфейсов в отношении иконок. В SF Symbols 7 и iOS 26 Apple представляет анимацию рисования — новую функцию, которая оживляет иконки.
В отличие от традиционной анимации с плавным изменением масштаба, плавным изменением направления движения или эффектом подпрыгивания, анимация рисования имитирует естественный процесс рисования символа пером, создавая более привлекательные и выразительные пользовательские интерфейсы. В результате получается более выразительный и продуманный эффект, который ощущается как созданный вручную, динамичный и реалистичный.
SF-символы строятся с использованием нескольких слоёв, определяющих различные части символа. Понимание этой структуры крайне важно, поскольку анимация рисования может по-разному воздействовать на эти слои.
На этом изображении показаны 2 слоя символа text.page.fill.
При реализации анимации рисования существует три различных подхода: весь символ, послойный и индивидуальный.
.wholeSymbol: все слои анимируются одновременно, создавая единый эффект рисования, при котором весь символ как будто прорисован одновременно.
.byLayer: анимация слоёв происходит с разной скоростью (это поведение по умолчанию). Каждый слой начинает прорисовываться немного позже предыдущего, создавая глубину.
.individally: слои анимируются последовательно, ожидая завершения каждого слоя, прежде чем начать следующий — это создаёт максимально продуманный, пошаговый эффект рисования.
Реализация анимации рисования в SwiftUI
Анимация рисования в SwiftUI реализуется с помощью модификатора symbolEffect(_:options:isActive:).
Типы эффектов
Основные типы эффектов — drawOn и drawOff:
// Draw On: animates the symbol appearing
Image(systemName: "checkmark.circle")
.symbolEffect(.drawOn, isActive: isComplete)
// Draw Off: animates the symbol disappearing
Image(systemName: "checkmark.circle")
.symbolEffect(.drawOff, isActive: isHidden)
Параметры анимации
Управление слоями определяет, как будут анимированы слои символа:
// Default staggered animation
Image(systemName: "square.and.arrow.up")
.symbolEffect(.drawOn.byLayer, isActive: showSquare)
// All layers at once
Image(systemName: "square.and.arrow.up")
.symbolEffect(.drawOn.wholeSymbol, isActive: showSquare)
// Sequential layer animation
Image(systemName: "square.and.arrow.up")
.symbolEffect(.drawOn.individually, isActive: showSquare)
Возможности модификатора
Вы можете настроить поведение анимации с помощью дополнительных параметров, например:
// Non-repeating animation (runs once) .symbolEffect(.drawOn, options: .nonRepeating, isActive: showSquare) // Faster animation speed .symbolEffect(.drawOn, options: .speed(2.0), isActive: showSquare) // Repeating animation .symbolEffect(.drawOn, options: .repeat(.continuous), isActive: showSquare)
Параметр isActive
Параметр isActive определяет, когда анимация должна быть активна, и требует управления состоянием. В примере ниже, когда значение isDrawing равно true, анимация запускается:
struct ContentView: View {
// Controls animation state
@State private var isDrawing = false
var body: some View {
Image(systemName: "signature")
.symbolEffect(.drawOn, isActive: isDrawing)
Button("Draw") {
// Activates and deactivates the animation
isDrawing.toggle()
}
}
}
Вот и всё! Сочетание symbolEffect(_:options:isActive:) с правильным управлением состоянием позволит вам раскрыть весь потенциал анимации отрисовки в SF Symbols 7. Независимо от того, выберете ли вы послойную анимацию, индивидуальную или всего символа, ваши пользователи увидят рисованную анимацию, которая оживит ваш интерфейс.