Stylie - A CSS Web Animated Builder

إذا كنت تكافح مع بناء جملة CSS3 وتريد طريقة بسيطة لخلق الرسوم المتحركة Stylie هي أداة رائعة للحفظ.

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

مكتبة ريكابي يستخدم جافا سكريبت, لذلك هو بديل ل CSS النقي. ولحسن الحظ ، يدعم تطبيق الويب Stylie كلا الطريقتين ، لذلك يمكنك ذلك كود التصدير إما في CSS أو JavaScript.

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

في قائمة الإطارات المفتاحية ، يمكنك ذلك إضافة إطارات مفتاحية جديدة, تحرير مجموع مدتها, و تغيير أنماط الرسوم المتحركة, بما في ذلك الحركات على أساس محور X / Y.

أولا ، هذا سيبدو مربكة للغاية, خاصة إذا لم تكن قد فعلت الرسوم المتحركة للإطارات الرئيسية من قبل. ومع ذلك ، كلما لعبت مع هذا التطبيق كلما كان من المنطقي.

بشكل افتراضي ، سيكون لديك الكثير من خيارات تخفيف مختلفة للتلاعب مع كل شيء سهل للغاية للتخصيص.

ال الرسم البياني للحركة هو أصعب بكثير للتعلم ولكنه يمنحك المزيد من التحكم في تخفيف الرسوم المتحركة الخاصة بك. Stylie حتى يتيح لك حفظ تأثيرات الحركة المخصصة و إعادة استخدام هذه في علامة التبويب Keyframes للرسوم المتحركة الأخرى.

إذا كان بإمكاني تقديم شكوى من شيء واحد ، فهو تطبيق الويب عدم وجود تصميم استجابة.

لم أتمكن من الحصول على التطبيق بالكامل ليناسب شاشة MacBook Pro التي يبلغ حجمها 13 بوصة حتى مع زيادة حجم المتصفح إلى الحد الأقصى. يمكن أن يكون هذا مشكلة نظرًا لأن الصفحة لا تحتوي على شريط تمرير عمودي ويتم العثور على العديد من الخيارات (مثل التعليمات البرمجية المصدرة) أقل في جزء الإعدادات.

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

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

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