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

2
00:00:04,660 --> 00:00:09,853
دعونا الحصول على لمحة موجزة عن دعم الرسوم المتحركة في الزاوي قبل أن نذهب

3
00:00:09,853 --> 00:00:15,820
ومحاولة يدنا في الواقع تنفيذ بعض الرسوم المتحركة في التطبيق الزاوي لدينا.

4
00:00:17,010 --> 00:00:18,290
كما تدرك،

5
00:00:18,290 --> 00:00:23,800
الرسوم المتحركة نفسها لا تضيف إلى وظيفة تطبيق Angular الخاص بك.

6
00:00:23,800 --> 00:00:27,210
ثم السؤال الذي يطرح نفسه، لماذا استخدام الرسوم المتحركة؟

7
00:00:27,210 --> 00:00:31,420
الآن إذا نظرتم إليها من تجربة

8
00:00:31,420 --> 00:00:36,250
المستخدم، أو منظور تصميم واجهة المستخدم، ثم تبدأ في رؤية أن الرسوم المتحركة

9
00:00:36,250 --> 00:00:40,860
لها معنى والغرض لاستخدامها في التطبيق.

10
00:00:41,860 --> 00:00:46,360
إعطاء ردود الفعل البصرية للمستخدم حول

11
00:00:46,360 --> 00:00:49,560
الأشياء التي تحدث داخل التطبيق الزاوي الخاص بك.

12
00:00:49,560 --> 00:00:54,920
لذلك يمكن أن يكون لديك تطبيق خالية تماما من الرسوم المتحركة

13
00:00:54,920 --> 00:00:58,050
وأنه لا يزال يوفر نفس مجموعة من الوظائف.

14
00:00:58,050 --> 00:01:00,710
لذلك هذا شيء يجب أن نضعه في اعتبارنا

15
00:01:00,710 --> 00:01:05,280
عندما نقدم الرسوم المتحركة في تطبيقنا الزاوي.

16
00:01:05,280 --> 00:01:12,150
الرسوم المتحركة ليست ضرورية أو مطلوبة

17
00:01:12,150 --> 00:01:18,940
ولكنها تضيف هذا التوابل الصغيرة إلى التطبيق الزاوي الخاص بك، إذا كنت تبقي هذا الرأي في

18
00:01:18,940 --> 00:01:24,090
ذهنك ثم سوف تقترب من الرسوم المتحركة من منظور مختلف تماما.

19
00:01:25,380 --> 00:01:31,890
انها مثل عدم إضافة الكثير من الملح في الأطباق الخاصة بك فقط لأن الملح يضيف طعم.

20
00:01:33,030 --> 00:01:36,340
إلى الكثير من الملح أيضا يفسد الطبق الخاص بك.

21
00:01:36,340 --> 00:01:38,630
نفس الشيء مع الرسوم المتحركة أيضا.

22
00:01:38,630 --> 00:01:42,370
الكثير من الرسوم المتحركة وينتهي بك الأمر مع مستخدم الخلط.

23
00:01:43,400 --> 00:01:48,790
ولكن الرسوم المتحركة، وأضاف في بمهارة لإعطاء اقتراحات للمستخدمين، أو

24
00:01:48,790 --> 00:01:55,545
إعطاء ردود فعل مرئية للمستخدمين، إضافة الكثير من القيمة إلى التطبيق الزاوي الخاص بك.

25
00:01:55,545 --> 00:02:00,295
الآن لحسن الحظ، فإن الإطار المادي الزاوي الذي

26
00:02:00,295 --> 00:02:05,825
نستخدمه بالفعل داخل تطبيقنا الزاوي، يأتي مع مجموعة من الرسوم المتحركة الخاصة به.

27
00:02:05,825 --> 00:02:10,074
في الواقع، هذا هو السبب في أننا أدرجنا وحدة الرسوم المتحركة للمتصفح.

28
00:02:10,074 --> 00:02:15,060
في تطبيقنا الزاوي الحق في البداية لأن

29
00:02:15,060 --> 00:02:19,950
المادة الزاوي تستفيد بالفعل من دعم الرسوم المتحركة الذي

30
00:02:21,350 --> 00:02:25,445
يوفر الزاوي من خلال أو انها الرسوم المتحركة.

31
00:02:25,445 --> 00:02:30,135
لذلك

32
00:02:30,135 --> 00:02:35,840
تستخدم مكتبة المواد الزاوي الرسوم المتحركة المقترحة التي تأتي مع تصميم المواد.

33
00:02:35,840 --> 00:02:38,700
أشياء مثل، على سبيل المثال، عند النقر على زر،

34
00:02:38,700 --> 00:02:43,980
تأثيرات التموج التي تراها على الزر والتضخم الدقيق،

35
00:02:43,980 --> 00:02:50,220
وتقلص أجزاء مختلفة من وجهة نظرك، وهلم جرا.

36
00:02:50,220 --> 00:02:55,010
هذه هي بالفعل مقترحة من قبل نهج تصميم المواد،

37
00:02:55,010 --> 00:02:58,840
وحتى المواد الزاوي تعتمد بالفعل العديد من تلك الأشياء.

38
00:02:58,840 --> 00:03:03,140
لذلك حتى من دون بذل جهد صريح،

39
00:03:03,140 --> 00:03:08,100
يمكنك تلقائيا الحصول على بعض الرسوم المتحركة المطلوبة في

40
00:03:08,100 --> 00:03:11,950
التطبيق الزاوي الخاص بك فقط باستخدام المواد الزاوي.

41
00:03:11,950 --> 00:03:17,640
ولكن لنفترض أنك تريد إضافة التوابل الخاصة بك إلى المزيج.

42
00:03:17,640 --> 00:03:21,030
ثم، كيف تقترب من الرسوم المتحركة في الزاوي؟

43
00:03:21,030 --> 00:03:25,510
هذا ما سننظر إليه بسرعة في هذه المحاضرة.

44
00:03:25,510 --> 00:03:31,091
ثم ننتقل إلى التمرين حيث سنقوم بتنفيذ فو ومعرفة ما إذا كنا

45
00:03:31,091 --> 00:03:37,402
منطقيين أو إذا كانت تحدث فرقًا في الطريقة التي تنظر بها إلى تطبيق Angular الخاص بك.

46
00:03:39,145 --> 00:03:42,053
الفكرة وراء دعم Angular

47
00:03:42,053 --> 00:03:46,723
للرسوم المتحركة هي أنها تمكنك من بناء الرسوم المتحركة مع

48
00:03:46,723 --> 00:03:52,270
الأداء الأصلي القريب لما ستحصل عليه مع الرسوم المتحركة CSS النقي.

49
00:03:52,270 --> 00:03:55,300
الآن قد تتساءل على الفور في عقلك،

50
00:03:55,300 --> 00:03:57,690
لماذا لا تستخدم فقط الرسوم المتحركة CSS النقي؟

51
00:03:57,690 --> 00:04:01,810
في الواقع، يمكنك القيام بذلك أيضًا، ولكن لا يوجد شيء يمنعك من استخدام

52
00:04:01,810 --> 00:04:04,930
الرسوم المتحركة CSS النقية داخل تطبيق Angular الخاص بك.

53
00:04:04,930 --> 00:04:09,880
ولكن ميزة الاستفادة من

54
00:04:09,880 --> 00:04:14,660
النهج الزاوي لإدخال الرسوم المتحركة هو أن الزاوي،

55
00:04:14,660 --> 00:04:19,280
أولا وقبل كل شيء، يعزز الدعم من واجهة برمجة تطبيقات الرسوم المتحركة على شبكة الإنترنت التي يتم

56
00:04:19,280 --> 00:04:24,620
دعمها في الإصدارات الأكثر حداثة من كل تلك المتصفحات.

57
00:04:24,620 --> 00:04:29,540
الآن، إذا كان إصدار المتصفح الخاص بك يدعم بالفعل واجهة برمجة تطبيقات الويب المتحركة،

58
00:04:29,540 --> 00:04:32,380
فإن Angular ببساطة الاستفادة من بداية

59
00:04:32,380 --> 00:04:36,640
لدعم الرسوم المتحركة التي ستضمينها في تطبيق Angular الخاص بك.

60
00:04:36,640 --> 00:04:39,970
إذا لم يكن كذلك، فأنت بحاجة إلى استخدام polyfill

61
00:04:39,970 --> 00:04:45,270
يسمى web-animations.min.js في تطبيق Angular الخاص بك.

62
00:04:45,270 --> 00:04:49,190
في التمارين، سنبدأ بافتراض أننا نستهدف

63
00:04:49,190 --> 00:04:53,355
المتصفحات الحديثة، لذلك أنا لا أقوم بتضمين polyfill بشكل صريح.

64
00:04:53,355 --> 00:04:59,625
إذا قررت القيام بذلك، فإن وثائق الرسوم المتحركة الزاوي

65
00:04:59,625 --> 00:05:05,395
تخبرك صراحة عن كيفية ملء ذلك لاستهداف المتصفحات القديمة.

66
00:05:05,395 --> 00:05:07,425
مرة أخرى، والعودة إلى السؤال،

67
00:05:07,425 --> 00:05:13,440
لماذا لا تستخدم الرسوم المتحركة CSS النقي بدلا من استخدام الرسوم المتحركة الزاوي؟

68
00:05:13,440 --> 00:05:15,850
الآن هذا هو المكان

69
00:05:15,850 --> 00:05:20,560
الذي تأتي فيه ميزة استخدام الرسوم المتحركة الزاوي داخل التطبيق الخاص بك في المقدمة.

70
00:05:20,560 --> 00:05:24,710
حقيقة أن الرسوم المتحركة الزاوي مقترنة بإحكام

71
00:05:24,710 --> 00:05:28,710
مع التعليمات البرمجية التي تكتبها لتطبيق Angular الخاص بك.

72
00:05:28,710 --> 00:05:32,740
وبالتالي، يمكنك تشغيل العديد من هذه الرسوم المتحركة المرتبطة

73
00:05:32,740 --> 00:05:37,330
مباشرة إلى الطريقة التي يتطور بها تطبيقك الزاوي،

74
00:05:37,330 --> 00:05:40,560
وما يحدث داخل التطبيق الزاوي الخاص بك.

75
00:05:40,560 --> 00:05:45,610
حتى تتمكن من ربطه بدورة حياة مكوناتك.

76
00:05:45,610 --> 00:05:50,356
يمكنك ربطه في المراحل المختلفة لكيفية تغيير العرض نفسه

77
00:05:50,356 --> 00:05:53,290
أثناء عرض العرض.

78
00:05:53,290 --> 00:06:00,130
وهكذا فإن هذه الميزة التي تحصل عليها من استخدام مكتبة الرسوم المتحركة الزاوي،

79
00:06:00,130 --> 00:06:05,870
بدلاً من الرسوم المتحركة CSS النقية، هي شيء يستحق النظر فيه.

80
00:06:05,870 --> 00:06:09,140
كيف نقترب من الرسوم المتحركة في Angular؟

81
00:06:09,140 --> 00:06:12,730
يتم بناء الرسوم المتحركة نفسها حول الدول

82
00:06:12,730 --> 00:06:17,850
والتحولات بين الدول في إطار Angular، لذلك

83
00:06:17,850 --> 00:06:22,440
نحدد حالات مختلفة، يمكن أن تكون الدولة أي شيء

84
00:06:22,440 --> 00:06:27,500
ولكنك تريد تعريفها كحالة من منظور الرسوم المتحركة.

85
00:06:27,500 --> 00:06:31,290
أي تغيير في الحالة التي تريد أن تسبب

86
00:06:31,290 --> 00:06:35,330
يمكن أن يؤدي إلى تأثير الرسوم المتحركة لتأتي إلى الصورة.

87
00:06:35,330 --> 00:06:39,840
لذا فإن التحولات على طول الحالات ستؤدي إلى سلوك الرسوم المتحركة

88
00:06:39,840 --> 00:06:41,550
داخل التطبيق الزاوي الخاص بك.

89
00:06:41,550 --> 00:06:46,080
كما سنرى في الشريحة التالية حيث سأريكم مثالا على

90
00:06:46,080 --> 00:06:50,468
كيفية استخدام الأشرطة والتحولات لتحريك الرسوم المتحركة.

91
00:06:50,468 --> 00:06:56,260
لذلك

92
00:06:56,260 --> 00:07:01,420
يتم تعريف جانب الرسوم المتحركة من التطبيق الزاوي الخاص بك داخل ديكور المكون الذي تستخدمه داخل المكونات الخاصة بك.

93
00:07:01,420 --> 00:07:06,140
لذلك يحتوي الديكور المكون على صور متحركة ألوان الخاصية التي

94
00:07:06,140 --> 00:07:11,600
ستستخدمها لتحديد مشغلات القيم للرسوم المتحركة الخاصة بك.

95
00:07:11,600 --> 00:07:13,650
لذا إستخدمت كلمة الزناد

96
00:07:13,650 --> 00:07:17,400
في التدريبات، سترى كيف سنقوم بتنفيذ مشغلات

97
00:07:17,400 --> 00:07:22,370
للرسوم المتحركة وكيف سنقوم بتطبيق المشغلات على عناصر القالب المختلفة،

98
00:07:22,370 --> 00:07:27,520
ومن ثم تشغيل تلك الرسوم المتحركة في ظل ظروف معينة.

99
00:07:27,520 --> 00:07:31,680
وبالإضافة إلى ذلك، عندما تحتاج إلى استخدام الرسوم المتحركة داخل

100
00:07:31,680 --> 00:07:36,550
تطبيق Angular الخاص بك، أولا وقبل كل شيء، تحتاج إلى استيراد وحدة الرسوم المتحركة للمتصفح.

101
00:07:36,550 --> 00:07:41,330
لقد فعلنا ذلك بالفعل في أول تمرين لدينا لأن

102
00:07:41,330 --> 00:07:45,840
وحدة الرسوم المتحركة للمتصفح كانت مطلوبة لدعم المواد الزاوي.

103
00:07:45,840 --> 00:07:50,269
الآن، بالإضافة إلى ذلك، عندما تقوم بتنفيذ الرسوم المتحركة داخل المكونات الخاصة بك.

104
00:07:51,280 --> 00:07:55,840
ثم ستحتاج إلى مساعدة فئات نصف قطرها مثل الزناد، والدولة،

105
00:07:55,840 --> 00:07:56,610
والأسلوب، والتحريك،

106
00:07:56,610 --> 00:08:01,550
والانتقال، والتي يجب استيرادها من مكتبة الرسوم المتحركة الزاوي.

107
00:08:01,550 --> 00:08:08,010
وسنفعل ذلك في كل مكون يتطلب استخدام الرسوم المتحركة.

108
00:08:08,010 --> 00:08:12,930
كما ذكرت في الشريحة السابقة، فإن سلوك الرسوم المتحركة في

109
00:08:12,930 --> 00:08:17,960
تطبيق Angular الخاص بك يدور حول الحالات والتحولات بين الدول.

110
00:08:17,960 --> 00:08:21,470
يمكن أن تكون الدول أي شيء تعرفه كدولة.

111
00:08:21,470 --> 00:08:26,280
كما سترى في المثال الذي يلي في التمرين الأول بعد هذه

112
00:08:26,280 --> 00:08:30,650
المحاضرة، فقد تم تعريف حالتين تسميان ومخفيتان.

113
00:08:30,650 --> 00:08:33,600
من اسم الدولة

114
00:08:33,600 --> 00:08:37,920
تبدأ تلقائيا لتخمين ما تنطوي عليه هاتان الدولتان.

115
00:08:37,920 --> 00:08:42,800
الآن عند الانتقال من الحالة المعروضة إلى الحالة المخفية، فإن الانتقال

116
00:08:42,800 --> 00:08:46,970
من الحالة المعروضة إلى الحالة المخفية سيؤدي إلى نوع من الرسوم المتحركة.

117
00:08:46,970 --> 00:08:50,780
لذلك ربما ستخفي عنصرًا داخل

118
00:08:52,170 --> 00:08:56,360
طريقة العرض الخاصة بك عن طريق تغيير

119
00:08:56,360 --> 00:09:00,240
عتامة العنصر، مما يعني مدى شفافية العنصر وتعتيم

120
00:09:00,240 --> 00:09:05,260
أحد يعني أن العنصر غير شفاف تمامًا ومرئي على الشاشة.

121
00:09:05,260 --> 00:09:10,360
إذا قمت بتعيين العتامة إلى الصفر العنصر يختفي تماما من الشاشة.

122
00:09:10,360 --> 00:09:13,260
نحن لا نزيل هذا العنصر

123
00:09:13,260 --> 00:09:18,110
من خلال إخفاء هذا العنصر ببساطة عن طريق تغيير عتامة.

124
00:09:18,110 --> 00:09:21,350
لذلك، بهذه الطريقة سيكون شيء يمكنك تشغيله.

125
00:09:21,350 --> 00:09:24,070
وبالمثل، يمكنك تغيير حجم عنصر.

126
00:09:24,070 --> 00:09:30,740
يمكنك توسيع أو التعاقد على حجم عنصر عن طريق تطبيق تحويل إلى

127
00:09:30,740 --> 00:09:36,470
خاصية العنصر هذه باستخدام تحويل المقياس للعنصر.

128
00:09:36,470 --> 00:09:41,190
و سنرى أمثلة كما قلت في الممارسة التالية.

129
00:09:41,190 --> 00:09:45,670
لذا فإن جميع الرسوم المتحركة التي تصفها

130
00:09:45,670 --> 00:09:49,590
داخل تطبيق Angular الخاص بك داخل توجيه المكون باستخدام خاصية الرسوم المتحركة

131
00:09:49,590 --> 00:09:54,620
ستدور حول الحالات والتحولات بين الحالات.

132
00:09:54,620 --> 00:09:58,350
عندما تتحدث عن الحالات والتحولات، هناك عدد قليل من

133
00:09:58,350 --> 00:10:03,400
الحالات الخاصة التي نحتاج إلى النظر فيها عندما نحدد هذه التحولات.

134
00:10:03,400 --> 00:10:06,810
واحدة من هذه الدول تسمى كدولة باطلة.

135
00:10:06,810 --> 00:10:13,240
والعنصر الذي ليس على الشاشة.

136
00:10:13,240 --> 00:10:15,880
سيتم اعتبار عنصر أو عرض الجسيمات التي لا تعلق على وجهة النظر لتكون في حالة الفراغ.

137
00:10:15,880 --> 00:10:18,510
لذلك عندما يظهر العنصر في العرض،

138
00:10:18,510 --> 00:10:23,940
أنه إذا تم إرفاقه على سبيل المثال، فإن العنصر ينتقل من

139
00:10:23,940 --> 00:10:29,590
حالة الفراغ إلى واحدة من الحالات الحالية لهذا العنصر.

140
00:10:29,590 --> 00:10:30,410
لذلك في هذه الحالة،

141
00:10:30,410 --> 00:10:35,680
يمكنك تحديد الانتقال من الانتقال من الفراغ إلى حالة معينة.

142
00:10:35,680 --> 00:10:40,580
وبالمثل، لديك أيضًا دولة أخرى تسمى حالة أحرف بدل أو

143
00:10:40,580 --> 00:10:45,870
يتم تعريفها بواسطة النجم، مما يعني أنك لا تهتم بما هو عليه.

144
00:10:45,870 --> 00:10:48,464
حتى إذا كنت بحاجة إلى تحديد انتقال يمكنك أن تقول،

145
00:10:48,464 --> 00:10:52,832
إذا كنت تسير من حالة فارغة إلى حالة نجمة، وهذا يعني من حالة باطلة إلى أي

146
00:10:52,832 --> 00:10:58,260
دولة أخرى أن تنتقل ثم يمكنك تطبيق تحول معين.

147
00:10:58,260 --> 00:11:02,970
لذلك هذه هي الطريقتين الخاصتين لتحديد حالات معينة

148
00:11:02,970 --> 00:11:07,130
عند تحديد الرسوم المتحركة الخاصة بك داخل ديكور المكون. على

149
00:11:08,570 --> 00:11:13,430
وجه الخصوص، هناك طريقتان

150
00:11:13,430 --> 00:11:18,410
لوصف التحولات التي هي ذات أهمية خاصة بالطبع.

151
00:11:18,410 --> 00:11:23,050
يمكن وصف الانتقال من حالة الفراغ إلى أي حالة ببساطة باستخدام

152
00:11:23,050 --> 00:11:27,876
إدخال القولون، بدلاً من قول نجمة السهم الفارغة.

153
00:11:27,876 --> 00:11:32,520
لذلك سترى أننا سوف تستخدم السهم

154
00:11:32,520 --> 00:11:34,610
لوصف التحولات بين الدولة.

155
00:11:34,610 --> 00:11:40,540
لذلك هذا هو بناء الجملة الذي سوف تراني أستخدمه عند بناء التحولات.

156
00:11:40,540 --> 00:11:41,260
وبالمثل،

157
00:11:41,260 --> 00:11:46,700
لذلك يمكن وصف الفراغ لأي حالة أخرى ببساطة باستخدام إدخال القولون.

158
00:11:46,700 --> 00:11:50,060
مما يعني أن هذا العرض يدخل

159
00:11:50,060 --> 00:11:52,760
في العرض الذي يتم وضعه على الشاشة.

160
00:11:52,760 --> 00:11:56,190
وبالمثل، الانتقال من أي حالة إلى حالة الفراغ،

161
00:11:56,190 --> 00:12:00,130
مما يعني أنك تقوم بإزالة هذا العنصر من العرض.

162
00:12:00,130 --> 00:12:05,510
وهذا سيكون أيضا، يمكن تحديده على أنه إجازة القولون،

163
00:12:05,510 --> 00:12:09,400
وهذا يعني أن هذا العنصر هو ترك من وجهة نظر معينة.

164
00:12:09,400 --> 00:12:13,860
لذلك سترى لي باستخدام إدخال القولون والقولون ترك أيضا حيث وصفت

165
00:12:14,970 --> 00:12:21,130
التحولات في التمرين الثاني الذي ستراه في هذا الدرس.

166
00:12:21,130 --> 00:12:26,945
لذلك، مع هذا الفهم السريع للرسوم المتحركة في الزاوي.

167
00:12:26,945 --> 00:12:29,935
دعونا ننظر في كيفية كتابة التعليمات البرمجية في الواقع.

168
00:12:29,935 --> 00:12:35,873
وللقيام بذلك، سننتقل إلى التدريبات حيث نوضح لك،

169
00:12:35,873 --> 00:12:40,494
كيف نستخدم هذه المعرفة التي اكتسبناها للتو حول كيفية

170
00:12:40,494 --> 00:12:45,777
وصف الرسوم المتحركة بالزاوية لكتابة رمز تخطي النوع

171
00:12:45,777 --> 00:12:49,458
لبناء وتطبيق الرسوم المتحركة

172
00:12:49,458 --> 00:12:53,830
لعناصر مختلفة ضمن وجهات نظرنا مكوناتنا.

173
00:12:53,830 --> 00:13:00,309
[ موسيقى]