1
00:00:03,680 --> 00:00:09,920
الاستمرار في ممارسة الرسوم المتحركة لدينا من الجزء السابق واحد.

2
00:00:09,920 --> 00:00:15,470
سنضيف في بعض الرسوم المتحركة إلى تطبيقنا الزاوي. على

3
00:00:15,470 --> 00:00:19,515
وجه الخصوص، سوف نضيف في الرسوم المتحركة التي سيتم تشغيلها

4
00:00:19,515 --> 00:00:24,440
عندما تحدث تغييرات المسار داخل تطبيق صفحة واحدة لدينا.

5
00:00:24,440 --> 00:00:28,125
وسوف نضيف أيضا في الرسوم المتحركة التي تمكن من

6
00:00:28,125 --> 00:00:32,595
عرض عرض عندما يتم جلب البيانات من جانب الخادم،

7
00:00:32,595 --> 00:00:39,535
لذلك عندما كنت رفض الدوار في العرض الخاص بك ومن ثم عرض العرض،

8
00:00:39,535 --> 00:00:42,395
نريد أن يتم عرض العرض على الشاشة

9
00:00:42,395 --> 00:00:45,710
بدلا من مجرد ظهور كل مفاجئة

10
00:00:45,710 --> 00:00:49,774
لذلك، واثنين من الرسوم المتحركة الجديدة التي سوف نضيف في هذا التمرين.

11
00:00:49,774 --> 00:00:54,440
على طول الطريق عندما يكون لديك رسوم متحركة متعددة في التطبيق الخاص بك،

12
00:00:54,440 --> 00:00:57,800
قد يكون من الأفضل أن refactor الشفرة بطريقة أكثر

13
00:00:57,800 --> 00:01:01,190
قابلية للإدارة بدلاً من تضمين

14
00:01:01,190 --> 00:01:05,210
كل جزء من الزناد في كل ملف من الملفات

15
00:01:05,210 --> 00:01:09,460
داخل مكوناتنا من تطبيقنا الزاوي.

16
00:01:09,460 --> 00:01:15,880
لذلك، دعونا نفعل كل هذه الخطوات كجزء الثاني من ممارسة الرسوم المتحركة.

17
00:01:15,880 --> 00:01:20,750
أول شيء سأقوم به هو أننا سوف refactor

18
00:01:20,750 --> 00:01:26,705
التعليمات البرمجية التي قمنا بها بالفعل كجزء واحد من هذا التمرين الرسوم المتحركة.

19
00:01:26,705 --> 00:01:32,790
هذا النهج الذي أقوم بتوضيحه لك هنا هو مجرد نهجي المقترح.

20
00:01:32,790 --> 00:01:36,080
ليس عليك بالضرورة اتباع هذه الطريقة بالضبط،

21
00:01:36,080 --> 00:01:40,460
لكنني أشعر أن هذا يساعد على تنظيم الرمز بشكل أفضل بكثير.

22
00:01:40,460 --> 00:01:45,050
لذلك، ما سأقوم به هو تماما مثل كان لدينا مجلد منفصل للخدمات،

23
00:01:45,050 --> 00:01:49,040
كان لدينا مجلد منفصل للموارد المشتركة وهلم جرا،

24
00:01:49,040 --> 00:01:51,975
وأنا ذاهب إلى إنشاء مجلد جديد اسمه الرسوم المتحركة.

25
00:01:51,975 --> 00:01:57,200
سنقوم بتخزين جميع التعليمات البرمجية ذات الصلة للرسوم المتحركة هناك ومن ثم الاستفادة منه عن طريق استيراده

26
00:01:57,200 --> 00:02:03,065
أينما كان ذلك مطلوبًا داخل مكوناتنا في تطبيقنا الزاوي.

27
00:02:03,065 --> 00:02:05,865
لذلك، والذهاب إلى التعليمات البرمجية لدينا،

28
00:02:05,865 --> 00:02:12,615
داخل مجلد التطبيق أنا ذاهب إلى إنشاء مجلد جديد وتسمية الرسوم المتحركة.

29
00:02:12,615 --> 00:02:15,115
داخل مجلد الرسوم المتحركة هذا،

30
00:02:15,115 --> 00:02:20,540
سأقوم بإنشاء ملف جديد ولعدم وجود كلمة أفضل

31
00:02:20,540 --> 00:02:26,940
سأطلق عليه ملف app.animation.ts.

32
00:02:27,060 --> 00:02:31,915
ثم داخل هذا، سأقوم باستيراد

33
00:02:31,915 --> 00:02:38,865
الطبقات المختلفة من الرسوم المتحركة الزاوي التي قمت بها في مكون DishDetail.

34
00:02:38,865 --> 00:02:41,135
لذا، انتقل إلى مكون DishDetail،

35
00:02:41,135 --> 00:02:43,700
ستتذكر أن أول شيء فعلته هو

36
00:02:43,700 --> 00:02:46,640
أنني أضفت هذا الخط إلى مكون DishDetail.

37
00:02:46,640 --> 00:02:49,685
أنا ذاهب لقطعه من مكون DishDetail

38
00:02:49,685 --> 00:02:53,035
وبدلا من ذلك لصقه في الرسوم المتحركة التطبيق،

39
00:02:53,035 --> 00:02:57,765
بحيث أينما يتم

40
00:02:57,765 --> 00:03:03,090
تضمين هذه الرسوم المتحركة التطبيق عن طريق استيراده إلى المكونات الأخرى لدينا،

41
00:03:03,090 --> 00:03:05,640
وهذا سوف يأتي تلقائيا للحق هناك.

42
00:03:05,640 --> 00:03:07,750
الآن، ضمن هذا التطبيق الرسوم المتحركة،

43
00:03:07,750 --> 00:03:12,000
وأنا ذاهب لخلق بعض وظائف المصنع التي من شأنها تصدير المشغلات المختلفة.

44
00:03:12,000 --> 00:03:14,495
أول وظيفة المصنع التي سأقوم بإنشاء

45
00:03:14,495 --> 00:03:22,660
وظيفة التصدير هذه وسميها الرؤية.

46
00:03:23,000 --> 00:03:27,290
ستقوم وظيفة الرؤية هذه بإرجاع الشفرة

47
00:03:27,290 --> 00:03:32,070
المقابلة للمشغل الذي قمنا به في مكون DishDetail.

48
00:03:32,070 --> 00:03:34,455
لذا، بالعودة إلى مكون DishDetail،

49
00:03:34,455 --> 00:03:44,520
أنا فقط ذاهب لقطع هذا الرمز بأكمله للمشغل من هنا ثم العودة إلى

50
00:03:44,520 --> 00:03:48,800
ملف animation.ts التطبيق ثم لصقه في

51
00:03:48,800 --> 00:03:55,825
مكانه هناك في وظيفة هنا.

52
00:03:55,825 --> 00:04:02,530
يصبح هذا الآن دالة متوفرة للاستيراد من مكون DishDetail الخاص بي.

53
00:04:02,530 --> 00:04:06,840
لذلك، والعودة إلى مكون DishDetail.

54
00:04:06,840 --> 00:04:12,640
الآن، في المكان الذي قمت باستيراد الزناد والفئات الأخرى،

55
00:04:12,640 --> 00:04:19,030
سأقوم الآن باستيراد الرؤية

56
00:04:19,030 --> 00:04:30,475
من تطبيق الرسوم المتحركة، والرسوم المتحركة،

57
00:04:30,475 --> 00:04:35,300
وحتى تصبح هذه الوظيفة متاحة لي داخل شفرتي هنا.

58
00:04:35,300 --> 00:04:38,164
لذا، بمجرد القيام بذلك داخل الرسوم المتحركة الخاصة بي،

59
00:04:38,164 --> 00:04:42,560
يمكنني ببساطة استدعاء هذه الوظيفة حتى أتمكن من القول

60
00:04:42,560 --> 00:04:49,515
الرؤية ثم يصبح رمز الزناد الآن جزءًا من مكونتي هنا.

61
00:04:49,515 --> 00:04:55,360
الآن، هذا أجد طريقة أفضل لتنظيم رمز الرسوم المتحركة الخاصة بي.

62
00:04:55,360 --> 00:04:59,400
الآن، إذا كنت بحاجة إلى استخدام نفس الزناد في مكون آخر،

63
00:04:59,400 --> 00:05:07,545
يمكنني ببساطة اتباع هذا النهج لتضمين ذلك في مكوناتي الأخرى كذلك.

64
00:05:07,545 --> 00:05:09,800
دعونا حفظ التغييرات ثم انتقل ونلقي

65
00:05:09,800 --> 00:05:13,020
نظرة سريعة على التطبيق لدينا في المتصفح.

66
00:05:13,020 --> 00:05:18,460
انتقل إلى المتصفح، ترى أنه عندما أذهب إلى مكون القرص، يكون

67
00:05:18,460 --> 00:05:21,215
مكون القرص هناك حق ومن ثم

68
00:05:21,215 --> 00:05:24,810
سيكون له نفس سلوك الرسوم المتحركة كما كان من قبل.

69
00:05:24,810 --> 00:05:26,640
لذلك، من خلال إعادة بيع التعليمات البرمجية،

70
00:05:26,640 --> 00:05:31,085
تمكنت من الحصول على رمز أفضل

71
00:05:31,085 --> 00:05:36,385
تنظيما وما زالت تعمل بالضبط نفس الجزء الأول من هذا التمرين.

72
00:05:36,385 --> 00:05:41,875
إذا كان لديك رسوم متحركة واحدة فقط تستخدم في مكان واحد،

73
00:05:41,875 --> 00:05:44,870
فإن النهج السابق يعمل بشكل جيد ولكن إذا كان لديك

74
00:05:44,870 --> 00:05:48,800
متعددة وخاصة إذا كنت تعيد استخدام الشفرة في العديد من المكونات،

75
00:05:48,800 --> 00:05:55,160
فإن هذا النهج الذي تم إعادة صياغته هو طريقة أفضل بكثير لتنفيذ الحل.

76
00:05:55,160 --> 00:06:00,250
التحديث التالي الذي سأقوم به هو إضافة رسوم متحركة على تغييرات المسار.

77
00:06:00,250 --> 00:06:04,670
لذلك، عندما أذهب من وجهة نظر إلى وجهة نظر أخرى، لذلك، على سبيل المثال،

78
00:06:04,670 --> 00:06:11,145
من المنزل إلى حول أو حول إلى القائمة أو القائمة للاتصال أو العكس،

79
00:06:11,145 --> 00:06:15,350
ثم أريد أن تكون قادرة على تحريك هذه التغييرات داخل طلبي.

80
00:06:15,350 --> 00:06:16,430
لذلك، للقيام بذلك،

81
00:06:16,430 --> 00:06:22,480
وسوف أعرض وظيفة أخرى في ملف.ts الرسوم المتحركة التطبيق.

82
00:06:22,480 --> 00:06:24,980
لذلك، والذهاب إلى ملف الرسوم المتحركة التطبيق،

83
00:06:24,980 --> 00:06:33,210
وسوف تصدير وظيفة أخرى التي أسميها كما FlyInout،

84
00:06:34,570 --> 00:06:39,325
سترى لماذا يمكنني استخدام هذا الاسم هنا.

85
00:06:39,325 --> 00:06:49,150
ثم هذا من شأنه أن يعود وظيفة التي هي الزناد مع اسم FlyInout.

86
00:06:49,820 --> 00:06:52,380
لذلك، داخل كان الزناد،

87
00:06:52,380 --> 00:06:58,710
وأنا ذاهب لتحديد رمز لما هذا الزناد سوف تفعل.

88
00:06:59,620 --> 00:07:10,015
لذا، هنا، سأحدد حالة هنا بنجم الاسم،

89
00:07:10,015 --> 00:07:12,445
لذلك لا يهم ما هي الحالة،

90
00:07:12,445 --> 00:07:16,820
وهذا ينطبق على أي حالة، وبعد ذلك سأحدد

91
00:07:16,820 --> 00:07:22,610
بعض الأنماط هنا والنمطين اللذين سأعرفهما هما هما

92
00:07:22,610 --> 00:07:26,600
هو التعتيم واحد

93
00:07:26,600 --> 00:07:36,915
والتحويل هو TranslaTeX (0)،

94
00:07:36,915 --> 00:07:41,355
مما يعني أن فهو في و ضعه الطبيعي في هذه الحالة.

95
00:07:41,355 --> 00:07:45,270
الآن، عندما أقوم بتعريف التحولات،

96
00:07:45,270 --> 00:07:50,880
يمكنني أيضًا تحديد التحولات بهذه الطريقة.

97
00:07:50,990 --> 00:07:55,090
لذا، إذا قلت أدخل الانتقال،

98
00:07:55,090 --> 00:07:59,240
فإن الانتقال إلى الدخول هو اختزال لقول الانتقال من

99
00:07:59,240 --> 00:08:03,190
حالة فارغة إلى واحدة من الدولة القائمة.

100
00:08:03,190 --> 00:08:06,890
لذلك، مما يعني أن وجهة النظر تأتي في طلبي.

101
00:08:06,890 --> 00:08:10,655
لذلك أدخل، وهذا يعني أنه الآن عندما أتوجه إلى

102
00:08:10,655 --> 00:08:15,450
طريقة عرض معينة في تطبيق الصفحة الواحدة الخاص بي،

103
00:08:15,450 --> 00:08:18,500
سيتم إدخال هذا العرض في العرض.

104
00:08:18,500 --> 00:08:24,325
لذلك، هذا هو السبب في أنني يمكن تطبيق القولون دخول الانتقال في هذه الحالة.

105
00:08:24,325 --> 00:08:27,725
الآن وبالمثل، هناك انتقال آخر يسمى

106
00:08:27,725 --> 00:08:31,790
إجازة القولون التي يمكنني تطبيقها عند الانتقال من

107
00:08:31,790 --> 00:08:40,580
هذا العرض ومن ثم كنت تأخذ وجهة النظر من منفذ جهاز التوجيه من التطبيق الخاص بك.

108
00:08:40,580 --> 00:08:46,950
لذلك، نحن ذاهبون للقيام على حد سواء دخول والآخر الذي هو ترك.

109
00:08:52,760 --> 00:08:56,555
لذا، وظيفتان سأقوم بتعريفهما هنا،

110
00:08:56,555 --> 00:09:00,155
الانتقال يدخل ويغادر الانتقال هنا.

111
00:09:00,155 --> 00:09:01,730
لذا، بالنسبة للإدخال،

112
00:09:01,730 --> 00:09:04,150
ما الذي أريد تعريفه؟

113
00:09:04,150 --> 00:09:09,330
للدخول، اسمحوا لي أن تحديد وظيفة في هنا

114
00:09:09,330 --> 00:09:11,800
، وبالمثل، للإجازة أيضا،

115
00:09:11,800 --> 00:09:15,815
وأنا ذاهب لتحديد وظائف في هنا.

116
00:09:15,815 --> 00:09:18,955
لذلك، خلق هذه السقالات هنا.

117
00:09:18,955 --> 00:09:25,810
الآن، يمكنني إدخال المعلومات التي أريدها ضمن هذه التحولات.

118
00:09:25,810 --> 00:09:28,025
لذلك، عندما يحدث هذا الانتقال،

119
00:09:28,025 --> 00:09:35,590
وسوف تبدأ مع نمط من التحول،

120
00:09:36,920 --> 00:09:42,495
ترانسلاتكس ناقص 100 في المئة،

121
00:09:42,495 --> 00:09:47,680
مما يعني أن وجهة النظر هي تماما من وجهة نظر هنا.

122
00:09:47,680 --> 00:09:52,205
لذلك، تبدأ من هناك من ناقص 100 في المئة في هذه اللحظة.

123
00:09:52,205 --> 00:09:53,930
لذلك، عندما تدخل،

124
00:09:53,930 --> 00:09:55,590
سوف تبدأ مع ذلك،

125
00:09:55,590 --> 00:09:58,710
وبعد ذلك أيضا في هذه المرحلة،

126
00:09:58,710 --> 00:10:03,530
وسوف تتحرك، وتحريك في 500.

127
00:10:03,530 --> 00:10:05,710
لذلك، عندما أحدد 500 مثل هذا،

128
00:10:05,710 --> 00:10:07,960
يمكنك حتى القيام بذلك بهذه الطريقة.

129
00:10:07,960 --> 00:10:10,995
بالتناوب، يمكنك أن تقول، ضمن علامات الاقتباس،

130
00:10:10,995 --> 00:10:16,900
«500ms»، ومن ثم يمكنك حتى استخدام سهولة في أو سهولة الخروج.

131
00:10:16,900 --> 00:10:19,400
لذلك، اسمحوا لي تعديل هذا إلى

132
00:10:19,400 --> 00:10:28,980
500ms سهلة في لأن هذا الرأي يأتي في.

133
00:10:28,980 --> 00:10:30,790
لذلك، سوف نهدأ في الرأي.

134
00:10:30,790 --> 00:10:37,610
لذا، للإجازة، سأطبق الانتقال كحركة،

135
00:10:37,610 --> 00:10:45,640
وبعد ذلك سأقول 500 ميلي ثانية، مرة أخرى، سهل المغادرة.

136
00:10:45,640 --> 00:10:47,740
لذلك، هذا الرأي هو ترك.

137
00:10:47,740 --> 00:10:50,350
لذلك، نحن نريد أن نخفف من هذا الرأي.

138
00:10:50,350 --> 00:10:52,365
ثم، في هذه الحالة،

139
00:10:52,365 --> 00:10:55,115
النمط الذي أطبقه

140
00:10:55,115 --> 00:11:03,880
هو

141
00:11:04,670 --> 00:11:09,590
تحويل، ترانسلاتكس 100 في المئة.

142
00:11:09,590 --> 00:11:15,370
لذلك، فإن هذا الرأي تختفي تماما من الشاشة هناك.

143
00:11:15,370 --> 00:11:18,055
ترانسلاتكس 100 في المئة.

144
00:11:18,055 --> 00:11:23,000
أيضا، سوف أقوم بتعيين التعتيم إلى الصفر.

145
00:11:23,000 --> 00:11:25,615
لذلك، يختفي تماما من الشاشة.

146
00:11:25,615 --> 00:11:31,140
لذا، ستضيف هذه الرسوم المتحركة ميزة جديدة جيدة هنا.

147
00:11:31,140 --> 00:11:33,570
الآن، لهذا واحد أيضا،

148
00:11:33,570 --> 00:11:40,825
يمكنني أن أضيف في، بدءا من عتامة الصفر، إذا كنت تفضل.

149
00:11:40,825 --> 00:11:43,730
دعونا نضيف ذلك ونرى كيف يبدو.

150
00:11:43,730 --> 00:11:48,895
لذا، هذا هو الزناد FlyInout الذي حددته هنا.

151
00:11:48,895 --> 00:11:50,910
الآن، من الواضح أنك تتساءل،

152
00:11:50,910 --> 00:11:53,690
كيف يمكنني الاستفادة من هذا FlyInout ومن ثم تطبيق

153
00:11:53,690 --> 00:11:56,650
هذا لتوجيه التحولات في طلبي؟

154
00:11:56,650 --> 00:11:59,815
لذلك، للقيام بذلك، سوف نذهب إلى، أولا،

155
00:11:59,815 --> 00:12:03,055
بدءا من القائمة component.ts ملف.

156
00:12:03,055 --> 00:12:04,810
أنا ذاهب لاستيراد

157
00:12:04,810 --> 00:12:13,220
FlyInout

158
00:12:14,730 --> 00:12:25,820
من الرسوم المتحركة التطبيق.

159
00:12:27,090 --> 00:12:31,230
ثم، الذهاب إلى المكون،

160
00:12:31,230 --> 00:12:35,425
وأنا الآن ذاهب لتقديم خاصية جديدة تسمى كمضيف.

161
00:12:35,425 --> 00:12:39,445
سأخبركم بما سيذهب إلى المضيف في فترة قصيرة

162
00:12:39,445 --> 00:12:42,939
بعد ذلك، سنقوم أيضًا بتضمين خاصية الرسوم المتحركة،

163
00:12:42,939 --> 00:12:45,470
وهي عبارة عن مصفوفة هنا.

164
00:12:45,470 --> 00:12:50,980
ثم، في الداخل هنا، سأستخدم FlyInout الذي قمنا باستيراده للتو.

165
00:12:50,980 --> 00:12:59,325
لذلك، سيتم تطبيق هذا المشغل الرسوم المتحركة لهذا المكون وسائل الإعلام.

166
00:12:59,325 --> 00:13:00,660
الآن، داخل المضيف،

167
00:13:00,660 --> 00:13:07,975
لذلك هذه هي الطريقة التي أتأكد من أن هذه الرسوم المتحركة معينة تحدث عند حدوث تغييرات المسار.

168
00:13:07,975 --> 00:13:11,215
لذلك، داخل هذا المضيف هنا،

169
00:13:11,215 --> 00:13:15,560
أنا توريد هذا كما يقول،

170
00:13:17,070 --> 00:13:22,705
@flyInOut ويقول صحيح،

171
00:13:22,705 --> 00:13:28,730
وهذا يجب أن تكون محاطة في علامات الاقتباس أيضا،

172
00:13:29,370 --> 00:13:41,660
@flyInOut، true، ثم نمط،

173
00:13:42,000 --> 00:13:45,595
كتلة العرض.

174
00:13:45,595 --> 00:13:52,330
لذلك، يجب تطبيق هذين داخل الخاصية المضيفة هنا.

175
00:13:52,330 --> 00:13:56,410
الآن، عندما نفعل ذلك، سيبدأ مكون القائمة الخاص بي الآن في الحركة

176
00:13:56,410 --> 00:14:00,440
عندما أتوجه إلى مكون القائمة،

177
00:14:00,440 --> 00:14:02,965
ثم أيضًا عندما أترك مكون القائمة.

178
00:14:02,965 --> 00:14:10,705
الآن، سأطبق نفس الشيء على المكونات المتبقية من تطبيق Angular الخاص بي.

179
00:14:10,705 --> 00:14:12,720
لذلك، ما

180
00:14:12,720 --> 00:14:15,260
سأفعله هو، أنا فقط نسخ هذا،

181
00:14:15,850 --> 00:14:20,910
وبعد ذلك سنقوم بتطبيق هذا على المكون حول.

182
00:14:20,910 --> 00:14:23,545
لذلك، سأذهب إلى المكون حول.

183
00:14:23,545 --> 00:14:25,555
داخل ديكور المكون،

184
00:14:25,555 --> 00:14:28,650
لقد قمت بتضمين المعلومات هنا،

185
00:14:28,650 --> 00:14:34,070
وترى الخط الأحمر المتعرج الذي يذكرني بأنني بحاجة إلى استيراد

186
00:14:34,080 --> 00:14:42,255
FlyInout من الرسوم المتحركة، والرسوم المتحركة التطبيق.

187
00:14:42,255 --> 00:14:46,410
لذا، فإن نفس النهج، حول المكون،

188
00:14:46,410 --> 00:14:52,080
ثم داخل مكون الاتصال أيضًا، نفس الشيء،

189
00:15:08,840 --> 00:15:17,980
ثم قم بتطبيق خصائص المضيف والرسوم المتحركة على مصمم المكون،

190
00:15:17,980 --> 00:15:21,660
ثم ماذا لدينا؟

191
00:15:21,660 --> 00:15:28,040
المكون المنزلي دعونا نذهب إلى مكون المنزل ونكرر نفس الشيء هنا.

192
00:15:28,040 --> 00:15:33,385
سأضيف في المضيف والملكية الرسوم المتحركة،

193
00:15:33,385 --> 00:15:36,210
ومن ثم المضي قدما واستيراد

194
00:15:36,210 --> 00:15:50,210
FlyInout، من الرسوم المتحركة التطبيق.

195
00:15:50,350 --> 00:15:56,235
هل فاتنا أي شيء؟ أوه، نحن بحاجة أيضا لتحديث عنصر تفاصيل الطبق.

196
00:15:56,235 --> 00:15:58,360
لذلك، اسمحوا لي أن أذهب إلى عنصر تفاصيل الطبق.

197
00:15:58,360 --> 00:16:00,840
نظرًا لأن لدينا بالفعل الرؤية هناك،

198
00:16:00,840 --> 00:16:04,435
فأنا سأقوم باستيراد FlyInout.

199
00:16:04,435 --> 00:16:08,920
ثم، بما أننا قمنا بالفعل بإعداد الأجزاء المتبقية هنا،

200
00:16:08,920 --> 00:16:12,665
سأدخل وألصق هذا الرمز،

201
00:16:12,665 --> 00:16:17,125
ومن الواضح أن لدي اثنين من الرسوم المتحركة هنا.

202
00:16:17,125 --> 00:16:20,860
اسمحوا لي أن قطع الرؤية من هنا ومن ثم إضافتها

203
00:16:20,860 --> 00:16:29,420
إلى الرسوم المتحركة الأخرى،

204
00:16:29,420 --> 00:16:35,040
ومن ثم قطع هذا خارج بحيث يكون لدي خاصية الرسوم المتحركة واحدة مع

205
00:16:35,040 --> 00:16:40,780
كل من فلاينوت وظائف الرؤية التي يتم تضمينها واستدعاؤها هناك،

206
00:16:40,780 --> 00:16:42,630
ومن ثم الخاصية المضيف.

207
00:16:42,630 --> 00:16:45,625
الآن، دعونا حفظ التغييرات ومن ثم نلقي نظرة على

208
00:16:45,625 --> 00:16:51,370
الرسوم المتحركة الجديدة التي قمنا بتطبيقها للتو على مكوناتنا.

209
00:16:51,370 --> 00:16:56,475
بدءا من وجهة نظر المنزل.

210
00:16:56,475 --> 00:16:59,000
لذلك، لدينا وجهة نظر المنزل يجري تقديمها هنا.

211
00:16:59,000 --> 00:17:02,500
اسمحوا لي الآن أن انتقل بسرعة إلى طريقة العرض حول،

212
00:17:02,500 --> 00:17:05,800
ومن ثم ترى أن عرض حول الشرائح فقط

213
00:17:05,800 --> 00:17:09,780
في أثناء عرض الصفحة الرئيسية إلى الشاشة هنا.

214
00:17:09,780 --> 00:17:11,810
وبالمثل، عندما أذهب إلى القائمة،

215
00:17:11,810 --> 00:17:16,190
سترى أن عرض القائمة الشرائح في أثناء عرض حول الشرائح.

216
00:17:16,190 --> 00:17:20,240
انها سريعة جدا بحيث كنت لا تلاحظ ذلك على هذا النحو.

217
00:17:20,240 --> 00:17:22,740
وبالمثل، بالنسبة لطريقة عرض جهة الاتصال،

218
00:17:22,740 --> 00:17:24,710
تشاهد عرض جهة الاتصال انزلاق في.

219
00:17:24,710 --> 00:17:28,940
لذلك، يمكن إضافة هذا النوع من الرسوم المتحركة باستخدام

220
00:17:28,940 --> 00:17:34,170
هذا الأسلوب الذي قمنا بتوضيحه فقط لتطبيق Angular الخاص بك.

221
00:17:34,170 --> 00:17:40,375
لم ننتهي بعد سنقوم بعمل واحد أكثر من الرسوم المتحركة داخل تطبيقنا.

222
00:17:40,375 --> 00:17:44,955
لتوضيح ما أود القيام به في الرسوم المتحركة التالية،

223
00:17:44,955 --> 00:17:48,495
دعونا نلقي ساعة سريعة على مكون القائمة.

224
00:17:48,495 --> 00:17:50,780
لذلك، ترى أنه عندما عنصر القائمة،

225
00:17:50,780 --> 00:17:54,830
عندما الدوار هو الغزل ومن ثم يحصل على استبدال من قبل العرض،

226
00:17:54,830 --> 00:17:57,180
وجهة نظر يظهر فجأة على الشاشة،

227
00:17:57,180 --> 00:17:59,740
وأنه هو قليلا متعرج للعين.

228
00:17:59,740 --> 00:18:01,230
قد لا تلاحظ ذلك.

229
00:18:01,230 --> 00:18:03,725
قد تكون سعيداً جداً بذلك

230
00:18:03,725 --> 00:18:07,340
ولكن يمكننا أن نضيف بطريقة تخفيف في

231
00:18:07,340 --> 00:18:12,235
هذا الرأي عندما يتم جلب البيانات من الخادم ويتم عرض العرض في.

232
00:18:12,235 --> 00:18:20,625
لذلك، عندما يصبح متغير الطبق في ملف component.ts القائمة الخاصة بي لا باطل،

233
00:18:20,625 --> 00:18:27,290
ثم سيتم إخفاء الدوار ومن ثم عرض الطبق،

234
00:18:27,290 --> 00:18:30,320
يتم إنشاء القائمة ثم وضعت.

235
00:18:30,320 --> 00:18:33,060
لذلك، نريد أن يخفف ذلك في الشاشة.

236
00:18:33,060 --> 00:18:38,820
لذلك، دعونا نضيف في واحد أكثر الرسوم المتحركة للتأثير على حد سواء في مكون القائمة.

237
00:18:38,820 --> 00:18:42,055
سنقوم أيضًا بتطبيق نفس الشيء في مكون تفاصيل الطبق.

238
00:18:42,055 --> 00:18:46,540
سنستخدم أيضًا نفس الشيء في مكون الصفحة الرئيسية أيضًا ومكون

239
00:18:46,540 --> 00:18:51,550
About، حيث نجلب البيانات لإظهار قائمة القادة.

240
00:18:51,550 --> 00:18:56,145
لذا، أينما كنت تجلب البيانات من الخادم ثم وضع العرض،

241
00:18:56,145 --> 00:18:57,740
عندما يظهر العرض،

242
00:18:57,740 --> 00:19:03,275
نريد تخفيف العرض باستخدام هذه الرسوم المتحركة الجديدة التي سأقوم بإنشائها بعد ذلك.

243
00:19:03,275 --> 00:19:06,230
الذهاب إلى ملف.ts الرسوم المتحركة التطبيق،

244
00:19:06,230 --> 00:19:08,615
وأنا ذاهب لإضافة في وظيفة أخرى هنا،

245
00:19:08,615 --> 00:19:14,750
واسمحوا لي أن نسميها توسيع.

246
00:19:14,750 --> 00:19:18,200
ستقوم هذه الوظيفة بتوسيع طريقة العرض التي

247
00:19:18,200 --> 00:19:22,370
يتم وضعها بعد جلب البيانات من جانب الخادم.

248
00:19:22,370 --> 00:19:24,885
لذلك، هذا الرأي، مرة أخرى،

249
00:19:24,885 --> 00:19:28,370
سأعيد الزناد هنا.

250
00:19:28,370 --> 00:19:32,280
سأسمي الزناد على أنه توسيع،

251
00:19:32,280 --> 00:19:37,690
وهذا الزناد سيخلق.

252
00:19:37,890 --> 00:19:40,590
كيف يمكننا تعريف هذا الزناد.

253
00:19:40,590 --> 00:19:49,870
لذلك، داخل هذا الزناد نحن ذاهبون إلى تضمين ولاية مع نجمة في هناك.

254
00:19:49,870 --> 00:19:51,920
لذلك، لا يهم ما هي الدولة.

255
00:19:51,920 --> 00:20:00,580
سيتم تقديم جميع الدول مع نمط كما

256
00:20:00,580 --> 00:20:10,420
عتامة تحويل واحد ترجمة x 0.

257
00:20:10,420 --> 00:20:16,430
لذلك، يتم عرضه الحق والمركز في طلبي.

258
00:20:17,520 --> 00:20:20,990
هذا يجب أن يكون هدفاً هناك

259
00:20:20,990 --> 00:20:23,250
كنت أبحث في ذلك وقال,

260
00:20:23,250 --> 00:20:25,735
لماذا يظهر خط متعرج أحمر.

261
00:20:25,735 --> 00:20:29,560
لذلك، عندما كنت تكتب بسرعة كبيرة غالبا ما ترتكب أخطاء هناك.

262
00:20:29,560 --> 00:20:31,070
لذلك، بدلا من قوس مربع،

263
00:20:31,070 --> 00:20:34,205
يجب أن يكون هدفين هناك.

264
00:20:34,205 --> 00:20:35,915
إذن، هذه هي الولاية

265
00:20:35,915 --> 00:20:44,925
لذلك، أي دولة أنها سوف تكون مرئية تماما وتتركز حيث ينبغي أن تركز.

266
00:20:44,925 --> 00:20:49,180
الآن، اسمحوا لي أن أشعل عملية انتقال.

267
00:20:49,180 --> 00:20:51,730
الآن، سيتم تشغيل هذا الانتقال فقط

268
00:20:51,730 --> 00:20:55,465
عند الدخول عندما يتم وضع العرض على الشاشة.

269
00:20:55,465 --> 00:21:00,740
جزء الخروج الذي نقوم به بالفعل في مسار الرسوم المتحركة، لذلك نحن لسنا بحاجة إلى ذلك.

270
00:21:00,740 --> 00:21:03,060
نحن بحاجة فقط إلى الجزء الداخلي لهذا العرض لأن

271
00:21:03,060 --> 00:21:06,575
العرض يتم عرضه على هذه الشاشة هناك.

272
00:21:06,575 --> 00:21:08,435
لذا، في الإدخال،

273
00:21:08,435 --> 00:21:14,625
سأقوم بتعريف الانتقال بشكل مناسب.

274
00:21:14,625 --> 00:21:18,860
لذلك، في المرحلة الانتقالية ماذا أريد أن أفعل؟

275
00:21:18,860 --> 00:21:27,260
أريد تطبيق نفس النهج الذي استخدمته مع الانتقال إلى الإدخال هنا.

276
00:21:27,260 --> 00:21:32,600
لذلك، أنا فقط ذاهب لنسخ هذا ومن ثم إجراء بعض التعديلات الطفيفة على التعليمات البرمجية هناك.

277
00:21:32,600 --> 00:21:36,335
لذلك، لدخول الانتقال هنا أيضا،

278
00:21:36,335 --> 00:21:38,490
أريد أن تطبيق نفس الشيء.

279
00:21:38,490 --> 00:21:42,040
سأقول ترجمة إنستا من 100 في المئة.

280
00:21:42,040 --> 00:21:46,630
أنا ذاهب فقط لاستخدام 50 في المئة وبعد ذلك سوف تفعل ترجمة Y.

281
00:21:46,630 --> 00:21:52,460
لذلك، مما يعني أن هذا الرأي سوف تنخفض من أعلى 50 بريسنت بدءا من

282
00:21:52,460 --> 00:21:58,655
العتامة الصفر وبعد ذلك سوف تخفيف ذلك في وقت أسرع قليلا،

283
00:21:58,655 --> 00:22:04,200
200 ميلي ثانية وسوف تخفف من ذلك في التطبيق لدينا.

284
00:22:04,200 --> 00:22:09,640
الآن، لذلك، ترى التعديل الطفيف للشفرة هنا.

285
00:22:09,640 --> 00:22:14,845
لذلك، ترجمة ناقص 50 في المئة والعتامة صفر

286
00:22:14,845 --> 00:22:21,025
ويتم تخفيفه في 200 ميلي ثانية وبعد ذلك في هذه المرحلة،

287
00:22:21,025 --> 00:22:27,105
يمكنني تطبيق هذا النمط على نفس النمط.

288
00:22:27,105 --> 00:22:32,240
أنا سَأَتقدّمَ هناك. لذلك، سأقوم فقط بنسخ هذا النمط ثم تطبيق هذا النمط هناك.

289
00:22:32,240 --> 00:22:34,440
لذلك، عندما يتم

290
00:22:34,440 --> 00:22:40,115
تخفيفه، وسوف يأتي في وتكون مرئية تماما حيث ينبغي أن يكون.

291
00:22:40,115 --> 00:22:43,735
لذلك، هذه هي وظيفة التوسع التي قمت بتعريفها هنا.

292
00:22:43,735 --> 00:22:45,950
لذا، أين أريد الاستفادة من هذه الوظيفة؟

293
00:22:45,950 --> 00:22:52,060
سوف نذهب أولا إلى مكون القائمة وداخل مكون القائمة،

294
00:22:52,060 --> 00:22:55,530
وسوف الآن أيضا استيراد ذلك،

295
00:22:55,530 --> 00:23:04,595
وتوسيع ومن ثم إضافته في الرسوم المتحركة بلدي وبعد ذلك كيف يمكنني تطبيق هذا التوسع؟

296
00:23:04,595 --> 00:23:08,160
لذلك، انتقل إلى ملف قالب مكونات القائمة.

297
00:23:08,160 --> 00:23:09,925
في ملف القالب،

298
00:23:09,925 --> 00:23:12,840
سأقوم بتطبيق التوسيع

299
00:23:12,840 --> 00:23:20,435
على قائمة الشبكة حيث أقوم بتطبيق هذا.

300
00:23:20,435 --> 00:23:24,960
لذلك، اسمحوا لي أن نسخ ذلك وبعد ذلك أيضا سوف نذهب

301
00:23:24,960 --> 00:23:32,230
إلى المكون الرئيسي وداخل المكون الرئيسي أيضا،

302
00:23:32,230 --> 00:23:42,590
وأنا ذاهب لتشمل توسيع ومن ثم إضافة توسيع إلى الرسوم المتحركة،

303
00:23:43,430 --> 00:23:49,475
ومن ثم انتقل إلى ملف قالب مكونات المنزل وبعد ذلك سوف تطبيق

304
00:23:49,475 --> 00:23:57,060
أن توسيع إلى مكونات الطبق MD بطاقة,

305
00:23:57,060 --> 00:24:02,695
لمكونات الترويج بطاقة MD وأيضا

306
00:24:02,695 --> 00:24:05,580
لمكونات زعيم بطاقة MD هنا لأنه

307
00:24:05,580 --> 00:24:09,880
سيتم جلب كل هذه الثلاثة في المستقبل من الخادم ومن ثم تقديمها.

308
00:24:09,880 --> 00:24:15,075
لذلك، يتم بالفعل جلب بيانات مكونات الطبق من الخادم.

309
00:24:15,075 --> 00:24:20,080
الآن، نفس الشيء الذهاب إلى مكون DishDetail.

310
00:24:20,080 --> 00:24:27,000
أنا ذاهب لإضافة في التوسع إلى الواردات ومن ثم إضافة

311
00:24:27,000 --> 00:24:35,530
توسيع في الرسوم المتحركة الذهاب إلى عرض مكون ديشديتايل ل.

312
00:24:35,530 --> 00:24:37,415
جنبا إلى جنب مع الرؤية،

313
00:24:37,415 --> 00:24:40,095
وسوف تطبيق أيضا توسيع

314
00:24:40,095 --> 00:24:47,705
إلى ديف بطاقة هناك ومن ثم إلى ديف التعليقات أيضا هنا.

315
00:24:47,705 --> 00:24:50,720
هذا في مكون DishDetail.

316
00:24:50,720 --> 00:24:54,530
لا يحتوي مكون جهة الاتصال على أي شيء يتم جلبه من الخادم.

317
00:24:54,530 --> 00:25:00,265
لذلك، سأذهب فقط إلى المكون حول وفي المكون حول أيضًا،

318
00:25:00,265 --> 00:25:08,680
سوف أقوم بتضمين التوسع وكذلك في الرسوم المتحركة.

319
00:25:08,680 --> 00:25:12,870
الذهاب إلى ملف قالب المكونات هنا هذا الاختبار

320
00:25:12,870 --> 00:25:17,190
هنا الذي يظهر يتم جلب القادة من جانب الخادم.

321
00:25:17,190 --> 00:25:20,310
لذلك، أنا ذاهب لتطبيق التوسع على هذا.

322
00:25:20,310 --> 00:25:23,250
دعونا حفظ التغييرات ثم نذهب ونلقي

323
00:25:23,250 --> 00:25:26,960
نظرة على التطبيق الزاوي لدينا في المتصفح.

324
00:25:26,960 --> 00:25:29,235
الذهاب إلى تطبيقنا الزاوي.

325
00:25:29,235 --> 00:25:31,665
الآن، عندما تذهب إلى قالب المنزل،

326
00:25:31,665 --> 00:25:34,700
يمكنك أن ترى أن البطاقات عندما تم جلبها،

327
00:25:34,700 --> 00:25:38,070
انزلقت في وجهة نظري هناك.

328
00:25:38,070 --> 00:25:40,970
الآن، وبالمثل عندما تذهب إلى المكون حول،

329
00:25:40,970 --> 00:25:45,050
ترى أنه بمجرد جلب البيانات من الخادم،

330
00:25:45,050 --> 00:25:50,470
ثم يتم

331
00:25:50,470 --> 00:25:56,590
تمرير تقديم مختلف القادة في أي وقت مضى ببطء شديد في موقف في هذا الرأي هنا.

332
00:25:56,590 --> 00:25:58,905
وبالمثل، والذهاب إلى مكون القائمة،

333
00:25:58,905 --> 00:26:01,270
وسوف نرى نفس السلوك هنا.

334
00:26:01,270 --> 00:26:03,595
لذلك، بمجرد أن تكون بيانات القائمة جاهزة،

335
00:26:03,595 --> 00:26:07,065
ينزلق مكون القائمة في مكانه هناك.

336
00:26:07,065 --> 00:26:09,980
نفس الشيء مع مكونات تفاصيل الطبق.

337
00:26:09,980 --> 00:26:12,490
لذا، دعني أذهب إلى مكون DishDetail وسترى أن

338
00:26:12,490 --> 00:26:15,250
العرض ينزلق إلى مكانه هناك ولكن

339
00:26:15,250 --> 00:26:18,495
الرسوم المتحركة الأخرى التي كانت

340
00:26:18,495 --> 00:26:22,625
تختفي وتظهر هذا الجزء لا تزال تعمل تمامًا كما كان من قبل.

341
00:26:22,625 --> 00:26:32,755
لذا، ترى أننا قدمنا رسوم متحركة أخرى في تطبيقنا الزاوي.

342
00:26:32,755 --> 00:26:38,555
الآن، سواء كنت تحب هذا أو كنت تريد أن تفعل طريقة أكثر تفصيلا للقيام الرسوم المتحركة،

343
00:26:38,555 --> 00:26:41,605
بالتأكيد، يمكنك أن تذهب مجنون مع

344
00:26:41,605 --> 00:26:45,395
القيام العديد من أنواع مختلفة من الأشياء مع الرسوم المتحركة الخاصة بك.

345
00:26:45,395 --> 00:26:52,395
تغيير العديد من الخصائص المختلفة داخل الأنماط بالطريقة التي تريدها وما إلى ذلك.

346
00:26:52,395 --> 00:26:57,060
ولكن شعرت أن بعض الرسوم المتحركة خفية هنا وهناك سوف

347
00:26:57,060 --> 00:27:02,390
تساعد على تعزيز واجهة المستخدم لتطبيق الزاوي الخاص بي.

348
00:27:02,390 --> 00:27:08,195
لذلك، لقد أضفت في اثنين من الرسوم المتحركة الجديدة إلى بلدي التطبيق الزاوي.

349
00:27:08,195 --> 00:27:14,535
مع هذا، ونحن استكمال الجزء الثاني من ممارسة الرسوم المتحركة لدينا.

350
00:27:14,535 --> 00:27:18,240
آمل أنه مع هذين الجزأين التمرين،

351
00:27:18,240 --> 00:27:21,280
كنت قد فهمت بشكل أفضل حول كيفية الاستفادة من

352
00:27:21,280 --> 00:27:24,555
الرسوم المتحركة داخل تطبيق Angular الخاص بك.

353
00:27:24,555 --> 00:27:32,040
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الرسالة، والرسوم المتحركة الجزء الثاني.