اجعل تطبيقك ينبض بالحياه

من الجوانب الذي تشجع المستخدم في استخدام برنامجك او تصفح موقعك استخدامك للانميشين واقصد هنا استخدامه بشكل معقول وليس المقصود المبالغه فيه

لاحظ مثلا تطبيق تويتر وميزة الـ Like عند استخدام هاشتاقات معينه مثل حدث Apple الانميشين كفكره وتنفيذ فهي بسيطه ولكنها مميزة للتطبيق ايضا انميشين عند تفاعل المستخدمين مثلا في تطبيقات بث الفيديو و انميشين عند فتح التطبيق مثل تطبيق تويتر وايضا اوبر وغيرهم

بشكل عام هناك عدة انواع من الانميشين ⁃ انميشين الانتقاليه بين الصفحات ⁃انميشين تحريك شعار التطبيق عند فتح التطبيق صفحة الـ LaunchScreen – انميشين عند التحميل Loading

بشكل عام الانميشين يمكن عملها اما عن طريق الكود وهذه في حدود معينه كل ما كان الانميشين معقد كل ما كان الكود معقد وهناك طريقة اخرى وهي استخدم الصورة المتحركة وهذه عيبها انها حجمها جدا كبير وجودتها جداً سيئة

واخيرا انميشين باستخدام مكتبة Lottie فماهي مكتبة Lottie ؟ بداية هي مكتبة من انتاج شركة Airbnb ، نعم نفس الشركة الي غيرت فكرة السكن ! برمجة هذه المكتبه ووفرتها بشكل مجاني للجميع

ايش الي يميزها ؟

• حجمها ملفاتها جدا صغير مهما كان تعقيد الانميشين
• جودتها جدا عاليه (رغم صغر حجمها لا تتأثر بالجودة)
• سهولة استخدمها
• يمكن التحكم فيها عن طريق الكود !
• يمكن تغييره حجمها حسب حجم الشاشة وبالتالي سيظهر الانميشين بأفضل شكل ممكن في جميع احجام الشاشات دون الحاجة لتعديله

مكتبة Lottie بإختصار الانميشين التي تعرضه عباره عن ملف Json بما انه ملف الـ json حجمه صغير فالملف الانميشين ايضا راح يكون بحجم صغير ولا يذكر وبالتالي سوف توفر مساحة في اجهزة المستخدمين

في حال كنت مصمم انميشين باستخدام برنامج الافتر افيكت فهناك plugin يحول شغلك الى ملف Lottie يمكن تحميله من هنا

صحيح مكتبة Lottie معموله للمبرمجين ولكن ايضا لمصممين الـ UI\UX يوجد Plugin لفيقما وايضا لـ Xd ولكن لا يوجد لها plugin رسمي لسكتش ولكن يمكن استخدم plugin باسم Anima

قبل أن ابدا الشرح ، لسهولة اختيار الانميشين تستطع تحميل البرنامج الرسمي للماك او الويندوز من هذه الصفحة

ايضا سوف تجد جميع الـ Plugin لبرامج التصميم وايضا برنامج تحرير الاكواد مثل VS Code الذي يميز Lottie توفرها في جميع البرامج تقريبا

البرنامج راح يساعدك في مشاهدة الانميشين الذي سوف تحملها ، جداً مفيد في حال حملت مجموعه كبيره من ملفات الانميشين ، لانه راح يسهل عليم استعراضها بسهوله

بالنسبة للملفات الانميشين الجاهزة تجدها في هذا الموقع

تصفح الموقع وحمل اي انميشين تريده ويجب ان يكون بصيغة Lottie JSON انا قمت بتحميل هذا
الانميشين وهو انميشين Loading

الشرح

١- ادخل صفحة المكتبة في Github من هنا

وقم بنسخ الرابط المكتبة لاستخدامها في SPM

٢- اتبع الخطوات التالية وقم بلصق الرابط في المكان المخصص له

٣- بعد الانتهاء من تحميل المكتبه في المشروع ، اضيف ملف الانميشين الـ json الى مجلد المشروع ، يفضل تغيير اسمه بالنسبالي غيرته الى اسم loading.json

٤- استخدمه بهذا الشكل

import SwiftUI
import Lottie

struct ContentView: View {
    
    var body: some View {
        LottieView(animation: .named("Loading"))
          .looping()
    }
}

النتيجة