انیمیشن (Animations) در انگولار ۷ – آموزش انگولار ۷

angular7 animations 6636 تصویر

انیمیشن (Animations) در انگولار ۷

انیمیشن قابلیت تعامل زیادی را به عناصر اضافه می کند. انیمیشن از نسخه دوم انگولار اضافه شده است. برای استفاده از قابلیت انیمیشن فریم ورک انگولار ۷ باید ماژول مربوط به آن را به فایل app.module.ts  اضافه کنید:

همانطور که در کد فوق مشاهده می کنید، ما ابتدا ماژول BrowserAnimationsModule وارد و سپس آن را به بخش imports اضافه کرده ایم. حال در فایل app.component.html محتوای زیر را برای متحرک سازی با استفاده از امکانات انگولار، اضافه می کنیم:

در داخل div اصلی یک button و یک div که شامل یک تصویر است، اضافه شده است. برای button یک رویداد کلیک که تابع animate را فراخوانی می کند، مشخص شده و به عنصر div دستورالعمل @myanimation اضافه مقدار state به آن داده شده است. این state می تواند یکی از state های تعریف شده در فایل .ts باشد.

حال انیمیشن مورد نظر را در فایل app.component.ts تعریف می کنیم:

در کد فوق ما مواردی که برای ایجاد انیمیشن لازم هستند را import کرده ایم.

سپس بخش مربوط به انیمیشن به @Component() اضافه شده است:

Trigger شروع انیمیشن را تعریف می کند. پارامتر اول Trigger نام انیمیشن را مشخص می کند و پارامتر دوم جزئیات انیمیشن را مشخص می کند. تابع state شامل مراحل متحرک سازی که بر روی عنصر اعمال می شود، است. در حال حاضر ما دو وضعیت smaller و larger را برای عنصر تعریف کرده ایم. تابع transition انیمیشن را به عنصر html اضافه می کند. آرگومان اول این تابع وضعیت (states) های شروع و پایان را می گیرد. آرگومان دوم یک تابع animate می گیرد. این تابه به شما اجازه می دهد تا سرعت اجرای انیمیشن، تاخیر، نوع اجرای آن را مشخص کنید.

محتوای فایل html که از انیمیشن استفاده شده است:

کد زیر یک پراپرتی استایل را به دستورالعمل @component اضافه می کند. این استایل موقعیت عنصر div را در وسط صفحه تنظیم می کند.

توجه داشته باشید که  محتوای CSS در داخل دو کاراکتر ` قرار گرفته اند. این کاراکتر در بالای کلید tab و قبل از عدد ۱ قرار دارد. زمانی که بر روی دکمه کلیک شود، تابع animate تعریف شده در فایل  app.component.ts فراخوانی می شود.

در کد فوق یک متغیر با نام state و مقدار پیش فرض smaller تعریف شده است. تابع animate مقدار متغیر state را در هنگام کلیک بر روی دکمه Click Me تغییر می دهد. اگر مقدار متغیر smaller باشد، آن را به larger تغییر و می دهد و بر عکس.

خروجی برنامه:

angular7 animations 6636 1 تصویر

همان طور که در شکل زیر نشان داده شده است، با کلیک بر روی دکمه Click Me موقعیت (position) تصویر تغییر می کند.

angular7 animations 6636 2 تصویر

تابع transform در جهت Y عمل می کند و زمانی بر روی دکمه Click Me کلیک شود، موقعیت آن را از ۰ به ۲۰۰ px تغییر می دهد.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۲ مورد)
  1. تصویر آواتار کاربر 0
    Omid شنبه , ۲۳ شهریور

    سلام این مثالی که زدین خیلی سادس..لطفا مثال های پیشرفته تری هم قرار بدین.

    • تصویر آواتار کاربر 124
      AmRoشنبه , ۲۳ شهریور

      سلام...تو این لینک یه مثال کامل هست در مورد نحوه استفاده از انیمیشن در انگولار: Angular Animations