[MUSIC]
كما تعلمنا في المحاضرة السابقة،
تضيف الرسوم المتحركة الكثير من القيمة الجوهرية للتطبيق الخاص بك.
يضيف إلى تجربة مستخدم أفضل.
الآن من الواضح أن هذا لا يعني أنك رمي الرسوم المتحركة في جميع أنحاء المكان
فقط من أجل القيام الرسوم المتحركة.
يمكنك وضع الرسوم المتحركة في مكان من أجل جعل تجربة المستخدم أفضل.
في هذا التمرين سنقوم بعمل أول رسوم متحركة
لدينا داخل تطبيق Angular الذي قمنا بتطويره حتى الآن.
وعلى طول الطريق،
تعلم كيف يمكن تنفيذ الرسوم المتحركة في تطبيق Angular.
سنواصل هذا الموضوع في الجزء الثاني من التمرين حيث
سنضيف المزيد من الرسوم المتحركة إلى تطبيقنا الزاوي.
عندما بدأنا هذه الدورة، في التمرين الأول مع Angular،
كنا قد أضفنا بالفعل في وحدة الرسوم المتحركة إلى تطبيقنا الزاوي
في app.module.ts5، لذلك قمنا باستيراد وحدة الرسوم المتحركة هناك.
الآن الخطوة التالية هي الذهاب إلى المكونات
ثم إضافة في الرسوم المتحركة أينما كان مطلوبا.
الرسوم المتحركة الأولى التي سنقوم بإضافتها هي في مكون dishdetaille هنا.
حتى الذهاب إلى مكون
dishdetaille، اسمحوا لي استيراد بعض الطبقات هنا.
سأقوم باستيراد الزناد والحالة
والأسلوب والتحريك والانتقال من.
@angular /الرسوم المتحركة.
الآن، بمجرد استيراد هذه يمكننا الاستفادة من هذه في بناء الرسوم المتحركة لدينا.
لذا، كيف يمكنك إضافة الرسوم المتحركة إلى مكون؟
سنضيف مشغلات الرسوم المتحركة إلى ديكور المكون هنا.
حتى الذهاب إلى الديكور المكون بعد أنماط عناوين URL،
وإضافة في الرسوم المتحركة كخاصية داخل هناك.
ثم هنا، أنا ذاهب لتحديد الزناد،
الذي أسميه كمشغل الرؤية،
وأنا ذاهب لتحديد الزناد الرؤية في الداخل هنا.
الآن لهذا الزناد الرؤية،
سأحدد حالتين، سأحدد
حالة واحدة كما هو موضح وسأحدد حالة ثانية
باسم، مخفي.
لذلك لدي المرونة في تحديد حالاتي مثل هذا.
لذلك بالنسبة للحالة المعروضة، ما هو الذي أريد تطبيقه؟
لذلك بالنسبة للحالة المعروضة، سأقوم بتطبيق النمط على النحو التالي،
وبالتالي فإن الأنماط التي سأقوم بتطبيقها على
الحالة المعروضة، سأقوم بتحويل،
والتحويل الذي سأقوم بتطبيقه هو مقياس 1.0.
لذلك أريد أن تظهر في
حجمها الطبيعي
وتعتيم 0.
إذن هذه هي الطريقة التي أحدد بها النمط الموضح.
لذلك، والحالة المخفية أنا تعريف النمط كما،
تحويل، سأقول مقياس (0.5).
يمكنك اللعب مع هذه الأرقام
لمعرفة ما إذا كانت الرسوم المتحركة هي ما تريد.
لعبت أيضا حولها مع هذه الأرقام حتى حصلت على شيء أن كنت
راضيا.
و 0، أو لحالتهم المعروضة، سأضع التعتيم كـ 1.
التعتيم 1 يعني أنه مرئي تمامًا.
التعتيم 0 يعني أنه مخفي تماما.
الآن، لقد حددت دولتين هنا، تظهر وهنا في الدولة.
الآن، والانتقال بين هاتين الولايتين،
سأقوم بتحديد هنا، كلما انتقلت من أي ولاية إلى أي ولاية،
لا يهم أي دولة أنتقل،
ويتم التحويل مع الرسوم المتحركة من 0.5 ثانية،
أو 500 ميلي ثانية.
وسوف أستريح في الخارج.
حتى هنا، ما أحدده هو أنه إذا انتقلت من الحالة الظاهرة إلى الحالة المخفية أو
من الحالة المخفية إلى الحالة المعروضة، سأنتقل في غضون 0.5 ثانية، أو 500 ميلي ثانية.
وبعد ذلك، سأقوم بالانتقال عن طريق تسهيل
الدخول والخروج، لذلك لن يكون الانتقال الخطي، سيكون ببطء في ومن
ثم سهولة الدخول ثم تخفيف الانتقال،
بحيث لن يكون الانتقال متشنج من واحد إلى آخر.
لذلك يمكنك استخدام هذه السهولة أو سهولة الخروج
لتحديد كيف تريد أن يحدث الانتقال.
حتى الآن لهذه الرسوم المتحركة، لقد حددت
الرؤية كمشغل لهذه الرسوم المتحركة.
الآن لتمكين هذه الرسوم المتحركة للعمل بشكل صحيح،
سأذهب إلى ديسديتايلكومبوننت بلدي، وبعد ذلك سوف تحدد،
ضمن هذا المكون، القيمة الأولية للرؤية.
لذلك، سأقول أن الرؤية تم
تعيينها في البداية إلى يظهر، وبعد
ذلك، كلما أغير من طبق إلى آخر.
وهذا يحدث عندما أحضر الطبق هنا.
لذلك كلما أقوم بتغيير الطبق من طبق إلى آخر،
يحدث هذا كلما تغيرت معلمة الطريق.
لذا عند هذه النقطة، سأقوم بتطبيق الرسوم المتحركة.
سأجعل الزناد ينتقل من العرض إلى الحالة المخفية
ثم يعود من الحالة المخفية إلى الحالة الظاهرة عندما يكون الطبق متاحًا.
لذلك لتطبيق هذا التحول.
لذلك سأرفق هذا البيان داخل
كتلة هنا في وظيفة السهم هذه.
ومن ثم أيضا تحديد هذه الرؤية هنا كما.
لذلك عندما أقوم بالانتقال من حالة إلى أخرى، حتى
أبدأ في جلب معلومات الطبق من جانب الخادم،
سأقوم أولاً بإخفاء الطبق الحالي عن طريق تعيين
قيمة الرؤية إلى مخفية، مما يعني أن الطبق الحالي الذي
يتم عرضه سيتم إخفاؤه عن العرض.
ثم عندما يصبح الطبق الجديد متاحًا، سيعود إلى المنظر.
لذلك للقيام بذلك، عندما يصبح طبقي متاحًا في الجزء الثاني،
في جزء الاشتراك، سأقول كآخر بيان في تلك الكتلة،
سأقول أن هذه الرؤية تساوي ما هو موضح هنا.
لذلك يصبح وجهة نظري مرئية في هذه المرحلة.
الآن أنا لا تطبيق هذا على رسالة الخطأ لأنني
ذاهب لتطبيق هذه الرؤية فقط على تلك الأجزاء من
القالب الخاص بي حيث يتم عرض الطبق الخاص بي في الواقع.
الآن، إذا كان هناك خطأ، ثم أريد فقط لإخفاء الطبق الصحيح.
ثم، فقط إظهار رسالة الخطأ في طريقة العرض هناك.
لذلك، مع هذه التغييرات على بلدي ديسديتايلكومبوننت.
لذلك، يمكنك أن ترى مرة أخرى، وشرح هذا في ذلك مرة أخرى.
عندما أبدأ جلب الطبق الجديد عند تغيير معلمات الطريق،
سأقوم بتعيين الرؤية إلى مخفية
بحيث يخفي الطبق الحالي الذي يتم عرضه في العرض نفسه.
ثم عندما يصبح الطبق الجديد متاحًا، بحيث يحدث ذلك عندما
يتم استدعاء الاشتراك عندما يصبح ذلك متاحًا.
وبعد ذلك، عندما يصبح الطبق متاحًا وبعد ذلك،
أضع هذا الطبق على الطبق الذي عاد من الممكن ملاحظته.
عند هذه النقطة، سوف أستعيد الرؤية إلى تلك الحالة المعروضة.
لذلك، يمكن أن تظهر طبقي الجديد الذي جلبته على الشاشة.
مع هذا التغيير، انتقل الآن إلى ملف القالب،
وداخل ملف القالب سأقوم بتطبيق
الرؤية على كل من الطبق هنا.
وبالتالي فإن ديف الأول حيث أنا عرض الطبق سوف
تطبيق, الرؤية الزناد إلى الطبق.
ثم سأقوم بتعيين ذلك يساوي،
الرؤية، وهو المتغير الذي حددته في الشفرة هناك.
الآن، أطبق هذا على الطبق هنا، وأطبق أيضًا نفس الشيء
على div الثاني، حيث أقوم بعرض التعليقات.
وهذا كل شيء.
لذلك اسمحوا لي أن حفظ جميع التغييرات، وبعد ذلك سنذهب
ونلقي نظرة على كيفية عمل هذه الرسوم المتحركة في مثالنا.
الذهاب إلى المتصفح، والآن أنا عرض لهم القائمة.
اسمحوا لي اختيار واحد من الأطباق ومن ثم الانتقال إلى وجهة نظر من الأطباق هنا.
لذلك عندما يتم عرض الطبق، لاحظ أنه في أي وقت أنتقل من
هذا الطبق إلى الطبق التالي، وذلك عن طريق النقر على اليمين.
ثم يختفي هذا الطبق، ثم عندما يصبح الطبق الجديد متاحًا،
يصبح العرض مرئيًا مرة أخرى ثم يظهر الطبق الجديد.
وبالمثل، يمكنني أن أفعل أكثر من ذلك ثم لاحظ أن الطبق الجديد،
بمجرد أن تصبح المعلومات المتاحة، يصبح مرئيا مرة أخرى.
لذلك هذا هو الانتقال الذي أطبقه في هذا المثال هنا.
لذا بالعودة، يمكنك رؤية نفس السلوك يكرر نفسه مرة أخرى.
يضيف تغيير واجهة المستخدم الصغير هذا الكثير من القيمة إلى الطريقة التي ينظر بها المستخدم إلى تطبيقك.
كما تدرك، هذا لا يضيف الكثير إلى وظائف التطبيق
نفسه، ولكنه يضيف إلى تجربة مستخدم أفضل.
وهذا هو المكان الذي نطبق فيه الرسوم المتحركة بحكمة داخل
تطبيقنا لجعل تجربة مستخدم معينة أكثر معنى
للمستخدم الذي يقوم بعرض تطبيق Angular الخاص
بك، أو عرض تطبيقك المحمول، والذي سنراه في الدورات اللاحقة.
هذا يكمل هذا التمرين على الرسوم المتحركة.
سنواصل الاستكشافات للرسوم المتحركة في ذلك
الجزء الثاني من التمرين الذي يأتي مباشرة بعد هذا.
هذا هو الوقت المناسب بالنسبة لك للقيام تعليق Git مع الرسوم المتحركة الرسالة،
الجزء الأول.
[ موسيقى]