287 lines
25 KiB
Markdown
287 lines
25 KiB
Markdown
---
|
||
title: Animations
|
||
localeTitle: الرسوم المتحركة
|
||
---
|
||
# الرسوم المتحركة
|
||
|
||
#### التحفيز
|
||
|
||
تستخدم مكونات الويب الحديثة بشكل متكرر الرسوم المتحركة. مطوري الأقمشة Cascading Style-sheets (CSS) مع الأدوات اللازمة لإنشاء رسوم متحركة رائعة. نقل الملكية ، الرسوم المتحركة المسماة بشكل فريد ، keyframes متعددة الأجزاء ممكنة مع CSS. الاحتمالات المتحركة لا حصر لها بفضل CSS.
|
||
|
||
في تطبيق ويب حديث ، تركز الحركة على انتباه المستخدم. تسعى الرسوم المتحركة الجيدة لتوجيه انتباه المستخدم بطريقة مرضية ومثمرة. لا ينبغي أن تكون الرسوم المتحركة مزعجة للمستخدم.
|
||
|
||
تقدم الرسوم المتحركة تعليقات على شكل حركة. أنها تظهر للمستخدم أن التطبيق يتعامل بنشاط مع طلباتهم. شيء بسيط مثل الضغط على زر المرئي أو محمل عندما يجب تحميل التطبيق يجذب انتباه المستخدم.
|
||
|
||
تستمر الرسوم المتحركة في التزايد بشكل أكبر في حالة Angular. تطور Google Angular مع الترويج لفلسفة التصميم متعدد الأبعاد. وتشجع واجهات المستخدم موجزة (UI) تستكمل مع ردود فعل المستخدم الرسوم المتحركة. يجعل التطبيقات على شبكة الإنترنت يشعر إلى حد ما على قيد الحياة وممتعة للاستخدام.
|
||
|
||
يقوم مجتمع Angular بتطوير مكتبة القطعة الأساسية المسماة [Material2](https://github.com/angular/material2) . يضيف هذا المشروع مجموعة متنوعة من وحدات الواجهة إلى Angular. معظمها ميزة الرسوم المتحركة. لفهم كيفية عملها ، توصي هذه المقالة بدراسة رسوم CSS المتحركة قبل القراءة.
|
||
|
||
الرسوم المتحركة الزاوالية هي النسخة المبسطة لإطار العمل الذي يوفره CSS أصلاً. CSS هي التكنولوجيا الأساسية للرسوم المتحركة الزاوي التي تحدث في متصفح الويب. CSS خارج نطاق هذه المقالة بالرغم من ذلك. حان الوقت لمعالجة الرسوم المتحركة الزاوي وجها لوجه.
|
||
|
||
#### إعداد الرسوم المتحركة
|
||
|
||
قبل الرسوم المتحركة ، يجب تضمين `BrowserAnimationsModule` في مصفوفة واردات وحدة الجذر. كان متوفرا من `@angular/platform-browser/animations` . هذا NgModule يضمن الرسوم المتحركة تعمل لمنصة معينة. تفترض هذه المقالة مستعرض الويب القياسي لكل مثال.
|
||
|
||
تعلن الرسوم المتحركة الزاوية داخل البيانات الوصفية لـ `@Component` . `@Component` فئة لتمييزها كمكون إلى Angular. تحتوي بيانات التعريف الخاصة به على تكوينات المكون بما في ذلك `animations: []` الحقل. يمثل كل عنصر صفيف من هذا الحقل مشغل `AnimationTriggerMetadata` ( `AnimationTriggerMetadata` ).
|
||
|
||
الرسوم المتحركة حصرية لمكون مضيفهم عبر البيانات الوصفية للمُصممة. يمكن استخدام الرسوم المتحركة فقط في قالب مكون المضيف. الرسوم المتحركة لا ترث لأطفال المكون. هناك عمل سهل حول هذا.
|
||
|
||
يمكنك دائمًا إنشاء ملف منفصل يصدر صفيفًا. يمكن لأي فئة مكون استيراد هذا الصفيف من أعلى ملف المضيف الخاص به. بعد ذلك ، ينتقل الرمز المميز للمصفوفة المدرج إلى البيانات الوصفية للرسوم المتحركة الخاصة بالمكون. كرر هذه العملية لأي مكونات أخرى تتطلب نفس الصفيف في بياناتها المتحركة.
|
||
|
||
يتيح لك إسقاط المحتوى تطبيق رسوم متحركة على محتوى DOM للمكون أ (نموذج كائن المستند). يمكن للمكون "ب" الذي يلف هذا المحتوى DOM تقديم المحتويات في قالب خاص به. بمجرد القيام بذلك ، لا تنفي الحركات المكونة من A. يشتمل المكون B على الرسوم المتحركة لـ A من خلال عرض المحتوى.
|
||
|
||
حسنا. أنت تعرف كيفية إعداد الرسوم المتحركة ومكان إعلانها. التنفيذ هو الخطوة التالية.
|
||
|
||
#### طرق الرسوم المتحركة
|
||
|
||
تستخدم الرسوم المتحركة ذات الزوايا سلسلة من استدعاءات الأسلوب التي يمكن استيرادها من `@angular/animations` . يبدأ كل عنصر من عناصر مصفوفة الرسوم المتحركة لـ `@Component` كطريقة واحدة. تتكشف حججها كسلسلة من مكالمات الأسلوب الأعلى. تعرض القائمة التالية بعض الطرق المستخدمة لإنشاء صور متحركة Angular.
|
||
|
||
* `trigger(selector: string, AnimationMetadata[])`
|
||
|
||
إرجاع `AnimationTriggerMetadata`
|
||
|
||
* `state(data: string, AnimationStyleMetadata, options?: object)`
|
||
|
||
إرجاع `AnimationStateMetadata`
|
||
|
||
* `style(CSSKeyValues: object)`
|
||
|
||
إرجاع `AnimationStyleMetadata`
|
||
|
||
* `animate(timing: string|number, AnimationStyleMetadata|KeyframesMetadata)`
|
||
|
||
إرجاع `AnimationAnimateMetadata`
|
||
|
||
* `transition(stateChange: string, AnimationMetadata|AnimationMetadata[], options?: object)`
|
||
|
||
إرجاع `AnimationTransitionMetadata`
|
||
|
||
في حين أن هناك بالتأكيد [المزيد من الطرق](https://angular.io/api/animations) للاختيار من بينها ، فإن هذه الأساليب الخمسة تتعامل مع الأساسيات. محاولة فهم هذه الأساليب الأساسية كقائمة لا يساعد كثيرا. التوضيحات التي تحدث عن طريق التعداد النقطي متبوعة بمثال سوف يكون لها معنى أفضل.
|
||
|
||
##### المشغل (محدد: سلسلة ، الرسوم المتحركة \[\])
|
||
|
||
يقوم أسلوب `trigger(...)` بتغليف عنصر واحد من الرسوم المتحركة داخل مصفوفة الرسوم المتحركة.
|
||
|
||
`selector: string` الوسيطة الأول للطريقة `selector: string` تتطابق `selector: string` مع سمة العضو `[@selector]` . يعمل مثل توجيه السمة في قالب المكون. وهو يربط عنصر الرسوم المتحركة بالقالب من خلال محدد السمة.
|
||
|
||
الوسيطة الثانية هي مصفوفة تحتوي على قائمة بطرق الرسوم المتحركة المطبقة. يحتفظ `trigger(...)` بالكلية في صفيف واحد.
|
||
|
||
##### الحالة (البيانات: السلسلة ، AnimationStyleMetadata ، الخيارات ؟: الكائن)
|
||
|
||
`state(...)` الحالة النهائية للرسوم المتحركة. فهي تطبق قائمة بخصائص CSS للعنصر المستهدف بعد انتهاء الرسوم المتحركة. هذا هو عنوان CSS للعنصر المتحرك يطابق دقة الصورة المتحركة.
|
||
|
||
تتطابق الوسيطة الأولى مع قيمة البيانات المرتبطة بربط الرسوم المتحركة. وهذا يعني أن القيمة المنضمة إلى `[@selector]` في القالب تطابق مع الحالة الأولى `state(...)` . تحدد قيمة البيانات الحالة النهائية. يحدد تغيير القيمة وسائل الرسوم المتحركة (انظر `transition(...)` ).
|
||
|
||
تستضيف الوسيطة الثانية أنماط CSS التي تنطبق على عنصر ما بعد الحركة. يتم تمرير الأنماط من خلال استدعاء `style(...)` وتمريره إلى وسيطة الأنماط المرغوبة ككائن.
|
||
|
||
تشغل قائمة الخيارات بشكل اختياري الوسيطة الثالثة. يجب أن تظل خيارات `state(...)` الافتراضية `state(...)` دون تغيير ما لم يكن هناك سبب آخر.
|
||
|
||
##### النمط (CSSKeyValues: الكائن)
|
||
|
||
ربما لاحظت `AnimationStyleMetadata` عدة مرات في القائمة السابقة. إرجاع مكون `style(...)` هذا النوع الدقيق من البيانات التعريفية. أينما تطبق أنماط CSS ، يجب استدعاء `style(...)` . كائن يحتوي على أنماط CSS يدور حول وسيطته.
|
||
|
||
وبطبيعة الحال ، فإن الأنماط المتحركة في CSS تتحول إلى `style(...)` الزاوي `style(...)` . منح ، لا شيء مستحيل ل CSS يصبح فجأة ممكن مع الرسوم المتحركة Angular.
|
||
|
||
##### تحريك (توقيت: string | number، AnimationStyleMetadata | AnimationKeyframesMetadata)
|
||
|
||
تقبل الدالة `animate(...)` تعبير توقيت كوسيطة الأولى الخاصة به. هذه الوسيطة الأوقات ، و paces ، و / أو يؤخر الرسوم المتحركة للطريقة. تقبل هذه الوسيطة إما رقم أو تعبير سلسلة. وأوضح التنسيق [هنا](https://angular.io/api/animations/animate#usage) .
|
||
|
||
الوسيطة الثانية من الحركة `animate(...)` هي خاصية CSS تستدعي الرسوم المتحركة. هذا يأخذ شكل `style(...)` الذي إرجاع `AnimationStyleMetadata` . فكر في الحركة `animate(...)` كالطريقة التي تبدأ الرسوم المتحركة.
|
||
|
||
يمكن أيضًا تطبيق سلسلة من الإطارات المفتاحية على الوسيطة الثانية. الإطارات الأساسية هي خيار أكثر تقدمًا تشرحه هذه المقالة لاحقًا. إطارات مفتاحية تميز الأقسام المختلفة من الرسوم المتحركة.
|
||
|
||
قد لا تتلقى `animate(...)` وسيطة ثانية. في هذه الحالة ، لا ينطبق توقيت الرسوم المتحركة للطريقة إلا على CSS المنعكسة في أساليب `state(...)` . تغييرات الخاصية في حالة المشغل `state(...)` سوف تحرك.
|
||
|
||
##### الانتقال (changExpr: string، AnimationMetadata | AnimationMetadata \[\]، options ؟: object)
|
||
|
||
تبدأ `animate(...)` رسوم متحركة بينما يحدد `transition(...)` أي رسوم متحركة تبدأ.
|
||
|
||
تتكون الوسيطة الأولى من شكل فريد للبنية الدقيقة. يدل على حدوث تغيير في الحالة (أو التغيير في البيانات). تحدد البيانات المرتبطة بربط رسوم القالب ( `[selector]="value"` ) هذا التعبير. يشرح القسم التالي بعنوان "حالة الرسوم المتحركة" هذا المفهوم أكثر قليلاً.
|
||
|
||
تتضمن الوسيطة الثانية من `transition(...)` `AnimationMetadata` (تم إرجاعها بواسطة `animate(...)` ). تقبل الوسيطة إما مصفوفة `AnimationMetadata` أو نسخة واحدة.
|
||
|
||
تتطابق قيمة الوسيطة الأولى مع قيمة البيانات المرتبطة في القالب ( `[selector]="value"` ). في حالة حدوث مطابقة كاملة ، يتم تقييم الحجة بنجاح. ثم تبدأ الوسيطة الثانية في رسم متحرك استجابة لنجاح الأول.
|
||
|
||
تشغل قائمة الخيارات بشكل اختياري الوسيطة الثالثة. يجب أن تبقى خيارات `transition(...)` الافتراضية `transition(...)` دون تغيير ما لم يكن هناك سبب آخر.
|
||
|
||
##### مثال للرسوم المتحركة
|
||
|
||
``import { Component, OnInit } from '@angular/core';
|
||
import { trigger, state, style, animate, transition } from '@angular/animations';
|
||
|
||
@Component({
|
||
selector: 'app-example',
|
||
template: `
|
||
<h3>Click the button to change its color!</h3>
|
||
<button (click)="toggleIsCorrect()" // event binding
|
||
[@toggleClick]="isGreen">Toggle Me!</button> // animation binding
|
||
`,
|
||
animations: [ // metadata array
|
||
trigger('toggleClick', [ // trigger block
|
||
state('true', style({ // final CSS following animation
|
||
backgroundColor: 'green'
|
||
})),
|
||
state('false', style({
|
||
backgroundColor: 'red'
|
||
})),
|
||
transition('true => false', animate('1000ms linear')), // animation timing
|
||
transition('false => true', animate('1000ms linear'))
|
||
])
|
||
] // end of trigger block
|
||
})
|
||
export class ExampleComponent {
|
||
isGreen: string = 'true';
|
||
|
||
toggleIsCorrect() {
|
||
this.isGreen = this.isGreen === 'true' ? 'false' : 'true'; // change in data-bound value
|
||
}
|
||
}
|
||
``
|
||
|
||
يقوم المثال أعلاه بإجراء مبادلة ألوان بسيطة مع كل نقرة زر. وبطبيعة الحال ، فإن اللون ينتقل بسرعة في الخبو الخطي حسب `animate('1000ms linear')` . `[@toggleClick]` الرسم المتحرك مع الزر عن طريق مطابقة الوسيطة الأولى من `trigger(...)` إلى ربط الرسوم المتحركة `[@toggleClick]` .
|
||
|
||
ربط الربط بقيمة `isGreen` من فئة المكون. تحدد هذه القيمة اللون الناتج كما تم تعيينه بواسطة طريقتين `style(...)` داخل كتلة `trigger(...)` . يكون ارتباط الصور المتحرك في اتجاه واحد بحيث تقوم التغييرات في `isGreen` في فئة المكون بإعلام ارتباط القالب. وهذا هو ، ارتباط الرسوم المتحركة `[@toggleClick]` .
|
||
|
||
يحتوي عنصر الزر في القالب أيضًا على حدث `click` مرتبط به. يؤدي النقر فوق الزر إلى `isGreen` القيم. هذا يغير بيانات فئة المكون. يلتقط رابط الرسوم المتحركة هذا الأمر ويستدعي أسلوب `trigger(...)` المطابقة `trigger(...)` . يقع `trigger(...)` داخل مصفوفة الرسوم المتحركة للبيانات الوصفية للمكون. يحدث شيئان عند استدعاء الزناد.
|
||
|
||
التواجد الأول يتعلق بطريقتين `state(...)` . تتطابق القيمة الجديدة لـ `isGreen` مع أول وسيطة في `state(...)` . بمجرد أن تتطابق ، يتم تطبيق أنماط CSS `style(...)` على الحالة النهائية لعنصر مضيف الرسوم المتحركة. \`تسري الحالة النهائية بعد كل الرسوم المتحركة.
|
||
|
||
الآن للحدث الثاني. ويقارن تغيير البيانات الذي يستدعي ارتباط الرسوم المتحركة عبر طريقتين `transition(...)` . واحد منهم يطابق التغيير في البيانات إلى أول حجة لها. نقرة الزر الأول الناتجة هي `isGreen` للانتقال من 'true' إلى 'false' ('true => false'). ويعني هذا أن أول أسلوب `transition(...)` ينشط الحجة الثانية.
|
||
|
||
تقوم الوظيفة `animate(...)` المقابلة ببدء عملية `transition(...)` تقييمها بنجاح. يحدد هذا الأسلوب مدة لون الرسوم المتحركة تتلاشى مع سرعة التلاشي. ينفذ الرسوم المتحركة ويتلاشى الزر إلى اللون الأحمر.
|
||
|
||
يمكن أن تحدث هذه العملية أي عدد من المرات بعد النقر فوق زر. سوف `backgroundColor` الزر بين الأخضر والأحمر في الخبو الخطي.
|
||
|
||
#### حالة الرسوم المتحركة
|
||
|
||
يستحق بناء الجملة `transition(...)` دقيقة بالتفصيل. يحدد Angular الرسوم المتحركة وتوقيتها من خلال تقييم هذه البنية. هناك التحولات الدولة التالية. فهم يطورون تغييرات في البيانات المرتبطة بربط الرسوم المتحركة.
|
||
|
||
* `'someValue' => 'anotherValue'`
|
||
|
||
مشغل رسوم متحركة حيث تتغير البيانات المرتبطة من "someValue" إلى "anotherValue".
|
||
|
||
* `'anotherValue' => 'someValue'`
|
||
|
||
مشغل رسوم متحركة حيث تتغير البيانات المرتبطة من "anotherValue" إلى "someValue".
|
||
|
||
* `'someValue' <=> 'anotherValue'`
|
||
|
||
تتغير البيانات من "someValue" إلى "anotherValue" أو العكس.
|
||
|
||
هناك أيضا وجود `void` و `*` الدول. يشير `void` إلى أن المكون إما يدخل أو يخرج من DOM. هذا مثالي للرسوم المتحركة الدخول والخروج.
|
||
|
||
* `'someValue' => void` : _ترك_ مكون المضيف للبيانات المرتبطة DOM
|
||
|
||
* `void => 'someValue'` : يتم _إدخال_ مكون المضيف للبيانات المرتبطة في DOM
|
||
|
||
|
||
`*` تشير إلى حالة أحرف بدل. يمكن أن تفسر حالات أحرف البدل إلى "أي دولة". وهذا يشمل `void` بالإضافة إلى أي تغيير آخر في البيانات المرتبطة.
|
||
|
||
#### إطارات مفتاحية
|
||
|
||
تناولت هذه المقالة أساسيات تحريك التطبيقات الزاويّة. توجد تقنيات الرسوم المتحركة المتقدمة جنبا إلى جنب مع هذه الأساسيات. إن تجميع الإطارات الرئيسية معًا هو أحد هذه التقنيات. مستوحاة من قاعدة `@keyframes` . إذا كنت قد عملت مع `@keyframes` ، فأنت بالفعل تفهم كيفية عمل الإطارات المفتاحية في العمل الزاوي. يصبح مجرد مسألة بناء الجملة
|
||
|
||
تستورد طريقة `keyframes(...)` من `@angular/animations` . يمرر في الوسيطة الثانية من `animate(...)` بدلاً من `AnimationStyleMetadata` النموذجية. تقبل طريقة `keyframes(...)` وسيطة واحدة كصفيف من `AnimationStyleMetadata` . هذا يمكن أيضاً الإشارة إليه على أنه صفيف من أساليب `style(...)` .
|
||
|
||
يذهب كل إطار مفتاحي للرسوم المتحركة داخل صف `keyframes(...)` . عناصر الإطار الرئيسي هذه هي أساليب `style(...)` تدعم خاصية `offset` . يشير `offset` إلى نقطة في مدة الرسم المتحرك حيث يجب تطبيق خصائص النمط المصاحب لها. تمتد قيمته من 0 (بداية الرسوم المتحركة) إلى 1 (نهاية الرسوم المتحركة).
|
||
|
||
``import { Component } from '@angular/core';
|
||
import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
|
||
|
||
@Component({
|
||
selector: 'app-example',
|
||
styles: [
|
||
`.ball {
|
||
position: relative;
|
||
background-color: black;
|
||
border-radius: 50%;
|
||
top: 200px;
|
||
height: 25px;
|
||
width: 25px;
|
||
}`
|
||
],
|
||
template: `
|
||
<h3>Arcing Ball Animation</h3>
|
||
<button (click)="toggleBounce()">Arc the Ball!</button>
|
||
<div [@animateArc]="arc" class="ball"></div>
|
||
`,
|
||
animations: [
|
||
trigger('animateArc', [
|
||
state('true', style({
|
||
left: '400px',
|
||
top: '200px'
|
||
})),
|
||
state('false', style({
|
||
left: '0',
|
||
top: '200px'
|
||
})),
|
||
transition('false => true', animate('1000ms linear', keyframes([
|
||
style({ left: '0', top: '200px', offset: 0 }),
|
||
style({ left: '200px', top: '100px', offset: 0.50 }),
|
||
style({ left: '400px', top: '200px', offset: 1 })
|
||
]))),
|
||
transition('true => false', animate('1000ms linear', keyframes([
|
||
style({ left: '400px', top: '200px', offset: 0 }),
|
||
style({ left: '200px', top: '100px', offset: 0.50 }),
|
||
style({ left: '0', top: '200px', offset: 1 })
|
||
])))
|
||
])
|
||
]
|
||
})
|
||
export class ExampleComponent {
|
||
arc: string = 'false';
|
||
|
||
toggleBounce(){
|
||
this.arc = this.arc === 'false' ? 'true' : 'false';
|
||
}
|
||
}
|
||
``
|
||
|
||
الاختلاف الرئيسي في المثال أعلاه مقارنة مع المثال الآخر هو الوسيطة الثانية من `animate(...)` . يحتوي الآن على أسلوب `keyframes(...)` يستضيف مصفوفة من الإطارات المفتاحية للرسوم المتحركة. في حين أن الرسوم المتحركة نفسها هي أيضا مختلفة ، وتقنية لتحريك مماثل.
|
||
|
||
يؤدي النقر فوق الزر إلى ظهور الزر للقوس عبر الشاشة. يتحرك القوس حسب عناصر مصفوفة الطريقة في `keyframes(...)` (إطارات مفتاحية). في منتصف نقطة الرسوم المتحركة ( `offset: 0.50` ) ، تغير الكرة المسار. ينحدر إلى ارتفاعه الأصلي بينما يستمر عبر الشاشة. النقر فوق الزر مرة أخرى يعكس الرسوم المتحركة.
|
||
|
||
`left` `top` هي خصائص متحركة بعد تحديد `position: relative;` لهذا العنصر. يمكن أن تقوم خاصية `transform` بعمل رسوم متحركة مماثلة. `transform` خاصية ممتدة تماما ولكن متحركة.
|
||
|
||
يمكن أن يوجد أي عدد من الإطارات المفتاحية الموجودة بين الإزاحة 0 و 1. تأخذ تتابعات الرسوم المتحركة المعقدة شكل إطارات مفتاحية keyframes. فهي واحدة من العديد من التقنيات المتقدمة في الرسوم المتحركة Angular.
|
||
|
||
### الرسوم المتحركة مع المضيف ملزم
|
||
|
||
ستواجه بدون شك الحالة التي تريد فيها إرفاق صورة متحركة بعنصر HTML في أحد المكونات نفسها ، بدلاً من عنصر في قالب المكون. هذا يتطلب المزيد من الجهد لأنه لا يمكنك الذهاب إلى HTML النموذج وإرفاق الرسوم المتحركة هناك. بدلاً من ذلك ، سيكون عليك استيراد `HostBinding` واستخدام ذلك.
|
||
|
||
يتم عرض الرمز الأدنى لهذا السيناريو أدناه. سأعيد استخدام نفس حالة الرسوم المتحركة للشفرة أعلاه للاتساق ولا أقوم بعرض أي من رموز الرسوم المتحركة الفعلية حيث يمكنك بسهولة العثور على ذلك أعلاه.
|
||
|
||
`import { Component, HostBinding } from '@angular/core';
|
||
|
||
@Component({
|
||
...
|
||
})
|
||
export class ExampleComponent {
|
||
@HostBinding('@animateArc') get arcAnimation() {
|
||
return this.arc;
|
||
}
|
||
}
|
||
`
|
||
|
||
الفكرة الكامنة وراء تحريك مكون المضيف تشبه إلى حد كبير تحريك عنصر من القالب مع الاختلاف الوحيد وهو عدم الوصول إلى العنصر الذي تقوم بتحريكه. لا يزال لديك لتمرير اسم الرسوم المتحركة ( `@animateArc` ) عندما يعلن `HostBinding` ولا يزال لديك للعودة للحالة الراهنة للرسوم المتحركة ( `this.arc` ). لا يمثل اسم الدالة مادة فعلية ، لذلك `arcAnimation` الممكن تغيير `arcAnimation` إلى أي شيء ، طالما أنها لا تتعارض مع أسماء الخصائص الموجودة على المكون ، وستعمل بشكل جيد تمامًا.
|
||
|
||
#### استنتاج
|
||
|
||
يغطي هذا أساسيات الرسوم المتحركة مع Angular. يجعل Angular إعداد الرسوم المتحركة أمرًا سهلاً للغاية باستخدام CLI Angular. يتطلب استخدام الرسوم المتحركة لأول مرة فئة واحدة فقط. تذكر ، نطاق الرسوم المتحركة إلى قالب المكون. قم بتصدير مصفوفة الانتقالات الخاصة بك من ملف منفصل إذا كنت تخطط لاستخدامها عبر مكونات متعددة.
|
||
|
||
كل تصدير فائدة / طريقة للرسوم المتحركة من `@angular/animations` . انهم جميعا يعملون معا لتوفير نظام قوي من الرسوم المتحركة مستوحاة من CSS. هناك طرق أكثر مما يمكن أن تغطيه هذه المقالة.
|
||
|
||
الآن بعد أن تعرفت على الأساسيات ، لا تتردد في استكشاف الروابط أدناه لمزيد من المعلومات عن الحركات الزاحفة.
|
||
|
||
## مصادر
|
||
|
||
* [فريق الزاوي. "الرسوم المتحركة". _جوجل_ . تم الوصول إليه في 7 يونيو 2018.](https://angular.io/guide/animations)
|
||
* [فريق الزاوي. "حزمة الرسوم المتحركة". _جوجل_ . تم الوصول إليه في 7 يونيو 2018.](https://angular.io/api/animations)
|
||
|
||
## مصادر
|
||
|
||
* [وثائق الزاوي](https://angular.io/guide)
|
||
* [Angular Animations Tutorial](https://angular.io/guide/animations)
|
||
* [Angular Animations API](https://angular.io/api/animations)
|
||
* [Angular GitHub Repository](https://github.com/angular/angular)
|
||
* [الزاوي CLI](https://cli.angular.io) |