إنشاء رسوم متحركة قابلة لإعادة الاستخدام في Angular 2

في Angular 2، عملية إنشاء الرسوم المتحركة القابلة لإعادة الاستخدام تتطلب فهمًا جيدًا لوظيفة واجهة برمجة التطبيقات (API) المخصصة للرسوم المتحركة. يتيح لك هذا الإطار إمكانية إضافة رسوم متحركة متقدمة إلى تطبيقاتك بسهولة، ويوفر لك أدوات قوية لإنشاء رسوم متحركة قابلة لإعادة الاستخدام.

بدايةً، يتطلب الأمر تعريف الرسم المتحرك في العنصر المراد تطبيق الرسم المتحرك عليه باستخدام واجهة برمجة التطبيقات للرسوم المتحركة في Angular. يتضمن هذا التعريف تعريف حالات الرسم المتحركة المختلفة والانتقالات بينها.

في الكود الذي قدمته، قمت بتعريف رسم متحرك يُسمى “slideIn” باستخدام الوظيفة trigger. هذا الرسم يحدد ثلاث حالات مختلفة (“*”, “in”, “out”)، وتعريفات المظهر لكل منها، بالإضافة إلى انتقالات بين هذه الحالات.

ثم يتم استخدام هذا الرسم المتحرك في العنصر الأساسي في القالب باستخدام الديكوريتر [@slideIn]. هذا يؤدي إلى تطبيق الرسم المتحرك بناءً على الحالة التي تم تعيينها في slideInState.

لجعل هذا الرسم المتحرك قابلًا لإعادة الاستخدام، يمكنك استخدام مفهوم الـ “mixins” أو إنشاء مكون فرعي لتعريف الرسم المتحرك واستيراده في المكونات التي تحتاج إليه. على سبيل المثال، يمكنك إنشاء ملف تعريفي للرسم المتحرك يحتوي على كل تعريفات الرسوم المتحركة التي تريدها، ثم استيراد هذا الملف في المكونات التي تحتاج إلى استخدام هذه الرسوم المتحركة.

على سبيل المثال، يمكنك إنشاء ملف يسمى “slide-in.animation.ts” وتعريف فيه الرسم المتحرك:

typescript
import { trigger, state, style, transition, animate } from '@angular/animations';

export const slideInAnimation = trigger('slideIn', [
  state('*', style({
    transform: 'translateX(100%)',
  })),
  state('in', style({
    transform: 'translateX(0)',
  })),
  state('out', style({
    transform: 'translateX(-100%)',
  })),
  transition('* => in', animate('600ms ease-in')),
  transition('in => out', animate('600ms ease-in'))
]);

ثم يمكنك استيراد هذا الملف واستخدام الرسم المتحرك في المكونات اللاحقة:

typescript
import { slideInAnimation } from './slide-in.animation';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  animations: [slideInAnimation]
})
export class MyComponent {
  slideInState = 'in';
  // ...
}

باستخدام هذا النهج، يمكنك إعادة استخدام الرسوم المتحركة بسهولة في مكونات Angular الأخرى دون الحاجة إلى إعادة كتابة التعريفات في كل مرة. هذا يسمح لك بإدارة الرسوم المتحركة بشكل مركزي وتطبيقها بسهولة في تطبيقك.

المزيد من المعلومات

تكرار قيم الكائنات في JavaScript

دوال C++ بدون تعليمة الإرجاع