Как использовать изображения для создания плавной цикличной анимации в iOS

Как заставить облака двигаться вечно: простая циклическая анимация в iOS

При разработке для iOS анимация действительно может оживить приложение, добавив динамичный и привлекательный элемент, который нравится пользователям. 🌥️ Одна из распространенных анимаций, которую вы, возможно, захотите создать, — это плавный, зацикленный эффект, например движение облаков по экрану. Эту простую, но визуально привлекательную анимацию часто используют в играх, погодных приложениях и даже в личных проектах для создания успокаивающей атмосферы. Если вы новичок в анимации в iOS, вам может быть интересно, как сделать ее плавной и избежать сбоев.

Представьте себе, что вы открываете приложение и сразу видите облака, плавно плывущие по экрану, создавая идеальный безмятежный фон. Такого эффекта можно достичь с помощью анимации UIImageView и UIView в Swift. Основная идея состоит в том, чтобы анимировать одно и то же изображение (в данном случае облако) несколько раз, чтобы казалось, что оно движется непрерывно. Однако это не всегда так просто, как кажется. Разработчики часто сталкиваются с несколькими ловушками, пытаясь сделать анимацию плавной, особенно при работе с повторяющимися изображениями.

Если вы пробовали настроить этот эффект и столкнулись с такими проблемами, как движение облаков в неправильном направлении или исчезновение, вы не одиноки. Это распространенные проблемы, возникающие из-за неправильной обработки кадров или настройки анимации. Но не волнуйтесь: это руководство расскажет вам, как устранить эти проблемы, гарантируя бесперебойную работу вашей анимации. Как и в случае с моей первой попыткой анимации облаков, вам, возможно, придется кое-что подкорректировать, прежде чем вы получите идеальный результат. 😅

Теперь давайте углубимся в решение, позволяющее заставить эти облака двигаться по идеальному циклу. Используя два вида изображения и немного магии анимации, вы создадите бесконечное плавное движение, благодаря которому ваше приложение будет выглядеть гладким и безупречным. Готовы исправить анимацию и заставить эти облака дрейфовать правильно? Пойдем!

Как работает сценарий облачной анимации в iOS

В приведенном выше примере сценария цель — создать плавную непрерывную облачную анимацию, которая бесконечно зацикливается в приложении iOS. Основная идея — анимировать два UIImageView экземпляры с одинаковым изображением облака, перемещая их по экрану горизонтально. Это делается путем регулировки их положения с помощью рамки. origin.x свойство и применение анимации к этим позициям. Два вида изображения используются таким образом, что когда одно выходит за пределы экрана, другое готово занять его место, создавая эффект плавного цикла. Анимируя движение изображений, вы можете создать иллюзию того, что облака постоянно плывут по небу. 🚀

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

После настройки видов изображений следующим шагом будет их анимация. Это делается с помощью UIView.animate функция, которая отвечает за анимацию представлений с течением времени. UIView.animate Функция принимает несколько параметров: продолжительность анимации, любую задержку перед запуском анимации, параметры анимации (например, повтор анимации) и блок анимаций, которые будут применены. В этом случае продолжительность анимации установлена ​​на 20 секунд, а анимация настроена на постоянное повторение с помощью .повторить вариант. .curveLinear Этот параметр гарантирует, что анимация выполняется с постоянной скоростью, создавая плавное линейное движение. Изображения перемещаются по горизонтали путем смещения их origin.x по ширине экрана.

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

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: 20.0, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: nil)
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        let totalDuration = 20.0
        let animationOptions: UIView.AnimationOptions = [.repeat, .curveLinear]
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: animationOptions, animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }) { [weak self] _ in
            self?.recycleClouds()
        }
    }
    func recycleClouds() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

import UIKit
class ViewController: UIViewController {
    var cloudsImageView1: UIImageView!
    var cloudsImageView2: UIImageView!
    let screenSize = UIScreen.main.bounds.width
    let cloudImage = UIImage(named: "cloud.png")
    var totalDuration = 20.0
    override func viewDidLoad() {
        super.viewDidLoad()
        setupClouds()
        animateClouds()
    }
    func setupClouds() {
        cloudsImageView1 = UIImageView(image: cloudImage)
        cloudsImageView2 = UIImageView(image: cloudImage)
        cloudsImageView1.frame = CGRect(x: 0, y: 100, width: screenSize, height: 100)
        cloudsImageView2.frame = CGRect(x: screenSize, y: 100, width: screenSize, height: 100)
        view.addSubview(cloudsImageView1)
        view.addSubview(cloudsImageView2)
    }
    func animateClouds() {
        UIView.animate(withDuration: totalDuration, delay: 0.0, options: [.repeat, .curveLinear], animations: {
            self.cloudsImageView1.frame.origin.x -= self.screenSize
            self.cloudsImageView2.frame.origin.x -= self.screenSize
        }, completion: { [weak self] _ in
            self?.optimizeMemory()
        })
    }
    func optimizeMemory() {
        if cloudsImageView1.frame.origin.x <= -screenSize {
            cloudsImageView1.frame.origin.x = screenSize
        }
        if cloudsImageView2.frame.origin.x <= -screenSize {
            cloudsImageView2.frame.origin.x = screenSize
        }
    }
}

Создание бесшовной облачной анимации в iOS

Анимация зацикленного изображения, например дрейфа облаков в приложении iOS, требует тщательного рассмотрения как визуальных эффектов, так и производительности. Когда вы пытаетесь создать бесконечный цикл перемещения облаков по экрану, необходимо учитывать несколько ключевых элементов: время, направление и способ управления видами. Одним из наиболее важных факторов в обеспечении плавности анимации является эффективная обработка изображений, чтобы они не исчезали и не зависали. Использование двух UIImageView Экземпляры анимации помогают гарантировать, что облака будут постоянно двигаться, даже когда одно изображение перемещается за пределы экрана, а другое занимает его место. Очень важно убедиться, что изображения сбрасываются, как только они выходят за край экрана. Без этого сброса анимация может прерваться, в результате чего облака исчезнут или останутся пробелы в цикле.

Еще одним важным аспектом анимации является фрейм.origin.x свойство, которое используется для управления положением изображений облаков. Устанавливая горизонтальное положение изображений в разных начальных точках, вы можете создать иллюзию бесконечного движения. Однако распространенная проблема возникает, когда одно изображение перемещается за пределы экрана и не возвращается в правильное положение. Правильный подход — определить, когда изображение вышло за край экрана, а затем изменить его положение, чтобы начать снова с другой стороны. Используя блок анимации, вы можете определить повторяющуюся и непрерывную анимацию, обеспечивающую постоянный поток. Чтобы убедиться в плавности движения, используйте UIView.animate метод с такими опциями, как .повторить для зацикливания и .curviLinear для равномерной скорости.

Наконец, оптимизация вашего кода для повышения производительности и плавности так же важна, как и достижение визуального эффекта. Вам следует минимизировать использование памяти и избегать ненужных вычислений во время анимации. С использованием weak self ссылки в анимации на основе замыканий помогают предотвратить утечки памяти, избегая циклов сохранения. Кроме того, если анимация сложная или вам нужны более сложные методы, рассмотрите возможность использования CADisplayLink для обновления кадров в реальном времени, что обеспечивает больший контроль над временем и плавностью анимации. Тестирование анимации на экранах разных размеров и ориентаций также имеет решающее значение, поскольку помогает гарантировать, что анимация работает должным образом на всех устройствах. 📱