Lottie Android مع Kotlin: دليل شامل مع أمثلة

1. ما هي Lottie ولماذا تحتاجها؟

Lottie هي مكتبة مفتوحة المصدر من Airbnb تتيح عرض الرسوم المتحركة المصممة في After Effects بشكل فوري على الأجهزة المحمولة والويب. بالنسبة لنظام Android، توجد مكتبة رسمية com.airbnb.android:lottie تدعم لغة Kotlin بشكل كامل. يتم تصدير الرسوم المتحركة من After Effects إلى تنسيق JSON (عبر إضافة Bodymovin) ثم يتم تشغيلها في التطبيق دون فقدان الجودة وبحجم ملف صغير جدًا.

لماذا تحتاج Lottie؟ أولاً، تُبسّط بشكل كبير عمل المصممين والمطورين: يصمم المصمم رسومًا متحركة معقدة في أدواته المألوفة، ثم يقوم المطور ببساطة بإضافة ملف JSON. ثانيًا، توفر Lottie أداءً عاليًا حيث يتم عرض الرسوم المتحركة على GPU، مما يعطي 60 إطارًا في الثانية حتى على الأجهزة القديمة. ثالثًا، تدعم المكتبة التفاعل: يمكنك التحكم في التشغيل، وتغيير السرعة، والألوان، والأحجام، وحتى تحريك الطبقات الفردية برمجيًا.

Lottie Android مثالية لـ: شاشات البداية (Splash Screens)، الأيقونات المتحركة، الانتقالات بين الشاشات، ردود الفعل على إيماءات المستخدم، الرسوم المتحركة الصغيرة في واجهة المستخدم، وغيرها الكثير. المكتبة مدعومة بنشاط من المجتمع وتحتوي على آلاف الرسوم المتحركة المجانية الجاهزة على LottieFiles.

2. التثبيت

لتثبيت Lottie في مشروع Android باستخدام Kotlin، أضف التبعية التالية إلى ملف build.gradle (على مستوى الوحدة):

dependencies {
    implementation 'com.airbnb.android:lottie:6.4.0'
}

إذا كنت تستخدم Kotlin DSL (build.gradle.kts):

dependencies {
    implementation("com.airbnb.android:lottie:6.4.0")
}

بعد مزامنة Gradle، تصبح المكتبة جاهزة للاستخدام. الحد الأدنى لإصدار Android SDK هو 21 (Android 5.0).

ملاحظة: أوامر pip أو npm أو cargo لا تُستخدم لهذه المكتبة لأنها مكتبة Android أصلية.

3. البداية السريعة — مثال عملي بسيط

ضع ملف JSON للرسوم المتحركة (مثل animation.json) في مجلد app/src/main/res/raw. ثم أضف LottieAnimationView إلى ملف التخطيط الخاص بك:

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_rawRes="@raw/animation"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

الكود في Activity (أو Fragment) باستخدام Kotlin:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val animationView: LottieAnimationView = findViewById(R.id.animationView)
        animationView.playAnimation()
    }
}

هذا المثال البسيط سيشغل الرسوم المتحركة من المورد raw/animation.json في حلقة لا نهائية.

4. أهم الدوال/الطرق/الفئات

4