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...
أضف رابط المستودع: 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).