13.pngانتقلت تطوير الواجهة نحو الشبكة الدلالية بحتة حيث البصرية يمكن بناؤها فقط في HTML / CSS. وهي تستخدم ليكون ذلك الرسوم المتحركة مطلوب جافا سكريبت. ولكن في السنوات الأخيرة حدث الهجرة مع المزيد من المطورين يميل نحو CSS وقماش الرسوم المتحركة.

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

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

أساسيات الرسوم المتحركة على الإنترنت

بدأت معظم المواقع مع صور GIF المتحركة وانتقلت في نهاية المطاف إلى تفعيل جافا سكريبت في 90s في وقت متأخر / 2000s في وقت مبكر. هذه الخطوة إلى تفعيل جافا لا تزال شعبية في شبكة الانترنت اليوم، على الرغم من المد والجزر تتغير.

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

ولكن منذ اختراع HTML5 و CSS3 فمن الممكن لخلق التحولات و الرسوم المتحركة مع خصائص CSS. هناك الآن مئات حرة الرسوم المتحركة CSS النقية التي يمكن نسخها وتعديلها لمشاريع الويب الحديثة شبيبة المطلوبة.

01-dropdown-navigation-css-animation.jpg

فأين يجب على المطور الجديد تبدأ؟ وكيف ينبغي أن تطبق الرسوم المتحركة HTML5 / CSS3 لتطوير الشبكة الحديثة؟

دعونا الخوض في جوانب مختلفة من الرسوم المتحركة المخصصة وتحقق من بعض مقتطفات الشفرة حرة على طول الطريق.

الانتقال مقابل خصائص الرسوم المتحركة

هناك نوعان من وسائط الأولية لخلق CSS الرسوم المتحركة: مع انتقال الملكية و الرسوم المتحركة الملكية. ديهما دعم المتصفح على نطاق واسع إلا أنها تتصرف بطرق مختلفة.

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

التحولات التي تعرف شيئا في دولتين: دولة ابتداء ودولة تنتهي. هناك سيطرة تذكر بين هاتين الدولتين أخرى من الوقت للانتقال ونوعية التسهيل.

الرسوم المتحركة هي أقوى بكثير والتقنية من التحولات. أنها تسمح للالتأخير العرف، دول متعددة، وتغيرات تدريجية مع مرور الوقت. التحولات تتحرك من ألف إلى باء، ثم في بعض الأحيان إلى A. ولكن يمكن أن الرسوم المتحركة تتحرك من الألف إلى الياء أو أي تركيبة أخرى من الرسائل بينهما.

Kirupa لديه فيديو كبيرة حقا والتكميلية المادة شرح أساسيات بين هاتين الخاصيتين.

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

لذلك والتي ينبغي أن تستخدمها؟ ذلك يعتمد دائما على السياق، ولكن نأخذ في الاعتبار أن الرسوم المتحركة هي أكثر تعقيدا بكثير ولذلك يجب استخدامها فقط عند الحاجة لحالات المعقدة التي لا يمكن التعامل معها مرحلة انتقالية (A إلى B).

02-sidebar-transitions-codrops-screenshot

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

تحقق من هذه المواد ذات الصلة لمعرفة المزيد قليلا عن الرسوم المتحركة CSS العرف والتحولات، جنبا إلى جنب مع وجود اختلافات بين CSS و JavaScript الرسوم المتحركة.

HTML5 قماش الرسوم المتحركة

يتم التعامل مع معظم الرسوم المتحركة HTML5 على عنصر قماش وعلاقات مباشرة إلى CSS أو JavaScript. انها في معظمها الشعبي للألعاب على شبكة الإنترنت ولكن يمكن استخدامها لمواقع حيوية للغاية.

يمكنك بناء الكثير من الاشياء باردة مثل رافعات قماش والموارد الأخرى المماثلة. ولكن معظم قماش الرسوم المتحركة HTML5 هي جمالية بحتة ولا تتعلق العناصر التفاعلية.

وذلك لأن العناصر قماش أنفسهم تضمين في الصفحة. وذلك ما لم يتم بناء صفحة كاملة في قماش (غير مستحسن) ثم عليك أن تقتصر على كل ما العناصر في اللوحة القماشية الخاصة بك.

منذ مبنية ألعاب HTML5 مع API قماش فمن المنطقي في هذه الحالات.

03-pokemon-mmo-game-in-browser-canvas.jpg

يمكنك أن تفعل بعض الاشياء باردة حقا مثل الرسوم المتحركة شبح العرف والحركة الخلفية لتكرار البلاط. قضيت أبدا الكثير من الوقت في بناء HTML5 الألعاب، ولكن هناك العديد من الدروس العظيمة على الانترنت تغطية هذا الموضوع المحدد.

إذا كنت على استعداد لخلط العناصر قماش HTML5 مع جافا سكريبت يمكنك بناء بعض الآثار الدينامية لا يصدق . وهذا يتطلب فهم وظائف شبيبة وربما جملة ES6.

إنشاء تطبيق الويب animatron

وهناك أيضا أدوات مجانية مثل Animatron لمساعدة المصممين والمطورين خلق العرف HTML5 الرسوم المتحركة.

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

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

المكتبات الرسوم المتحركة المجانية

وقد أدت شعبية الواجهة الرسوم المتحركة إلى مجموعة واسعة من المكتبات الرسوم المتحركة وهناك العديد من الخيارات المتاحة التي قد يكون من الصعب تحديد من أين تبدأ.

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

Animate.css

تحريك المغلق المصدر المفتوح

لا يمكن إنكاره هو مكتبة CSS الرسوم المتحركة الأكثر شعبية Animate.css التي أنشأتها دانيال عدن. لا يزال يتم تجديد بنشاط ذلك مع رمز الجودة ومجموعة حية من الرسوم المتحركة بنيت قبل.

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

إذا كان يمكنك الحصول عليه مع CSS كلغة الرسوم المتحركة الخاصة بك ثم أوصى Animate.css. الاستيلاء على نسخة مجانية من جيثب واختبار لنفسك.

CSShake

المغلق هزة مفتوحة المصدر

مكتبة الرسوم المتحركة مماثلة هي CSShake ، ولكن مع خيارات الحركة محدودة. تتعلق المكتبة مباشرة إلى الرسوم المتحركة CSS التي تهز وإجبار عناصر معينة ليهتز على الصفحة.

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

Hover.css

تحوم المغلق المصدر المفتوح

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

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

UI الحركة

حركة zurb مكتبة واجهة المستخدم المغلق

Zurb نشرت مؤخرا إطلاق مؤسسة 6 التي شملت مكتبة الرسوم المتحركة مخصص يسمى الحركة واجهة المستخدم .الصفحة المقصودة هي أشبه ملعب لمعرفة ما يمكن القيام به وكيفية عمل الآثار.

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

لمعرفة المزيد عن هذه المكتبة أحدث تحقق من وثائق الحركة واجهة المستخدم وتنزيل نسخة من الريبو Zurb جيثب.

Magic.css

المغلق سحرية مكتبة مفتوحة المصدر

لمكتبة أكثر غموضا تحقق من Magic.css على جيثب. أنه يحتوي على الصفحة المقصودة عينة حيث يمكنك التجريبي والرسوم المتحركة، ونرى كيف أنها تؤثر على عناصر الصفحة.

انها في معظمها مكتبة للتحرك عناصر داخل وخارج الرأي. لكنه لا يملك مكانه في الصفحة المقصودة كبيرة مع الرسوم المتحركة المخصصة و عناصر متحركة تسلسل .

Mo.js

mo.js مكتبة جافا سكريبت

في مجال المكتبات جافا سكريبت قد تجد Mo.js أن يكون قيما على قدم المساواة مع نظرائهم CSS. وهي تعتمد على جافا سكريبت الرسوم المتحركة ولكن تعمل أشبه بمكتبة الرسوم المتحركة.

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

منحت ليس الجميع يبحث عن هذا التفصيل كبير في الرسوم المتحركة الخاصة بهم. ولكن إذا كنت ثم تحقق من Mo.js على جيثب ومحاولة الخروج منها.

AniJS

مكتبة الرسوم المتحركة anijs

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

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

وإذا كنت تبحث عن مزيد من يبس تحقق من هذه القائمة على JavaScripting.com . ويغطي كافة المكتبات الرسوم المتحركة الكبرى التي هي الحرة والمفتوحة المصدر لتطوير الشبكة.

أفضل القصاصات رمز حر

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

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

متوهجة إدخال النص

إدخال النص متوهجة

هجرة السائل

السائل بالتنقيط الرسوم المتحركة

SVG أيقونات

SVG أيقونات متحركة

ثلاثة شريط الرسوم المتحركة

ثلاثة رموز شريط

CSS مشروط

المغلق تبديل مشروط

تحميل الرسوم المتحركة

القمر محمل SVG الرسوم المتحركة

ثلاثة بار SVG

ثلاثة رموز شريط SVG

لودر خفيفة

محمل الخفيفة شريط التحميل الرسوم المتحركة

SVG القلب

SVG الرسوم المتحركة القلب

بكسل تفكك

ديفيد وولش بكسل الرسوم المتحركة

مفاتيح CSS

أزرار التبديل المغلق الراديو

Kontext المتزلج

التحولات المنزلق الرسوم المتحركة

خريطة الأصوات

بينغ الأحمر الرسوم المتحركة المغلق

قائمة منبثقة

لزج منبثقة القائمة للرسوم المتحركة

مخصص القائمة المنسدلة

القائمة المنسدلة مخصص للرسوم المتحركة

Flexslider

flexslider تصميم الرسوم المتحركة

القائمة العمودية

الحركة تتحرك القائمة العمودية

تراكب مشروط

تراكب الرسوم المتحركة القائمة المنسدلة

CSS مشروط صندوق

قافزة مفهوم إطار مشروط

حركة مخصصة شرطية

الرسوم المتحركة الوسائط المخصصة

مفاتيح المتحركة

الرسوم المتحركة تبديل المحولات

دائرة الرقابة الداخلية 7 مفاتيح

مفاتيح مخصصة ios7

UI مادة التصميم

تصميم مادية حركة الرسوم المتحركة

تويتر صندوق

تويتر 3D مربع تقاسم الحركة

أزرار CSS

الأزرار المخصصة الخضراء

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s