Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

jQuery Animations: برنامج من 7 خطوات

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Muhammad Hakim Almadani (you can also view the original English article)

يمكن التنوب اندفاعه من الرسوم المتحركة واجهة مملة. في هذا البرنامج التعليمي، سوف تتعلم كيفية القيام بذلك بالطريقة الصحيحة مع jQuery.


كلمة من مقدم البلاغ

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

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


الخطوة 1: jQuery الأساسيات

هو مسج مكتبة جافا سكريبت التي تعتزم لجعله أسهل بالنسبة لك، مطور، لبناء أفضل وميزة التفاعلية الغنية، ومواقع الويب وواجهات المستخدم مع عدد قليل من الأسطر من التعليمات البرمجية قدر الإمكان.

خط نموذجية لتبدو التعليمات البرمجية كما يلي:

دعونا نلقي نظرة على كل جزء:

  • $-الاختزال لكائن مسج. استخدام jquery في حال كنت تستخدم إطارا آخر في نفس الصفحة، كما هو الحال في: مسج ()DOM Element).something)؛
  • (عنصر DOM)-العنصر الذي تريد أن تفعل شيئا مع. هذا واحد من الأس مسج في الحفرة. يمكنك استخدام محددات المغلق للحصول على عنصر. يمكن أن تستخدم أي الإعلان الذي يعمل في مستند المغلق هنا. المعرفات، والفئات، والطبقات الزائفة، وأي شيء.
  • something()--شيء تريد القيام به للعنصر الذي تم الحصول عليه. وهذا يمكن أن يكون أي شيء من إخفاء عنصر لإجراء مكالمة أياكس إلى معالج حدث.

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


الخطوة 2: استخدام آثار خبز

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

قبل أننا نلقي نظرة على كل من هذه الأساليب، هنا هو الشكل العام لاستدعاء كل أسلوب:

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

بينما يمكن أن يسمى معظم الأساليب تمرير أية معلمات، كثيرا ما كنت تريد تخصيص أنها وظيفة. كل أساليب تأخذ على الأقل المعلمات سرعة ورد الاتصال.

تدل سرعة المدة، بالثواني، للرسوم المتحركة. يمكنك تمرير في سلاسل بما في ذلك بطيء أو عادية أو سريعة، أو يمكنك أن تكون أكثر دقة وضبط الوقت بالمللي ثانية.

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

هنا قائمة من المهام المجمعة مع مسج:

  • إظهار/إخفاء-أساليب لإظهار أو إخفاء عنصر. سرعة يأخذ ورد كمعلمات.
  • تبديل-الأسلوب الذي تعالج عرض العنصر تبعاً للحالة الراهنة للعنصر أي إذا كان مخفياً، فإنه يتم عرض والعكس بالعكس. يستخدم أساليب إظهار أو إخفاء.
  • سليديدوون/سليديوب--النفس التفسيرية. ويختلف ارتفاع العنصر إنشاء الرسوم متحركة انزلاق تكشف عن أو إخفاء عنصر.
  • سليديتوجلي--نفس الأسلوب تبديل إلا أن استخدام الأساليب سليديدوون/سليديوب لتكشف أو إخفاء العناصر.
  • فادين/فدوة-يختلف عتامة العنصر المعني لإنشاء تأثير تتلاشى.
  • فاديتو--يغير عتامة عنصر لمطابقة التي تم تمريرها في القيمة. ومن الواضح أن يأخذ معلمة إضافية تعتيم حيث 0 شفاف تماما و 1 معتمة تماما.

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

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

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


الخطوة 3: بناء حركة مخصصة

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

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

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

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

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

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

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

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


الخطوة 4: اللف أثر

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

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

استخدام التوقف لتجنب تكديس الرسوم المتحركة، سيبدو التعليمات البرمجية الجديدة مثل:

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


خطوة 5: إضافة قليلاً المزيد من الواقعية-تخفيف

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

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

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

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


الخطوة 6: الركل من أعلى درجة-jQuery UI

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

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

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

على سبيل المثال، إذا كنت تريد تحريك لون الحدود لعنصر عند التحويم، تبدو التعليمة البرمجية الخاصة بك كما يلي:

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

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


الخطوة 7: بناء لنا "تأثير العالم الحقيقي الأول"

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

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


ال HTML

أولاً، نحن بحاجة إلى قاعدة صلبة من توصيف للبناء على.

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

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

هنا كيفية ظهور الصفحة مع هذه المرحلة كاملة.

Tutorial Image

CSS

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

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

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

هنا كيفية ظهور الصفحة مع هذه المرحلة كاملة.

Tutorial Image

سحر مسج-تمكين جافا سكريبت

قد تبدو تفرض قليلاً ولكن ليس. اسمحوا لي أن اشرح كل جزء.

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

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

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

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

قليلاً إضافية، عندما يتم حلقت في الحاويات للعنوان والوصف، يتحول ببطء الألوان، وذلك بفضل jQuery UI.

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


الاستنتاج


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

هل لديك أسئلة؟ أشياء لطيفة القول؟ الانتقادات؟ ضرب قسم التعليقات وترك لي تعليق. الترميز سعيدة!

  • متابعة منا على Twitter، أو الاشتراك Nettuts+ RSS Feed لدروس تطوير ويب أفضل على شبكة الإنترنت. استعداد

كتابة البرنامج تعليمي زائد

هل تعلم أنه يمكنك أن تكسب ما يصل إلى 600 دولار لكتابة زائد تعليمي و/أو قالب الشاشة بالنسبة لنا؟ نحن نبحث عن العمق ودروس مكتوبة جيدا في HTML و CSS، PHP وجافا سكريبت. إذا كنت من القدرة، يرجى الاتصال جيفري في nettuts@tutsplus.com.

يرجى ملاحظة أن التعويض الفعلي يتوقف على نوعية البرنامج التعليمي النهائي وقالب الشاشة.

Write a PLUS tutorial
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.