أفضل موقع لإنشاء الرسوم المتحركة

أفضل موقع لإنشاء الرسوم المتحركة

هل رأيت يومًا موقعًا يتحرك فيه كل عنصر بسلاسة: زر يتحول إلى قائمة، وشعار يرسم نفسه خطًا بعد خط، وصور تنزلق عند التمرير بدقة تشبه حركة فيلم قصير؟ وراء هذه الحركات غالبًا أدوات تحريك تحوّل فكرة المصمم إلى شيفرة تعمل داخل المتصفح. من بين هذه الأدوات ظهرت أداة اسمها Spirit، وعدت المصممين والمطورين بأن يصنعوا حركات الويب بالطريقة التي يعمل بها محرّرو الفيديو: خط زمني، ونقاط مفتاحية، ومعاينة فورية.

في هذا المقال نعرّف موقع Spirit وفكرته وفريقه، ونشرح الخدمة التي قدمها خطوة بخطوة، ونجيب عن أبرز سبعة أسئلة يطرحها الناس عنه، ثم نعرض مميزاته وحدوده، ونقترح خطة عملية لمن يملك مشاريع قديمة بُنيت بالأداة أو يبحث عن بديل لها.

ما هو موقع Spirit؟ تعريف شامل

Spirit أداة لصناعة الرسوم المتحركة للويب تعمل بالتزامن مع المتصفح. يصف الموقع نفسه بأنه مجموعة أدوات تساعدك على إنشاء حركات لصفحات الويب مباشرة من المتصفح، ويقدّمه بعنوان «أداة التحريك التفاعلية». الفكرة أن تفتح صفحة ويب موجودة، وتتصل بها من Spirit Studio، فتحرك عناصرها وترى النتيجة فورًا دون أن تكتب سطرًا من شيفرة التحريك.

وما يميز الأداة أنها لا تحبسك داخل لوحة تصميم مغلقة. في أدوات كثيرة تصمم الحركة داخل برنامج منفصل ثم تصدّرها بصيغة ثقيلة. أما هنا فالصفحة الحقيقية التي سينظر إليها الزائر هي نفسها ساحة العمل. فأنت تحرك عناصرها الفعلية بخطها وألوانها وتخطيطها كما ستظهر في الإنتاج.

من يقف خلف الأداة؟

تشير صفحة الموقع إلى أن المشروع كان يُدار بجهد فردي تقريبًا، وتوقّع رسالة الإيقاف باسم باتريك بصفته مؤسس Spirit، ويظهر حق النشر في أسفل الصفحات باسم Inlet. وهذا شائع في أدوات المطورين المستقلين: فكرة جيدة يبنيها شخص واحد أو فريق صغير، ثم يقرر في مرحلة ما أن الاستمرار لم يعد مناسبًا.

وهنا درس مهم للمصممين والمطورين: حين تعتمد على أداة تجارية صغيرة، اسأل نفسك ماذا يحدث لعملك إن توقفت. وسنرى لاحقًا أن Spirit كان من النوع الذي يحترم هذا القلق، لأن ناتجه يمكن تشغيله دون الأداة نفسها.

الجمهور المستهدف

يقول الموقع إن الأداة بُنيت للمصممين والمطورين معًا. فالمصمم الذي لا يكتب شيفرة يستطيع تركيب الحركة بصريًا والتركيز على الإيقاع والتوقيت. والمطور الذي يعرف HTML وCSS وJavaScript يستفيد من أن الناتج بيانات منظمة يمكن تضمينها والتحكم بها برمجيًا. وينصح الموقع المبتدئين تمامًا بأن يتعرفوا على أساسيات HTML وCSS وJavaScript لأن ذلك يسهّل فهم الفكرة.

الخدمة التي قدمها Spirit: كيف كانت تعمل؟

كانت المنظومة تتألف من ثلاثة أجزاء متكاملة، وفهمها يشرح لماذا بدا العمل بها سهلًا نسبيًا، ويشرح أيضًا لماذا بقي الناتج صالحًا للاستخدام بعد التوقف.

الجزء الأول: Spirit Studio

Spirit Studio تطبيق مكتبي يعمل على أجهزة macOS بإصدار 10.11 أو أحدث، وهو محرر الخط الزمني. فيه تضيف العناصر، وتختار خصائص مثل الموضع والحجم والتدوير والشفافية، وتضع نقاطًا مفتاحية (Keyframes) على الخط الزمني. هذا هو الأسلوب نفسه الذي تعمل به برامج التحريك الاحترافية: تحدد الحالة في لحظة، ثم تحددها في لحظة أخرى، فتتولى الأداة ملء ما بينهما.

وكانت الأداة تتيح التعديل المباشر (Live Edit)، فتغيّر الحركة وتشاهد أثرها على الصفحة في اللحظة نفسها. وهذا يوفر دورات التجربة والخطأ الطويلة التي يعرفها كل من حرّك عنصرًا بالشيفرة: تعدّل قيمة، تحفظ الملف، تحدّث الصفحة، تنتظر، ثم تكتشف أن التوقيت غير مناسب.

الجزء الثاني: إضافة Chrome

يحتاج Studio إلى وسيط يخاطب الصفحة، وهذا دور إضافة Chrome. بعد تثبيتها تفتح الصفحة التي تريد تحريكها، وتضغط على أيقونة الشبح الصغيرة في شريط المتصفح، فيتصل Studio بالصفحة. ويوضح التوثيق أن الإضافة لا تخزن معلومات ولا ترسلها إلى خادم، بل تنقل بيانات الحركة والأوامر بين الصفحة والتطبيق لدعم التعديل المباشر.

وللإضافة حدود معلنة. فهي متاحة لمتصفح Chrome فقط، ولا تستطيع اختيار عناصر داخل الإطارات المضمنة (iframes) مثل أمثلة CodePen وCodeSandbox، ويقترح التوثيق حلًا بديلًا هو إنشاء الحركة في ملف HTML مستقل. وإذا أردت تحريك صفحة محلية على جهازك فعليك تفعيل خيار الوصول إلى روابط الملفات في إعدادات الإضافة.

الجزء الثالث: المشغّل (Web Player) مفتوح المصدر

بعد أن تنهي الحركة تصدّرها ملف JSON يحتوي بيانات التحريك. ثم تضمّن في صفحتك المشغّل (Web Player) وهو مكتبة مفتوحة المصدر منشورة على GitHub، فيقرأ الملف ويحوّله إلى حركة تعمل. ويبني المشغّل خطوطًا زمنية بمكتبة GSAP المعروفة في عالم التحريك، ولذلك يمكنك التحكم في الحركة بواجهة GSAP نفسها.

وقد قدّم التوثيق واجهتين للمشغّل. الواجهة البسيطة تحمّل الحركة وتشغلها تلقائيًا بسطر واحد تقريبًا عبر دالة loadAnimation مع مسار الملف. والواجهة الموسعة تعطيك مجموعات الحركة لتتحكم بها، فتشغّل مجموعة اسمها «intro» مثلًا وقت ما تشاء. والأولى مناسبة لمن لا يخبر JavaScript كثيرًا، والثانية لمن يريد ربط الحركة بأحداث الصفحة والتمرير والنقر.

مجموعات الحركة والعناصر

تنظم الأداة العمل في مجموعات حركة (Animation Groups)، وكل مجموعة مجموعة عناصر تكوّن معًا حركة واحدة، ولها خط زمني رئيسي خاص بها. يشبّهها التوثيق بالمكونات في الويب. فقد تكون لديك مجموعة للافتتاحية، وأخرى لقائمة التنقل، وثالثة لأيقونة تتحول من ثلاثة خطوط إلى علامة إغلاق.

ولتحديد العناصر طريقتان: النقر عليها داخل الصفحة، أو استخدام لوحة العناصر في أدوات مطوري Chrome لمزيد من التحكم. وتنصح الأداة بإضافة سمة data-spirit-id إلى العناصر التي تريد تحريكها، لأن الاعتماد على مسار XPath وحده قد يخطئ العنصر إذا تغيّرت بنية الصفحة مع الوقت.

رحلة استخدام Spirit من الفكرة إلى الصفحة

لنتخيل مصممة تريد أن تجعل أيقونة قائمة الجوال تتحول بسلاسة إلى علامة إغلاق. كانت تثبّت Spirit Studio على جهازها، ثم تضيف إضافة Chrome، وتفتح صفحة موقعها، وتضغط أيقونة الشبح فيتصل التطبيق بالصفحة.

بعدها تنشئ مجموعة حركة وتسميها «hamburger»، وتحدد الخطوط الثلاثة داخل الأيقونة. تضع نقطة مفتاحية أولى بالوضع الأصلي، ثم تنقل المؤشر إلى منتصف الخط الزمني وتدوّر الخط العلوي وتحرّك الأوسط وتخفيه، فتظهر النتيجة أمامها فورًا على الصفحة. وإن لم يعجبها التوقيت سحبت النقطة قليلًا وأعادت المشاهدة.

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

أبرز 7 أسئلة يطرحها المستخدمون حول Spirit

جمعنا الأسئلة التي يكررها الناس عند البحث عن الموقع، وأجبنا عنها اعتمادًا على ما يعلنه الموقع نفسه في صفحاته الرسمية.

السؤال الأول: هل ما زال Spirit يعمل اليوم؟

الجواب الدقيق أن الخدمة أُوقفت رسميًا. حدد المؤسس 31 أكتوبر 2024 آخر يوم لاستخدام Spirit، و30 نوفمبر 2024 موعدًا لانتهاء توفر بيانات الحسابات والنسخ الاحتياطية. ولا يزال الموقع يعرض صفحاته، وتظهر في أعلى الصفحة الرئيسية ملاحظة مهمة تعلن قرار الإيقاف. لذلك لا تتوقع أن تنشئ حسابًا وتبدأ العمل كما كان يحدث سابقًا.

أما المشغّل مفتوح المصدر فيبقى موجودًا على GitHub، وللشيفرة المفتوحة عمر مختلف عن عمر الخدمات التجارية. لكن وجودها لا يعني أن أداة التحرير ما زالت تعمل، فالمشغّل يقرأ بيانات الحركة ويشغلها فحسب، ولا يصنعها. وهذا الفرق هو مفتاح فهم الموقف كله، وسنعود إليه في السؤال الرابع.

السؤال الثاني: هل كان Spirit مجانيًا أم مدفوعًا؟

كان Spirit خدمة اشتراك مدفوعة، تعتمد خطتين: ربع سنوية وسنوية. وكانت عمليات الدفع تتم عبر Paddle، وهي شركة تعمل بصفة التاجر المسجل لجميع الطلبات وتتولى خدمة العملاء المتعلقة بالإلغاء. وكانت هناك فترة تجريبية مدتها سبعة أيام لمن لم يشترِ ترخيصًا بعد.

وفيما يخص سياسة الاسترداد، كانت الاشتراكات السنوية قابلة للمراجعة خلال سبعة أيام بعد التجديد إن نسي المستخدم الإلغاء، أما الاشتراكات الربع سنوية فلا استرداد فيها، ويجب الإلغاء قبل موعد التجديد. ويشير التوثيق إلى أن الاشتراك يتجدد تلقائيًا حتى تلغيه. ومن كانت لديه اشتراكات قديمة فعليه التأكد من أنها لم تعد تُجدَّد عبر مزوّد الدفع.

ومن التفاصيل المهمة أن ترخيص Spirit لم يشمل المزايا الإضافية لمكتبة GSAP. فمن أراد الوصول إلى الإضافات المدفوعة منها كان عليه شراء عضوية GreenSock منفصلة. وقد تغيرت شروط ترخيص GSAP نفسها مع الوقت، فمن يريد معلومات حديثة عنها فليرجع إلى موقعها الرسمي.

السؤال الثالث: ما الأجهزة والمتصفحات التي كانت مدعومة؟

كان التطبيق المكتبي Spirit Studio يعمل على macOS 10.11 أو ما بعده، ولم يكن هناك إصدار لويندوز أو لينكس معلن في الموقع. وفي المتصفح كانت الإضافة تعمل مع Chrome فقط. وكان يمكن استخدام الحركات الناتجة في أي متصفح حديث لأن المشغّل يعتمد على GSAP، لكن التحرير المباشر اقتصر على Chrome.

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

وفيما يتعلق بالحسابات، كان الترخيص الشخصي مخصصًا لحاسوب واحد، وإن أردت نقله إلى جهاز آخر أعدت ضبط الترخيص من قائمة الأداة. وكان فريق الدعم قادرًا على إعادة الضبط عن بعد لمن فقد الوصول. أما إدارة الفرق وإضافة أعضاء إلى ترخيص واحد فلم تكن مدعومة، وكان الفريق يعمل على فئة «فرق» لم تكتمل.

السؤال الرابع: هل ستعمل حركاتي القديمة بعد توقف الخدمة؟

هذا أهم سؤال عند من استخدم الأداة، والخبر الجيد أن جواب الموقع كان واضحًا حتى قبل الإيقاف: الحركات المنشأة تعمل دائمًا. فالناتج مجرد بيانات حركة تُشغَّل بالمشغّل مفتوح المصدر، ولا حاجة إلى اشتراك نشط لتشغيلها. وقد وصف الموقع ذلك بأنه «لا قيد على المستخدم»، لأن الحركة مكتفية بذاتها.

لكن هناك شرطان عمليان. الأول أنك تحتاج Spirit Studio لإنشاء الحركات وتعديلها، فإن أردت تعديل حركة قديمة بعد الإيقاف فلن تجد الأداة الأصلية، وستضطر إلى تعديل ملف JSON يدويًا أو إعادة بناء الحركة بأداة أخرى. والثاني أن المشغّل نفسه ينبغي أن يبقى متاحًا لصفحتك. فإذا كنت تحمّله من رابط خارجي كخدمة CDN، فالأفضل نسخه إلى خادمك الخاص كي لا تتعطل الحركات إن تغيّر الرابط يومًا.

ولذلك ننصح كل من لديه مشاريع بهذه الحركات بثلاث خطوات: احفظ ملفات JSON في نظام إدارة الإصدارات، وانسخ ملف المشغّل إلى مشروعك، وأضف ملاحظة في التوثيق الداخلي توضح الأداة التي أنتجت هذه الملفات وأنها لم تعد متاحة. فهذه التفاصيل الصغيرة توفر على من يأتي بعدك ساعات من الحيرة.

السؤال الخامس: كيف كان البدء مع Spirit خطوة بخطوة؟

كانت الخطوات كما يرسمها دليل البدء الرسمي. أولًا تثبّت Spirit Studio وتنشئ حسابك بإدخال بريدك الإلكتروني والاسم، فيصلك بريد تأكيد تسجيل الدخول طبقة أمان إضافية. ثانيًا تثبّت إضافة Chrome من متجر الإضافات. ثالثًا تفتح الصفحة المراد تحريكها وتضغط أيقونة الشبح للاتصال.

رابعًا تنشئ مجموعة حركة وتسميها اسمًا وصفيًا، وتضيف إليها عناصر بالنقر أو من لوحة العناصر. خامسًا تضيف الخصائص والنقاط المفتاحية وتراقب التغيير فوريًا. سادسًا تصدّر بيانات JSON. سابعًا تضمّن المشغّل في صفحتك وتحمّل الملف بدالة التحميل. وقد كان التوثيق وقناة الفيديو التعليمية يوفران شروحًا مصورة لكل مرحلة.

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

السؤال السادس: ما أفضل بدائل Spirit اليوم؟

يعتمد البديل المناسب على ما تريده تحديدًا. إن كان ما أعجبك هو التحكم البرمجي الدقيق، فمكتبة GSAP نفسها خيار قوي، وهي الأساس الذي بُني عليه مشغّل Spirit، وتتيح بناء خطوط زمنية بالشيفرة مع دعم واسع في المتصفحات. وإن أردت مظهرًا تفاعليًا مع واجهة بصرية فهناك أدوات مثل Theatre.js الذي يقدم محرر خط زمني للحركات المبنية بالشيفرة.

وإن كان هدفك رسومًا متحركة جاهزة تُصنع في برامج التصميم ثم تُشغَّل في الويب والتطبيقات، فصيغة Lottie التي تُصدَّر من After Effects خيار شائع، وكذلك أداة Rive التي تجمع الرسوم التفاعلية مع منطق الحالات. وإن كنت تعمل على مواقع بلا شيفرة فأدوات بناء المواقع مثل Webflow تقدم تفاعلات وحركات بصرية مدمجة. وإن كنت تبني بتقنية React فمكتبات مثل Framer Motion تعطيك حركات تصريحية سهلة.

وننصح بأن تتحقق من الأسعار والتراخيص والميزات الحالية في الموقع الرسمي لكل أداة قبل الالتزام بها، فهذه الأمور تتغير بسرعة. وسواء اخترت هذا أو ذاك، فاسأل نفسك أربعة أسئلة: هل أستطيع تصدير عملي بصيغة مفتوحة؟ هل الأداة نشطة ومطورة؟ هل تدعم نظام تشغيلي ومتصفحي؟ وهل يمكن لفريقي استخدامها معًا؟

السؤال السابع: لمن كان Spirit مناسبًا ولمن لا يناسب؟

كان مناسبًا للمصممين الذين يريدون بناء حركات لمواقعهم دون كتابة شيفرة معقدة، وللمطورين الذين يفضلون رؤية النتيجة فورًا، وللفرق الصغيرة التي تعمل على مواقع تسويقية أو صفحات هبوط تحتاج لمسة حركية مميزة. وكان مناسبًا أيضًا لمن يعمل على مواقع قائمة ويريد إضافة حركة دون إعادة بناء الصفحة.

ولم يكن مناسبًا لمستخدمي ويندوز، ولمن يعتمد على متصفح غير Chrome في التحرير، ولمن يريد رسومًا متحركة معقدة بالأحرف أو بالفيديو، ولمن يحتاج إدارة فريق كبير بصلاحيات متعددة. وهو اليوم غير مناسب لأي مشروع جديد لسبب بسيط هو توقف الخدمة.

مميزات Spirit وحدوده: نظرة صادقة

أبرز المميزات

أولى المزايا التحرير المباشر على الصفحة الحقيقية، فلا فجوة بين ما تصممه وما يراه الزائر. وثانيتها الخط الزمني بالنقاط المفتاحية المألوف لكل من عمل في أدوات التحريك والمونتاج. وثالثتها أن الناتج بيانات JSON يمكن تخزينها وتتبعها في أنظمة الإصدارات، ورابعتها أن المشغّل مفتوح المصدر فلا يرتبط بقاء الحركة باشتراك. وخامستها أن الأداة لا تحصرك في تحريك مربعات، بل تتيح تحريك عناصر الصفحة كلها، بما فيها عناصر SVG.

أبرز الحدود

أول الحدود توقف الخدمة الذي يلغي أي استخدام جديد. وثانيها اقتصار الإصدار المكتبي على macOS واقتصار الإضافة على Chrome. وثالثها عدم دعم الإطارات المضمنة في التحديد، ورابعها غياب إدارة الفرق. وخامسها الاعتماد على XPath عند عدم وجود معرّف للعنصر، وهو اعتماد قد يتعطل إن تغيرت بنية الصفحة. وسادسها أن الترخيص الشخصي مقيد بجهاز واحد.

دروس عملية من تجربة Spirit

أول درس أن تفضّل الصيغ المفتوحة. حركات Spirit بقيت صالحة لأنها بيانات JSON يقرؤها مشغّل مفتوح المصدر. ولو كانت مقفلة داخل صيغة مغلقة لضاع عمل أصحابها. فعند اختيار أي أداة اسأل: هل أستطيع استخراج عملي بصيغة لا تحتاج إلى الأداة لتشغيلها؟

ثاني درس أن تحتفظ بنسخ من الأصول والمشغّلات ولا تكتفِ بروابط خارجية. فمن حمّل المشغّل من CDN يعتمد على رابط قد يتغير، ومن نسخه إلى مشروعه يملك حياة مشروعه. ثالث درس أن توثّق الأدوات التي بنيت بها مشاريعك، حتى لا يتحول ملف حركة قديم إلى لغز لمن يرث المشروع.

رابع درس أن الحركة تخدم المحتوى ولا تتصدره. أدوات مثل Spirit تغري بإضافة حركة لكل شيء، لكن المواقع الجيدة تستخدم الحركة بقصد: توجيه نظر، أو إظهار تغير حالة، أو إعطاء إحساس بالاستجابة. وأخيرًا احرص على أداء الصفحة وعلى من يفضلون تقليل الحركة، فاحترم إعداد تقليل الحركة في أنظمة التشغيل ولا تفرض الحركات على من لا يريدها.

خطة عملية لمن لديه مشاريع بُنيت بـ Spirit

ابدأ بجرد: اجمع ملفات JSON الخاصة بكل حركة، وحدّد الصفحات التي تستخدمها. ثم تحقق من طريقة تحميل المشغّل في كل صفحة، وانسخه إلى مشروعك إن كان يُحمَّل من رابط خارجي. بعدها اختبر الصفحات في المتصفحات الحديثة للتأكد من أن الحركات تعمل كما كانت.

إن احتجت تعديل حركة بعد الإيقاف، فالخيار الأسرع حسب بساطتها هو تعديل القيم في ملف JSON يدويًا، أو إعادة بنائها مباشرة بمكتبة GSAP بما أنها الأساس الذي يشتغل عليه المشغّل. أما في المشاريع الكبيرة فاختر أداة بديلة نشطة وأعد بناء الحركات تدريجيًا، بدءًا من أكثرها ظهورًا في الموقع.

خلاصة المراجعة ونصيحة عملية

كان Spirit فكرة ذكية: محرر خط زمني يتصل بصفحة الويب الحقيقية، ويصدّر بيانات حركة مفتوحة يشغلها مشغّل مفتوح المصدر مبني على GSAP. أراح المصممين من كتابة الشيفرة، وأعطى المطورين تحكمًا كاملًا في الناتج. غير أن الأداة كخدمة انتهت رسميًا في أكتوبر 2024، ولا تصلح لبدء مشروع جديد اليوم. وقيمتها الباقية في الدرس الذي تقدمه، وفي الحركات التي ما زالت تعمل في مواقع صنعتها.

نصيحتي العملية: إن كانت لديك حركات قديمة من Spirit فانسخ ملفات JSON والمشغّل إلى مشروعك اليوم قبل أن تضيع الروابط. وإن كنت تبحث عن أداة جديدة فابدأ بتجربة GSAP أو بديل بصري نشط على صفحة صغيرة، وتأكد قبل أي التزام من أن الأداة تصدّر عملك بصيغة مفتوحة تستطيع تشغيلها دون اشتراك.

الرابط المباشر للموقع: