Lottie Swift: методы, примеры, установка

Введение в Lottie для Swift

Lottie — это мощная библиотека с открытым исходным кодом, разработанная компанией Airbnb, которая позволяет отображать векторные анимации, созданные в Adobe After Effects, на мобильных и веб-платформах. Анимации экспортируются в формат JSON (с помощью плагина Bodymovin) и воспроизводятся в реальном времени без потери качества.

Для Swift-разработчиков Lottie открывает безграничные возможности: от простых индикаторов загрузки и иконок до сложных полноэкранных анимаций, приветственных экранов и интерактивных элементов интерфейса. В отличие от GIF или видео, Lottie-анимации:

Векторные — масштабируются без потери качества на любых устройствах.
Малый вес — JSON-файлы обычно весят от 1 до 50 КБ.
Интерактивные — можно управлять воспроизведением, скоростью, цветом и прогрессом.
Кроссплатформенные — один и тот же JSON работает на iOS, Android, Web, React Native и Flutter.

Эта статья — полное руководство по использованию Lottie в Swift. Вы узнаете, как установить библиотеку, освоите все ключевые методы, разберёте реальный пример и избежите типичных ошибок.

Установка Lottie

Lottie для Swift устанавливается через Swift Package Manager (SPM) или CocoaPods. Рекомендуемый способ — SPM, так как он встроен в Xcode.

Установка через Swift Package Manager (SPM)

В Xcode откройте проект и выберите File → Add Packages...
Вставьте URL репозитория: https://github.com/airbnb/lottie-ios.git
Выберите версию (рекомендуется последняя стабильная) и нажмите Add Package.
Убедитесь, что пакет добавлен в ваш таргет.

Установка через CocoaPods

Если вы используете CocoaPods, добавьте в Podfile:

pod 'lottie-ios'

Затем выполните:

pod install

Установка через Carthage (устаревший способ)

github "airbnb/lottie-ios"

Выполните carthage update --platform iOS и добавьте фреймворк в проект.

Важно: После установки импортируйте библиотеку в нужный файл:

import Lottie

Быстрый старт с примером кода

Давайте создадим простое приложение, которое воспроизводит Lottie-анимацию на весь экран.

Шаг 1: Подготовьте JSON-файл

Скачайте или создайте Lottie-анимацию. Для теста можно использовать бесплатные анимации с LottieFiles. Поместите JSON-файл (например, animation.json) в папку Assets вашего Xcode-проекта.

Шаг 2: Напишите код

import UIKit
import Lottie

class ViewController: UIViewController {
    
    private var animationView: LottieAnimationView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1. Инициализация анимации из Assets
        animationView = LottieAnimationView(name: "animation")
        
        // 2. Настройка размеров и позиции
        animationView?.frame = view.bounds
        animationView?.contentMode = .scaleAspectFit
        
        // 3. Добавление на экран
        view.addSubview(animationView!)
        
        // 4. Запуск анимации
        animationView?.play { (finished) in
            print("Анимация завершена: \(finished)")
        }
    }
}

Запустите приложение — вы увидите, как анимация воспроизводится один раз. Чтобы сделать её бесконечной, измените вызов play на play(fromProgress: 0, toProgress: 1, loopMode: .loop).

Основные методы и функции Lottie

Ниже приведены 10 ключевых методов Lottie для Swift. Каждый метод сопровождается описанием, параметрами и рабочим примером.

1. `init(name:)` — Инициализация анимации по имени файла

Что делает: Создаёт объект LottieAnimationView из JSON-файла, находящегося в главном бандле приложения (обычно в Assets).

Параметры:

name: String — имя файла без расширения (например, "loader" для loader.json).

Пример:

let animationView = LottieAnimationView(name: "welcome_animation")

2. `init(contentsOf:)` — Инициализация по URL

Что делает: Загружает анимацию из удалённого URL или локального пути. Полезно для динамической загрузки.

Параметры:

contentsOf: URL — URL JSON-файла.

Пример:

let url = URL(string: "https://example.com/animation.json")!
let animationView = try? LottieAnimationView(contentsOf: url)

3. `play(completion:)` — Воспроизведение анимации

Что делает: Запускает воспроизведение анимации с начала до конца. Опционально вызывает замыкание по завершении.

Параметры:

completion: ((Bool) -> Void)? — замыкание, вызываемое после завершения. Параметр Bool указывает, успешно ли завершилась анимация.

Пример:

animationView.play { finished in
    if finished {
        print("Анимация завершена")
    }
}

4. `play(fromProgress:toProgress:loopMode:completion:)` — Воспроизведение с параметрами

Что делает: Воспроизводит анимацию в заданном диапазоне прогресса (от 0.0 до 1.0) с указанным режимом зацикливания.

Параметры:

fromProgress: CGFloat — начальная точка (0.0 — начало, 1.0 — конец).
toProgress: CGFloat — конечная точка.
loopMode: LottieLoopMode — режим повтора (.playOnce, .loop, .autoReverse, .repeat(Int)).
completion: ((Bool) -> Void)? — замыкание завершения.

Пример:

animationView.play(
    fromProgress: 0.2,
    toProgress: 0.8,
    loopMode: .loop,
    completion: nil
)

5. `pause()` — Пауза

Что делает: Приостанавливает воспроизведение анимации на текущем кадре.

Параметры: Нет.

Пример:

animationView.pause()

6. `stop()` — Остановка

Что делает: Полностью останавливает анимацию и возвращает её на первый кадр.

Параметры: Нет.

Пример:

animationView.stop()

7. `currentProgress` — Текущий прогресс

Что делает: Свойство (get/set), которое позволяет получить или установить текущий прогресс анимации (от 0.0 до 1.0).

Тип: CGFloat

Пример:

// Получить текущий прогресс
let progress = animationView.currentProgress

// Установить прогресс на 50%
animationView.currentProgress = 0.5

8. `animationSpeed` — Скорость воспроизведения

Что делает: Свойство (get/set), управляющее скоростью анимации. Значение 1.0 — нормальная скорость, 2.0 — в два раза быстрее, 0.5 — медленнее.

Тип: CGFloat

Пример:

// Ускорить анимацию в 2 раза
animationView.animationSpeed = 2.0

// Замедлить
animationView.animationSpeed = 0.5

9. `setValueProvider(_:keypath:)` — Изменение цвета и свойств

Что делает: Позволяет динамически изменять цвета, прозрачность и другие свойства элементов анимации во время выполнения. Используется с ColorValueProvider.

Параметры:

_ valueProvider: AnyValueProvider — провайдер значения (например, ColorValueProvider).
keypath: AnimationKeypath — путь к элементу анимации (например, "Layer.Shape.Fill 1.Color").

Пример:

let colorProvider = ColorValueProvider(UIColor.red.lottieColorValue)
animationView.setValueProvider(
    colorProvider,
    keypath: AnimationKeypath(keypath: "Shape Layer 1.Ellipse 1.Fill 1.Color")
)

10. `logHierarchyKeypaths()` — Логирование структуры анимации

Что делает: Выводит в консоль полную иерархию элементов анимации с их ключевыми путями. Необходимо для использования setValueProvider.

Параметры: Нет.

Пример:

animationView.logHierarchyKeypaths()
// В консоли появится что-то вроде:
// Shape Layer 1.Ellipse 1.Fill 1.Color
// Shape Layer 1.Ellipse 1.Stroke 1.Color

11. `loopMode` — Режим зацикливания

Что делает: Свойство (get/set), определяющее, как анимация будет повторяться.

Тип: LottieLoopMode

Пример:

animationView.loopMode = .loop  // Бесконечный цикл
animationView.loopMode = .autoReverse  // Вперёд-назад
animationView.loopMode = .repeat(3)  // Повторить 3 раза

12. `isAnimationPlaying` — Проверка воспроизведения

Что делает: Свойство (только для чтения), возвращающее true, если анимация в данный момент воспроизводится.

Тип: Bool

Пример:

if animationView.isAnimationPlaying {
    print("Анимация играет")
} else {
    print("Анимация остановлена")
}

Реальный практический пример использования

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

Код примера


                
    
  Также в библиотеке
  
                
                  
                 Работа с изображениями в Node.js: библиотека Sharp
      
                
                  
                 Мониторинг Go-приложений: библиотеки и инструменты
      
                
                  
                 Работа с YAML в Java: библиотеки SnakeYAML и Jackson
      
                
                  
                 Express.js для JavaScript (Node.js): полное руководство с примерами
      
                
                  
                 Логирование для C++: лучшие решения (spdlog, glog, P7)

Lottie для Swift: полное руководство с примерами

Введение в Lottie для Swift

Установка Lottie

Установка через Swift Package Manager (SPM)

Установка через CocoaPods

Установка через Carthage (устаревший способ)

Быстрый старт с примером кода

Шаг 1: Подготовьте JSON-файл

Шаг 2: Напишите код

Основные методы и функции Lottie

1. `init(name:)` — Инициализация анимации по имени файла

2. `init(contentsOf:)` — Инициализация по URL

3. `play(completion:)` — Воспроизведение анимации

4. `play(fromProgress:toProgress:loopMode:completion:)` — Воспроизведение с параметрами

5. `pause()` — Пауза

6. `stop()` — Остановка

7. `currentProgress` — Текущий прогресс

8. `animationSpeed` — Скорость воспроизведения

9. `setValueProvider(_:keypath:)` — Изменение цвета и свойств

10. `logHierarchyKeypaths()` — Логирование структуры анимации

11. `loopMode` — Режим зацикливания

12. `isAnimationPlaying` — Проверка воспроизведения

Реальный практический пример использования

Код примера

Также в библиотеке

Рекомендаций

Lottie для Swift: полное руководство с примерами

Введение в Lottie для Swift

Установка Lottie

Установка через Swift Package Manager (SPM)

Установка через CocoaPods

Установка через Carthage (устаревший способ)

Быстрый старт с примером кода

Шаг 1: Подготовьте JSON-файл

Шаг 2: Напишите код

Основные методы и функции Lottie

1. init(name:) — Инициализация анимации по имени файла

2. init(contentsOf:) — Инициализация по URL

3. play(completion:) — Воспроизведение анимации

4. play(fromProgress:toProgress:loopMode:completion:) — Воспроизведение с параметрами

5. pause() — Пауза

6. stop() — Остановка

7. currentProgress — Текущий прогресс

8. animationSpeed — Скорость воспроизведения

9. setValueProvider(_:keypath:) — Изменение цвета и свойств

10. logHierarchyKeypaths() — Логирование структуры анимации

11. loopMode — Режим зацикливания

12. isAnimationPlaying — Проверка воспроизведения

Реальный практический пример использования

Код примера

Также в библиотеке

Рекомендаций

1. `init(name:)` — Инициализация анимации по имени файла

2. `init(contentsOf:)` — Инициализация по URL

3. `play(completion:)` — Воспроизведение анимации

4. `play(fromProgress:toProgress:loopMode:completion:)` — Воспроизведение с параметрами

5. `pause()` — Пауза

6. `stop()` — Остановка

7. `currentProgress` — Текущий прогресс

8. `animationSpeed` — Скорость воспроизведения

9. `setValueProvider(_:keypath:)` — Изменение цвета и свойств

10. `logHierarchyKeypaths()` — Логирование структуры анимации

11. `loopMode` — Режим зацикливания

12. `isAnimationPlaying` — Проверка воспроизведения