1
00:00:00,000 --> 00:00:04,763
[MUSIC]

2
00:00:04,763 --> 00:00:07,931
كما تعلمنا في المحاضرة السابقة،

3
00:00:07,931 --> 00:00:12,927
تضيف الرسوم المتحركة الكثير من القيمة الجوهرية للتطبيق الخاص بك.

4
00:00:12,927 --> 00:00:16,080
يضيف إلى تجربة مستخدم أفضل.

5
00:00:16,080 --> 00:00:19,990
الآن من الواضح أن هذا لا يعني أنك رمي الرسوم المتحركة في جميع أنحاء المكان

6
00:00:19,990 --> 00:00:22,730
فقط من أجل القيام الرسوم المتحركة.

7
00:00:22,730 --> 00:00:29,480
يمكنك وضع الرسوم المتحركة في مكان من أجل جعل تجربة المستخدم أفضل.

8
00:00:30,680 --> 00:00:34,130
في هذا التمرين سنقوم بعمل أول رسوم متحركة

9
00:00:34,130 --> 00:00:37,006
لدينا داخل تطبيق Angular الذي قمنا بتطويره حتى الآن.

10
00:00:37,006 --> 00:00:38,425
وعلى طول الطريق،

11
00:00:38,425 --> 00:00:44,190
تعلم كيف يمكن تنفيذ الرسوم المتحركة في تطبيق Angular.

12
00:00:44,190 --> 00:00:49,127
سنواصل هذا الموضوع في الجزء الثاني من التمرين حيث

13
00:00:49,127 --> 00:00:53,206
سنضيف المزيد من الرسوم المتحركة إلى تطبيقنا الزاوي.

14
00:00:53,206 --> 00:00:58,720
عندما بدأنا هذه الدورة، في التمرين الأول مع Angular،

15
00:00:58,720 --> 00:01:04,147
كنا قد أضفنا بالفعل في وحدة الرسوم المتحركة إلى تطبيقنا الزاوي

16
00:01:04,147 --> 00:01:10,299
في app.module.ts5، لذلك قمنا باستيراد وحدة الرسوم المتحركة هناك.

17
00:01:10,299 --> 00:01:13,551
الآن الخطوة التالية هي الذهاب إلى المكونات

18
00:01:13,551 --> 00:01:17,240
ثم إضافة في الرسوم المتحركة أينما كان مطلوبا.

19
00:01:17,240 --> 00:01:24,336
الرسوم المتحركة الأولى التي سنقوم بإضافتها هي في مكون dishdetaille هنا.

20
00:01:24,336 --> 00:01:28,758
حتى الذهاب إلى مكون

21
00:01:28,758 --> 00:01:32,790
dishdetaille، اسمحوا لي استيراد بعض الطبقات هنا.

22
00:01:32,790 --> 00:01:38,271
سأقوم باستيراد الزناد والحالة

23
00:01:38,271 --> 00:01:45,382
والأسلوب والتحريك والانتقال من.

24
00:01:50,250 --> 00:01:53,120
@angular /الرسوم المتحركة.

25
00:01:56,695 --> 00:02:02,460
الآن، بمجرد استيراد هذه يمكننا الاستفادة من هذه في بناء الرسوم المتحركة لدينا.

26
00:02:02,460 --> 00:02:06,390
لذا، كيف يمكنك إضافة الرسوم المتحركة إلى مكون؟

27
00:02:06,390 --> 00:02:12,360
سنضيف مشغلات الرسوم المتحركة إلى ديكور المكون هنا.

28
00:02:12,360 --> 00:02:19,247
حتى الذهاب إلى الديكور المكون بعد أنماط عناوين URL،

29
00:02:19,247 --> 00:02:25,217
وإضافة في الرسوم المتحركة كخاصية داخل هناك.

30
00:02:25,217 --> 00:02:30,140
ثم هنا، أنا ذاهب لتحديد الزناد،

31
00:02:30,140 --> 00:02:34,126
الذي أسميه كمشغل الرؤية،

32
00:02:34,126 --> 00:02:39,888
وأنا ذاهب لتحديد الزناد الرؤية في الداخل هنا.

33
00:02:39,888 --> 00:02:43,942
الآن لهذا الزناد الرؤية،

34
00:02:43,942 --> 00:02:48,972
سأحدد حالتين، سأحدد

35
00:02:48,972 --> 00:02:54,282
حالة واحدة كما هو موضح وسأحدد حالة ثانية

36
00:02:54,282 --> 00:03:00,932
باسم، مخفي.

37
00:03:00,932 --> 00:03:04,930
لذلك لدي المرونة في تحديد حالاتي مثل هذا.

38
00:03:04,930 --> 00:03:09,670
لذلك بالنسبة للحالة المعروضة، ما هو الذي أريد تطبيقه؟

39
00:03:09,670 --> 00:03:16,565
لذلك بالنسبة للحالة المعروضة، سأقوم بتطبيق النمط على النحو التالي،

40
00:03:16,565 --> 00:03:21,350
وبالتالي فإن الأنماط التي سأقوم بتطبيقها على

41
00:03:21,350 --> 00:03:26,416
الحالة المعروضة، سأقوم بتحويل،

42
00:03:26,416 --> 00:03:33,240
والتحويل الذي سأقوم بتطبيقه هو مقياس 1.0.

43
00:03:33,240 --> 00:03:38,170
لذلك أريد أن تظهر في

44
00:03:38,170 --> 00:03:42,810
حجمها الطبيعي

45
00:03:42,810 --> 00:03:47,167
وتعتيم 0.

46
00:03:47,167 --> 00:03:50,929
إذن هذه هي الطريقة التي أحدد بها النمط الموضح.

47
00:03:50,929 --> 00:03:57,884
لذلك، والحالة المخفية أنا تعريف النمط كما،

48
00:04:03,816 --> 00:04:09,659
تحويل، سأقول مقياس (0.5).

49
00:04:09,659 --> 00:04:13,002
يمكنك اللعب مع هذه الأرقام

50
00:04:13,002 --> 00:04:17,294
لمعرفة ما إذا كانت الرسوم المتحركة هي ما تريد.

51
00:04:17,294 --> 00:04:21,194
لعبت أيضا حولها مع هذه الأرقام حتى حصلت على شيء أن كنت

52
00:04:21,194 --> 00:04:22,194
راضيا.

53
00:04:22,194 --> 00:04:29,457
و 0، أو لحالتهم المعروضة، سأضع التعتيم كـ 1.

54
00:04:29,457 --> 00:04:31,929
التعتيم 1 يعني أنه مرئي تمامًا.

55
00:04:31,929 --> 00:04:34,942
التعتيم 0 يعني أنه مخفي تماما.

56
00:04:34,942 --> 00:04:38,555
الآن، لقد حددت دولتين هنا، تظهر وهنا في الدولة.

57
00:04:38,555 --> 00:04:43,481
الآن، والانتقال بين هاتين الولايتين،

58
00:04:43,481 --> 00:04:50,931
سأقوم بتحديد هنا، كلما انتقلت من أي ولاية إلى أي ولاية،

59
00:04:50,931 --> 00:04:56,339
لا يهم أي دولة أنتقل،

60
00:04:56,339 --> 00:05:02,108
ويتم التحويل مع الرسوم المتحركة من 0.5 ثانية،

61
00:05:02,108 --> 00:05:04,780
أو 500 ميلي ثانية.

62
00:05:04,780 --> 00:05:08,522
وسوف أستريح في الخارج.

63
00:05:08,522 --> 00:05:13,323
حتى هنا، ما أحدده هو أنه إذا انتقلت من الحالة الظاهرة إلى الحالة المخفية أو

64
00:05:13,323 --> 00:05:19,140
من الحالة المخفية إلى الحالة المعروضة، سأنتقل في غضون 0.5 ثانية، أو 500 ميلي ثانية.

65
00:05:19,140 --> 00:05:23,278
وبعد ذلك، سأقوم بالانتقال عن طريق تسهيل

66
00:05:23,278 --> 00:05:27,755
الدخول والخروج، لذلك لن يكون الانتقال الخطي، سيكون ببطء في ومن

67
00:05:27,755 --> 00:05:31,218
ثم سهولة الدخول ثم تخفيف الانتقال،

68
00:05:31,218 --> 00:05:35,383
بحيث لن يكون الانتقال متشنج من واحد إلى آخر.

69
00:05:35,383 --> 00:05:40,411
لذلك يمكنك استخدام هذه السهولة أو سهولة الخروج

70
00:05:40,411 --> 00:05:45,125
لتحديد كيف تريد أن يحدث الانتقال.

71
00:05:45,125 --> 00:05:49,625
حتى الآن لهذه الرسوم المتحركة، لقد حددت

72
00:05:49,625 --> 00:05:54,861
الرؤية كمشغل لهذه الرسوم المتحركة.

73
00:05:54,861 --> 00:05:58,911
الآن لتمكين هذه الرسوم المتحركة للعمل بشكل صحيح،

74
00:05:58,911 --> 00:06:04,344
سأذهب إلى ديسديتايلكومبوننت بلدي، وبعد ذلك سوف تحدد،

75
00:06:04,344 --> 00:06:09,412
ضمن هذا المكون، القيمة الأولية للرؤية.

76
00:06:09,412 --> 00:06:13,444
لذلك، سأقول أن الرؤية تم

77
00:06:13,444 --> 00:06:18,484
تعيينها في البداية إلى يظهر، وبعد

78
00:06:18,484 --> 00:06:25,379
ذلك، كلما أغير من طبق إلى آخر.

79
00:06:25,379 --> 00:06:28,649
وهذا يحدث عندما أحضر الطبق هنا.

80
00:06:28,649 --> 00:06:32,117
لذلك كلما أقوم بتغيير الطبق من طبق إلى آخر،

81
00:06:32,117 --> 00:06:35,249
يحدث هذا كلما تغيرت معلمة الطريق.

82
00:06:35,249 --> 00:06:37,942
لذا عند هذه النقطة، سأقوم بتطبيق الرسوم المتحركة.

83
00:06:37,942 --> 00:06:42,649
سأجعل الزناد ينتقل من العرض إلى الحالة المخفية

84
00:06:42,649 --> 00:06:48,520
ثم يعود من الحالة المخفية إلى الحالة الظاهرة عندما يكون الطبق متاحًا.

85
00:06:48,520 --> 00:06:53,330
لذلك لتطبيق هذا التحول.

86
00:06:53,330 --> 00:06:58,720
لذلك سأرفق هذا البيان داخل

87
00:06:58,720 --> 00:07:03,330
كتلة هنا في وظيفة السهم هذه.

88
00:07:03,330 --> 00:07:11,806
ومن ثم أيضا تحديد هذه الرؤية هنا كما.

89
00:07:11,806 --> 00:07:16,845
لذلك عندما أقوم بالانتقال من حالة إلى أخرى، حتى

90
00:07:16,845 --> 00:07:22,421
أبدأ في جلب معلومات الطبق من جانب الخادم،

91
00:07:22,421 --> 00:07:27,784
سأقوم أولاً بإخفاء الطبق الحالي عن طريق تعيين

92
00:07:27,784 --> 00:07:32,503
قيمة الرؤية إلى مخفية، مما يعني أن الطبق الحالي الذي

93
00:07:32,503 --> 00:07:37,265
يتم عرضه سيتم إخفاؤه عن العرض.

94
00:07:37,265 --> 00:07:42,085
ثم عندما يصبح الطبق الجديد متاحًا، سيعود إلى المنظر.

95
00:07:42,085 --> 00:07:48,147
لذلك للقيام بذلك، عندما يصبح طبقي متاحًا في الجزء الثاني،

96
00:07:48,147 --> 00:07:54,651
في جزء الاشتراك، سأقول كآخر بيان في تلك الكتلة،

97
00:07:54,651 --> 00:07:59,299
سأقول أن هذه الرؤية تساوي ما هو موضح هنا.

98
00:07:59,299 --> 00:08:04,513
لذلك يصبح وجهة نظري مرئية في هذه المرحلة.

99
00:08:04,513 --> 00:08:09,229
الآن أنا لا تطبيق هذا على رسالة الخطأ لأنني

100
00:08:09,229 --> 00:08:13,654
ذاهب لتطبيق هذه الرؤية فقط على تلك الأجزاء من

101
00:08:13,654 --> 00:08:17,616
القالب الخاص بي حيث يتم عرض الطبق الخاص بي في الواقع.

102
00:08:17,616 --> 00:08:20,910
الآن، إذا كان هناك خطأ، ثم أريد فقط لإخفاء الطبق الصحيح.

103
00:08:20,910 --> 00:08:24,751
ثم، فقط إظهار رسالة الخطأ في طريقة العرض هناك.

104
00:08:24,751 --> 00:08:29,021
لذلك، مع هذه التغييرات على بلدي ديسديتايلكومبوننت.

105
00:08:29,021 --> 00:08:34,092
لذلك، يمكنك أن ترى مرة أخرى، وشرح هذا في ذلك مرة أخرى.

106
00:08:34,092 --> 00:08:40,072
عندما أبدأ جلب الطبق الجديد عند تغيير معلمات الطريق،

107
00:08:40,072 --> 00:08:42,924
سأقوم بتعيين الرؤية إلى مخفية

108
00:08:42,924 --> 00:08:48,445
بحيث يخفي الطبق الحالي الذي يتم عرضه في العرض نفسه.

109
00:08:48,445 --> 00:08:52,427
ثم عندما يصبح الطبق الجديد متاحًا، بحيث يحدث ذلك عندما

110
00:08:52,427 --> 00:08:56,221
يتم استدعاء الاشتراك عندما يصبح ذلك متاحًا.

111
00:08:56,221 --> 00:09:00,001
وبعد ذلك، عندما يصبح الطبق متاحًا وبعد ذلك،

112
00:09:00,001 --> 00:09:04,455
أضع هذا الطبق على الطبق الذي عاد من الممكن ملاحظته.

113
00:09:04,455 --> 00:09:08,181
عند هذه النقطة، سوف أستعيد الرؤية إلى تلك الحالة المعروضة.

114
00:09:08,181 --> 00:09:13,476
لذلك، يمكن أن تظهر طبقي الجديد الذي جلبته على الشاشة.

115
00:09:13,476 --> 00:09:18,150
مع هذا التغيير، انتقل الآن إلى ملف القالب،

116
00:09:18,150 --> 00:09:22,710
وداخل ملف القالب سأقوم بتطبيق

117
00:09:22,710 --> 00:09:26,366
الرؤية على كل من الطبق هنا.

118
00:09:26,366 --> 00:09:31,160
وبالتالي فإن ديف الأول حيث أنا عرض الطبق سوف

119
00:09:31,160 --> 00:09:35,948
تطبيق, الرؤية الزناد إلى الطبق.

120
00:09:35,948 --> 00:09:39,417
ثم سأقوم بتعيين ذلك يساوي،

121
00:09:42,937 --> 00:09:49,060
الرؤية، وهو المتغير الذي حددته في الشفرة هناك.

122
00:09:49,060 --> 00:09:54,450
الآن، أطبق هذا على الطبق هنا، وأطبق أيضًا نفس الشيء

123
00:09:54,450 --> 00:09:58,530
على div الثاني، حيث أقوم بعرض التعليقات.

124
00:09:59,700 --> 00:10:00,837
وهذا كل شيء.

125
00:10:00,837 --> 00:10:05,902
لذلك اسمحوا لي أن حفظ جميع التغييرات، وبعد ذلك سنذهب

126
00:10:05,902 --> 00:10:11,213
ونلقي نظرة على كيفية عمل هذه الرسوم المتحركة في مثالنا.

127
00:10:11,213 --> 00:10:15,015
الذهاب إلى المتصفح، والآن أنا عرض لهم القائمة.

128
00:10:15,015 --> 00:10:19,618
اسمحوا لي اختيار واحد من الأطباق ومن ثم الانتقال إلى وجهة نظر من الأطباق هنا.

129
00:10:19,618 --> 00:10:24,336
لذلك عندما يتم عرض الطبق، لاحظ أنه في أي وقت أنتقل من

130
00:10:24,336 --> 00:10:28,432
هذا الطبق إلى الطبق التالي، وذلك عن طريق النقر على اليمين.

131
00:10:28,432 --> 00:10:33,349
ثم يختفي هذا الطبق، ثم عندما يصبح الطبق الجديد متاحًا،

132
00:10:33,349 --> 00:10:37,900
يصبح العرض مرئيًا مرة أخرى ثم يظهر الطبق الجديد.

133
00:10:37,900 --> 00:10:42,210
وبالمثل، يمكنني أن أفعل أكثر من ذلك ثم لاحظ أن الطبق الجديد،

134
00:10:42,210 --> 00:10:46,070
بمجرد أن تصبح المعلومات المتاحة، يصبح مرئيا مرة أخرى.

135
00:10:46,070 --> 00:10:51,890
لذلك هذا هو الانتقال الذي أطبقه في هذا المثال هنا.

136
00:10:51,890 --> 00:11:02,730
لذا بالعودة، يمكنك رؤية نفس السلوك يكرر نفسه مرة أخرى.

137
00:11:02,730 --> 00:11:08,310
يضيف تغيير واجهة المستخدم الصغير هذا الكثير من القيمة إلى الطريقة التي ينظر بها المستخدم إلى تطبيقك.

138
00:11:08,310 --> 00:11:13,520
كما تدرك، هذا لا يضيف الكثير إلى وظائف التطبيق

139
00:11:13,520 --> 00:11:18,690
نفسه، ولكنه يضيف إلى تجربة مستخدم أفضل.

140
00:11:18,690 --> 00:11:23,625
وهذا هو المكان الذي نطبق فيه الرسوم المتحركة بحكمة داخل

141
00:11:23,625 --> 00:11:28,658
تطبيقنا لجعل تجربة مستخدم معينة أكثر معنى

142
00:11:28,658 --> 00:11:33,302
للمستخدم الذي يقوم بعرض تطبيق Angular الخاص

143
00:11:33,302 --> 00:11:39,421
بك، أو عرض تطبيقك المحمول، والذي سنراه في الدورات اللاحقة.

144
00:11:39,421 --> 00:11:43,957
هذا يكمل هذا التمرين على الرسوم المتحركة.

145
00:11:43,957 --> 00:11:48,939
سنواصل الاستكشافات للرسوم المتحركة في ذلك

146
00:11:48,939 --> 00:11:53,082
الجزء الثاني من التمرين الذي يأتي مباشرة بعد هذا.

147
00:11:53,082 --> 00:11:57,513
هذا هو الوقت المناسب بالنسبة لك للقيام تعليق Git مع الرسوم المتحركة الرسالة،

148
00:11:57,513 --> 00:11:58,164
الجزء الأول.

149
00:11:58,164 --> 00:12:03,927
[ موسيقى]