[MUSIC]
دعونا الحصول على لمحة موجزة عن دعم الرسوم المتحركة في الزاوي قبل أن نذهب
ومحاولة يدنا في الواقع تنفيذ بعض الرسوم المتحركة في التطبيق الزاوي لدينا.
كما تدرك،
الرسوم المتحركة نفسها لا تضيف إلى وظيفة تطبيق Angular الخاص بك.
ثم السؤال الذي يطرح نفسه، لماذا استخدام الرسوم المتحركة؟
الآن إذا نظرتم إليها من تجربة
المستخدم، أو منظور تصميم واجهة المستخدم، ثم تبدأ في رؤية أن الرسوم المتحركة
لها معنى والغرض لاستخدامها في التطبيق.
إعطاء ردود الفعل البصرية للمستخدم حول
الأشياء التي تحدث داخل التطبيق الزاوي الخاص بك.
لذلك يمكن أن يكون لديك تطبيق خالية تماما من الرسوم المتحركة
وأنه لا يزال يوفر نفس مجموعة من الوظائف.
لذلك هذا شيء يجب أن نضعه في اعتبارنا
عندما نقدم الرسوم المتحركة في تطبيقنا الزاوي.
الرسوم المتحركة ليست ضرورية أو مطلوبة
ولكنها تضيف هذا التوابل الصغيرة إلى التطبيق الزاوي الخاص بك، إذا كنت تبقي هذا الرأي في
ذهنك ثم سوف تقترب من الرسوم المتحركة من منظور مختلف تماما.
انها مثل عدم إضافة الكثير من الملح في الأطباق الخاصة بك فقط لأن الملح يضيف طعم.
إلى الكثير من الملح أيضا يفسد الطبق الخاص بك.
نفس الشيء مع الرسوم المتحركة أيضا.
الكثير من الرسوم المتحركة وينتهي بك الأمر مع مستخدم الخلط.
ولكن الرسوم المتحركة، وأضاف في بمهارة لإعطاء اقتراحات للمستخدمين، أو
إعطاء ردود فعل مرئية للمستخدمين، إضافة الكثير من القيمة إلى التطبيق الزاوي الخاص بك.
الآن لحسن الحظ، فإن الإطار المادي الزاوي الذي
نستخدمه بالفعل داخل تطبيقنا الزاوي، يأتي مع مجموعة من الرسوم المتحركة الخاصة به.
في الواقع، هذا هو السبب في أننا أدرجنا وحدة الرسوم المتحركة للمتصفح.
في تطبيقنا الزاوي الحق في البداية لأن
المادة الزاوي تستفيد بالفعل من دعم الرسوم المتحركة الذي
يوفر الزاوي من خلال أو انها الرسوم المتحركة.
لذلك
تستخدم مكتبة المواد الزاوي الرسوم المتحركة المقترحة التي تأتي مع تصميم المواد.
أشياء مثل، على سبيل المثال، عند النقر على زر،
تأثيرات التموج التي تراها على الزر والتضخم الدقيق،
وتقلص أجزاء مختلفة من وجهة نظرك، وهلم جرا.
هذه هي بالفعل مقترحة من قبل نهج تصميم المواد،
وحتى المواد الزاوي تعتمد بالفعل العديد من تلك الأشياء.
لذلك حتى من دون بذل جهد صريح،
يمكنك تلقائيا الحصول على بعض الرسوم المتحركة المطلوبة في
التطبيق الزاوي الخاص بك فقط باستخدام المواد الزاوي.
ولكن لنفترض أنك تريد إضافة التوابل الخاصة بك إلى المزيج.
ثم، كيف تقترب من الرسوم المتحركة في الزاوي؟
هذا ما سننظر إليه بسرعة في هذه المحاضرة.
ثم ننتقل إلى التمرين حيث سنقوم بتنفيذ فو ومعرفة ما إذا كنا
منطقيين أو إذا كانت تحدث فرقًا في الطريقة التي تنظر بها إلى تطبيق Angular الخاص بك.
الفكرة وراء دعم Angular
للرسوم المتحركة هي أنها تمكنك من بناء الرسوم المتحركة مع
الأداء الأصلي القريب لما ستحصل عليه مع الرسوم المتحركة CSS النقي.
الآن قد تتساءل على الفور في عقلك،
لماذا لا تستخدم فقط الرسوم المتحركة CSS النقي؟
في الواقع، يمكنك القيام بذلك أيضًا، ولكن لا يوجد شيء يمنعك من استخدام
الرسوم المتحركة CSS النقية داخل تطبيق Angular الخاص بك.
ولكن ميزة الاستفادة من
النهج الزاوي لإدخال الرسوم المتحركة هو أن الزاوي،
أولا وقبل كل شيء، يعزز الدعم من واجهة برمجة تطبيقات الرسوم المتحركة على شبكة الإنترنت التي يتم
دعمها في الإصدارات الأكثر حداثة من كل تلك المتصفحات.
الآن، إذا كان إصدار المتصفح الخاص بك يدعم بالفعل واجهة برمجة تطبيقات الويب المتحركة،
فإن Angular ببساطة الاستفادة من بداية
لدعم الرسوم المتحركة التي ستضمينها في تطبيق Angular الخاص بك.
إذا لم يكن كذلك، فأنت بحاجة إلى استخدام polyfill
يسمى web-animations.min.js في تطبيق Angular الخاص بك.
في التمارين، سنبدأ بافتراض أننا نستهدف
المتصفحات الحديثة، لذلك أنا لا أقوم بتضمين polyfill بشكل صريح.
إذا قررت القيام بذلك، فإن وثائق الرسوم المتحركة الزاوي
تخبرك صراحة عن كيفية ملء ذلك لاستهداف المتصفحات القديمة.
مرة أخرى، والعودة إلى السؤال،
لماذا لا تستخدم الرسوم المتحركة CSS النقي بدلا من استخدام الرسوم المتحركة الزاوي؟
الآن هذا هو المكان
الذي تأتي فيه ميزة استخدام الرسوم المتحركة الزاوي داخل التطبيق الخاص بك في المقدمة.
حقيقة أن الرسوم المتحركة الزاوي مقترنة بإحكام
مع التعليمات البرمجية التي تكتبها لتطبيق Angular الخاص بك.
وبالتالي، يمكنك تشغيل العديد من هذه الرسوم المتحركة المرتبطة
مباشرة إلى الطريقة التي يتطور بها تطبيقك الزاوي،
وما يحدث داخل التطبيق الزاوي الخاص بك.
حتى تتمكن من ربطه بدورة حياة مكوناتك.
يمكنك ربطه في المراحل المختلفة لكيفية تغيير العرض نفسه
أثناء عرض العرض.
وهكذا فإن هذه الميزة التي تحصل عليها من استخدام مكتبة الرسوم المتحركة الزاوي،
بدلاً من الرسوم المتحركة CSS النقية، هي شيء يستحق النظر فيه.
كيف نقترب من الرسوم المتحركة في Angular؟
يتم بناء الرسوم المتحركة نفسها حول الدول
والتحولات بين الدول في إطار Angular، لذلك
نحدد حالات مختلفة، يمكن أن تكون الدولة أي شيء
ولكنك تريد تعريفها كحالة من منظور الرسوم المتحركة.
أي تغيير في الحالة التي تريد أن تسبب
يمكن أن يؤدي إلى تأثير الرسوم المتحركة لتأتي إلى الصورة.
لذا فإن التحولات على طول الحالات ستؤدي إلى سلوك الرسوم المتحركة
داخل التطبيق الزاوي الخاص بك.
كما سنرى في الشريحة التالية حيث سأريكم مثالا على
كيفية استخدام الأشرطة والتحولات لتحريك الرسوم المتحركة.
لذلك
يتم تعريف جانب الرسوم المتحركة من التطبيق الزاوي الخاص بك داخل ديكور المكون الذي تستخدمه داخل المكونات الخاصة بك.
لذلك يحتوي الديكور المكون على صور متحركة ألوان الخاصية التي
ستستخدمها لتحديد مشغلات القيم للرسوم المتحركة الخاصة بك.
لذا إستخدمت كلمة الزناد
في التدريبات، سترى كيف سنقوم بتنفيذ مشغلات
للرسوم المتحركة وكيف سنقوم بتطبيق المشغلات على عناصر القالب المختلفة،
ومن ثم تشغيل تلك الرسوم المتحركة في ظل ظروف معينة.
وبالإضافة إلى ذلك، عندما تحتاج إلى استخدام الرسوم المتحركة داخل
تطبيق Angular الخاص بك، أولا وقبل كل شيء، تحتاج إلى استيراد وحدة الرسوم المتحركة للمتصفح.
لقد فعلنا ذلك بالفعل في أول تمرين لدينا لأن
وحدة الرسوم المتحركة للمتصفح كانت مطلوبة لدعم المواد الزاوي.
الآن، بالإضافة إلى ذلك، عندما تقوم بتنفيذ الرسوم المتحركة داخل المكونات الخاصة بك.
ثم ستحتاج إلى مساعدة فئات نصف قطرها مثل الزناد، والدولة،
والأسلوب، والتحريك،
والانتقال، والتي يجب استيرادها من مكتبة الرسوم المتحركة الزاوي.
وسنفعل ذلك في كل مكون يتطلب استخدام الرسوم المتحركة.
كما ذكرت في الشريحة السابقة، فإن سلوك الرسوم المتحركة في
تطبيق Angular الخاص بك يدور حول الحالات والتحولات بين الدول.
يمكن أن تكون الدول أي شيء تعرفه كدولة.
كما سترى في المثال الذي يلي في التمرين الأول بعد هذه
المحاضرة، فقد تم تعريف حالتين تسميان ومخفيتان.
من اسم الدولة
تبدأ تلقائيا لتخمين ما تنطوي عليه هاتان الدولتان.
الآن عند الانتقال من الحالة المعروضة إلى الحالة المخفية، فإن الانتقال
من الحالة المعروضة إلى الحالة المخفية سيؤدي إلى نوع من الرسوم المتحركة.
لذلك ربما ستخفي عنصرًا داخل
طريقة العرض الخاصة بك عن طريق تغيير
عتامة العنصر، مما يعني مدى شفافية العنصر وتعتيم
أحد يعني أن العنصر غير شفاف تمامًا ومرئي على الشاشة.
إذا قمت بتعيين العتامة إلى الصفر العنصر يختفي تماما من الشاشة.
نحن لا نزيل هذا العنصر
من خلال إخفاء هذا العنصر ببساطة عن طريق تغيير عتامة.
لذلك، بهذه الطريقة سيكون شيء يمكنك تشغيله.
وبالمثل، يمكنك تغيير حجم عنصر.
يمكنك توسيع أو التعاقد على حجم عنصر عن طريق تطبيق تحويل إلى
خاصية العنصر هذه باستخدام تحويل المقياس للعنصر.
و سنرى أمثلة كما قلت في الممارسة التالية.
لذا فإن جميع الرسوم المتحركة التي تصفها
داخل تطبيق Angular الخاص بك داخل توجيه المكون باستخدام خاصية الرسوم المتحركة
ستدور حول الحالات والتحولات بين الحالات.
عندما تتحدث عن الحالات والتحولات، هناك عدد قليل من
الحالات الخاصة التي نحتاج إلى النظر فيها عندما نحدد هذه التحولات.
واحدة من هذه الدول تسمى كدولة باطلة.
والعنصر الذي ليس على الشاشة.
سيتم اعتبار عنصر أو عرض الجسيمات التي لا تعلق على وجهة النظر لتكون في حالة الفراغ.
لذلك عندما يظهر العنصر في العرض،
أنه إذا تم إرفاقه على سبيل المثال، فإن العنصر ينتقل من
حالة الفراغ إلى واحدة من الحالات الحالية لهذا العنصر.
لذلك في هذه الحالة،
يمكنك تحديد الانتقال من الانتقال من الفراغ إلى حالة معينة.
وبالمثل، لديك أيضًا دولة أخرى تسمى حالة أحرف بدل أو
يتم تعريفها بواسطة النجم، مما يعني أنك لا تهتم بما هو عليه.
حتى إذا كنت بحاجة إلى تحديد انتقال يمكنك أن تقول،
إذا كنت تسير من حالة فارغة إلى حالة نجمة، وهذا يعني من حالة باطلة إلى أي
دولة أخرى أن تنتقل ثم يمكنك تطبيق تحول معين.
لذلك هذه هي الطريقتين الخاصتين لتحديد حالات معينة
عند تحديد الرسوم المتحركة الخاصة بك داخل ديكور المكون. على
وجه الخصوص، هناك طريقتان
لوصف التحولات التي هي ذات أهمية خاصة بالطبع.
يمكن وصف الانتقال من حالة الفراغ إلى أي حالة ببساطة باستخدام
إدخال القولون، بدلاً من قول نجمة السهم الفارغة.
لذلك سترى أننا سوف تستخدم السهم
لوصف التحولات بين الدولة.
لذلك هذا هو بناء الجملة الذي سوف تراني أستخدمه عند بناء التحولات.
وبالمثل،
لذلك يمكن وصف الفراغ لأي حالة أخرى ببساطة باستخدام إدخال القولون.
مما يعني أن هذا العرض يدخل
في العرض الذي يتم وضعه على الشاشة.
وبالمثل، الانتقال من أي حالة إلى حالة الفراغ،
مما يعني أنك تقوم بإزالة هذا العنصر من العرض.
وهذا سيكون أيضا، يمكن تحديده على أنه إجازة القولون،
وهذا يعني أن هذا العنصر هو ترك من وجهة نظر معينة.
لذلك سترى لي باستخدام إدخال القولون والقولون ترك أيضا حيث وصفت
التحولات في التمرين الثاني الذي ستراه في هذا الدرس.
لذلك، مع هذا الفهم السريع للرسوم المتحركة في الزاوي.
دعونا ننظر في كيفية كتابة التعليمات البرمجية في الواقع.
وللقيام بذلك، سننتقل إلى التدريبات حيث نوضح لك،
كيف نستخدم هذه المعرفة التي اكتسبناها للتو حول كيفية
وصف الرسوم المتحركة بالزاوية لكتابة رمز تخطي النوع
لبناء وتطبيق الرسوم المتحركة
لعناصر مختلفة ضمن وجهات نظرنا مكوناتنا.
[ موسيقى]