Анимация чисел в SwiftUI с помощью contentTransition

Сегодня мы поговорим об анимации цифр в SwiftUI.

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

Я не говорю, что система дизайна — это источник зла, потому что при масштабном мышлении нет другой альтернативы — иметь общий UI/UX для всего приложения. Наличие дизайн-системы в средней/большой компании для мобильной разработки обязательно, иначе приложение будет выглядеть как Франкенштейн. Одна команда может решить, что акцентный цвет — светло-оранжевый, другая — темно-оранжевый, все кнопки не будут выглядеть одинаково, и в итоге пользователи будут в замешательстве.

Однако даже при наличии дизайн-системы вы, как iOS-разработчик, можете и должны предлагать визуальные улучшения, особенно если их легко реализовать. Если вы можете сделать работу с приложением лучше и это легко, почему бы не попробовать? Вы, как специалист в своем деле, должны знать, что лучше всего делать и как можно улучшить работу приложения, даже если это не предусмотрено или противоречит текущей системе дизайна.

Как реализовать анимацию чисел в SwiftUI

У вас есть текстовая метка, число в котором меняется при выполнении некоторых условий. Вы хотите анимировать это изменение, и оно должно быть очень плавным.

Прежде всего, давайте покажем, чего мы хотим добиться:

Обратите внимание, что анимация чисел дает ощущение обратного отсчета. Это не случайность, мы будем использовать API, созданный для анимации обратного отсчета, который можно использовать для любой анимации чисел.

Сегодня мы будем использовать действительно интересный API SwiftUI под названием contentTransition. Модификатор contentTransition(_:) в SwiftUI используется для применения пользовательских переходов к содержимому представления. Используя этот модификатор, мы можем указать, как содержимое представления появляется или исчезает при изменении его состояния. Это особенно полезно для создания динамичных и визуально привлекательных пользовательских интерфейсов, в которых элементы плавно переходят из одного состояния в другое.

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

Реализация

Чтобы добиться вышеописанной анимации, нам нужно выполнить три шага:

1. Добавить переменную, которая будет изменяться при наступлении события.
2. Анимировать изменение.
3. Добавить модификатор перехода содержимого к представлению, отображающему переменную.

Посмотрите на приведенный ниже код и убедитесь, насколько он прост.

import SwiftUI

struct ContentView: View {
    
    @State var randomNumber = 0
    
    var body: some View {
        VStack {
             Text("Your Number")
                 .font(.largeTitle)
                 .bold()
             
            Text("\(randomNumber)")
                .contentTransition(.numericText())
                .font(.largeTitle)
            
             Button {
                 newRandomNumber()
             } label: {
                 Text("New Random Number")
             }.buttonStyle(.borderedProminent)
         }
    }
    
    private func newRandomNumber() {
        withAnimation {
            randomNumber = Int.random(in: 0...100)
        }
    }
}

В приведенном выше коде я выделил все шаги, необходимые для создания анимации, но давайте пройдемся по ним по порядку.

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

Последний шаг — добавление .contentTransition(.numericText()) к отображаемому текстовому ярлыку. Это то, что говорит фреймворку SwiftUI красиво анимировать числа. Если вы не добавите это, SwiftUI будет просто анимировать в стиле «исчезает — появляется» (fade out – fade in).

На этом мы закончили!

Заключение

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

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

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

Источник