Делаем анимацию отрисовки для SF Symbols в SwiftUI

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

Источник