Як використовувати зображення для створення плавної циклічної анімації в iOS

Як змусити хмари рухатися вічно: проста циклічна анімація в iOS

У розробці iOS анімація може справді оживити програму, додавши динамічний і привабливий елемент, який подобається користувачам. 🌥️ Однією з поширених анімацій, які ви можете створити, є плавний циклічний ефект, наче рухомі хмари по екрану. Ця проста, але візуально приваблива анімація часто використовується в іграх, програмах погоди та навіть в особистих проектах для створення заспокійливої ​​атмосфери. Якщо ви новачок у анімації в iOS, можливо, вам цікаво, як зробити її бездоганною та уникнути збоїв.

Уявіть, що ви відкриваєте програму й одразу бачите хмари, що м’яко пливуть по екрану, створюючи ідеальний спокійний фон. Такого ефекту можна досягти за допомогою анімацій `UIImageView` і `UIView` у Swift. Основна ідея полягає в тому, щоб анімувати одне й те саме зображення (в даному випадку хмара) кілька разів, щоб воно здавалося безперервним рухом. Однак це не завжди так просто, як здається. Є кілька підводних каменів, з якими часто стикаються розробники, намагаючись зробити анімацію гладкою, особливо коли мають справу з повторюваними зображеннями.

Якщо ви намагалися налаштувати цей ефект і зіткнулися з такими проблемами, як хмари, що рухаються в неправильному напрямку або зникають, ви не самотні. Це типові проблеми, які виникають через неправильну обробку кадрів або конфігурацію анімації. Але не хвилюйтеся — цей посібник допоможе вам вирішити ці проблеми, забезпечивши бездоганну роботу вашої анімації. Подібно до моєї першої спроби анімації хмар, можливо, вам доведеться налаштувати кілька речей, перш ніж ви отримаєте ідеальний результат. 😅

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

Як працює сценарій хмарної анімації в iOS

У наведеному вище прикладі сценарію метою є створення плавної безперервної хмарної анімації, яка нескінченно повторюється в програмі iOS. Основна ідея полягає в тому, щоб анімувати двох UIImageView екземпляри з однаковим зображенням хмари, переміщуючи їх горизонтально по екрану. Це робиться шляхом регулювання їхнього положення за допомогою рамок origin.x властивості та застосування анімації до цих позицій. Два режими перегляду зображення використовуються так, що коли один з них виходить за межі екрана, інший готовий зайняти його місце, створюючи ефект безперервної петлі. Анімуючи рух зображень, ви можете створити ілюзію, ніби хмари постійно дрейфують небом. 🚀

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

Після налаштування переглядів зображень наступним кроком є ​​їх анімація. Це робиться за допомогою UIView.animate функція, яка відповідає за анімацію поглядів у часі. The UIView.animate Функція приймає кілька параметрів: тривалість анімації, будь-яку затримку перед початком анімації, параметри анімації (наприклад, повторення анімації) і блок анімацій, які потрібно застосувати. У цьому випадку тривалість анімації становить 20 секунд, а анімація повторюється вічно за допомогою .повторити варіант. The .curveLinear гарантує, що анімація працює з постійною швидкістю, створюючи плавний, лінійний рух. Зображення переміщуються горизонтально шляхом їх зміщення origin.x по ширині екрана.

Однак код може призвести до небажаних результатів, наприклад зображення зникнуть або перемістяться в неправильному напрямку. Це тому, що рамка властивість змінюється безпосередньо без скидання зображень, коли вони переміщуються за межі екрана. Рішення полягає у використанні такого методу, як recycleClouds, який скидає положення переглядів зображень, коли вони виходять за межі екрана. Це гарантує безперебійне повторення зображень без зникнення. Цей метод перевіряє х-позицію переглядів зображення, і коли одне з них переміщується за межі екрана, воно скидається на іншу сторону, дозволяючи циклу продовжуватись. Додатково використовуючи слабке я всередині блоку завершення гарантує відсутність витоків пам’яті через сильні еталонні цикли, покращуючи продуктивність програми.

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 екземпляри для анімації допомагають переконатися, що хмари виглядають постійно рухомими, навіть коли одне зображення переміщується за межі екрану, а інше займає його місце. Важливо переконатися, що зображення скидаються, коли вони переходять за край екрана. Без цього скидання анімація може зірватися, спричиняючи зникнення хмар або залишаючи прогалини в циклі.

Інший важливий аспект анімації включає в себе frame.origin.x властивість, яка використовується для керування положенням зображень хмари. Встановлюючи горизонтальне положення зображень у різних початкових точках, ви можете створити ілюзію нескінченного руху. Однак поширена проблема виникає, коли одне зображення переміщується за межі екрана та не повертається до правильного положення. Правильний підхід полягає в тому, щоб визначити, коли зображення перемістилося за край екрана, а потім змінити його положення, щоб почати знову з іншого боку. Використовуючи блок анімації, ви можете визначити повторювану та безперервну анімацію, яка забезпечує постійний потік. Щоб забезпечити плавність руху, використовуйте UIView.animate метод із такими параметрами, як .повторити для зациклювання і .curveLinear для рівномірної швидкості.

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