Site icon AppTractor

Изучаем эффекты рисования и градиентного рендеринга в SF Symbols

AppTractor

Седьмая версия SF Symbols, встроенной коллекции иконок от Apple, была представлена ​​на WWDC 2025. Благодаря улучшениям, возможности SF Symbols значительно расширились, появились новые API, а само приложение SF Symbols получило возможность создавать анимацию для иконок. Оставим последнее в стороне и рассмотрим наиболее интересные нововведения, которые можно использовать в наших приложениях.

Примечание: Более подробное руководство по SF Symbols можно найти здесь.

Анимация с помощью эффектов drawOn и drawOff

Начиная с iOS 26, доступны два новых эффекта для символов: DrawOn и DrawOff. Оба анимируют появление и исчезновение символа соответственно, при этом разница между ними заключается в использовании определенных данных для отрисовки, эти данные также можно задать в приложении SF Symbols для кастомных иконок, но в этом посте мы на этом не остановимся.

Чтобы увидеть, как это работает, начнём со следующего представления изображения, которое отображает простую иконку:

var image: some View {
    Image(systemName: “checkmark”)
        .resizable()
        .scaledToFit()
        .frame(width: 80, height: 80)
        .foregroundStyle(.tint)
    }
}

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

Мы применяем два новых эффекта отрисовки, используя модификатор symbolEffect(_:isActive:) следующим образом:

image
    .symbolEffect(.drawOn, isActive: isHidden)

Аргумент isHidden — это свойство состояния, которое определяет, активен ли эффект:

@State private var isHidden = true

Значение isHidden изначально равно true, и это активирует эффект drawOn. В этом состоянии символ изначально не отображается на экране, но при изменении значения значок появляется с анимацией отрисовки. Последующие изменения переключают анимацию между состояниями drawn-on и drawn-off.

Чтобы завершить пример, добавим кнопку, которая переключает свойство isHidden, и в итоге получим такой пример:

struct ContentView: View {
    @State private var isHidden = true
    
    var body: some View {
        VStack(spacing: 40) {
            image
                .symbolEffect(.drawOn, isActive: isHidden)
            
            
            Button(“Animate”) {
                isHidden.toggle()
            }
            .buttonStyle(.borderedProminent)
            .padding(.top, 80)
        }
    }
    
    
    var image: some View {
        Image(systemName: “checkmark”)
            .resizable()
            .scaledToFit()
            .frame(width: 80, height: 80)
            .foregroundStyle(.tint)
    }
}

Результатом действия эффекта drawOn является следующее:

https://apptractor.ru/wp-content/uploads/2026/03/1-2.mp4?_=1

После того, как эффект drawOn запустит анимацию появления символа, следующее изменение значения isHidden заставит SwiftUI воспроизвести противоположную анимацию, которая будет выглядеть как анимация drawOff, даже если мы явно её не применяли.

Вы можете поэкспериментировать и изменить эффект символа на drawOff, установив значение isHidden изначально в false:

@State private var isHidden = false
 
…
 
image
    .symbolEffect(.drawOff, isActive: isHidden)

Теперь анимация прямо противоположная: значок появляется по умолчанию и исчезает при нажатии кнопки с эффектом drawOff. При следующем нажатии SwiftUI воспроизводит обратную анимацию, и символ снова появляется.

https://apptractor.ru/wp-content/uploads/2026/03/2-1.mp4?_=2

Варианты анимации отрисовки

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

image
    .symbolEffect(.drawOn.wholeSymbol, isActive: isHidden)
 
 
image
    .symbolEffect(.drawOn.byLayer, isActive: isHidden)
 
 
image
    .symbolEffect(.drawOn.individually, isActive: isHidden)

Чтобы увидеть результат всего этого, мы будем использовать иконку с несколькими слоями (например, «wifi»):

var image: some View {
    Image(systemName: “wifi”)
        // … view modifiers …
    }
}
https://apptractor.ru/wp-content/uploads/2026/03/3-1.mp4?_=3

Обратите внимание, что описанные выше варианты отрисовки дают одинаковый эффект, когда значки имеют один слой.

Режим градиентной отрисовки

Наряду с новыми эффектами отрисовки символов, SF Symbols 7 теперь поддерживает градиент как новый режим цветовой отрисовки для значков. До сих пор мы могли окрашивать символы, но только однотонным цветом. Теперь мы можем отрисовывать их с градиентом заданного цвета, используя модификатор symbolColorRenderingMode(_:) с аргументом .gradient:

heartImage
    .symbolColorRenderingMode(.gradient)

Для примера, heartImage — это следующее:

var heartImage: some View {
    Image(systemName: “heart.fill”)
        .resizable()
        .scaledToFit()
        .frame(width: 140, height: 140)
        .foregroundStyle(.pink)
    }
}

Разницу между режимом градиентной и плоской цветовой гаммы легко заметить, если расположить два значка рядом:

heartImage
    .symbolColorRenderingMode(.gradient)
 
heartImage

Вот как они выглядят:

Заключение

Мы все используем SF Symbols в наших приложениях, чтобы отображать знакомые пользователям иконки. Теперь мы можем сделать их внешний вид еще более привлекательным, либо применив эффект отрисовки, либо просто используя градиентный оттенок. Я бы порекомендовал загрузить и изучить приложение SF Symbols для macOS, если вы еще этого не сделали. Это отличный инструмент, который наглядно демонстрирует возможности системных значков. Надеюсь, эта статья была вам полезна. Спасибо за чтение!

Источник

Exit mobile version