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

  • شنبه ۶ بهمن ۱۳۹۷
  • بازدید ۴۵۲ نفر

angular 6 animations 5719 تصویر

انیمیشن (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 تغییر و می دهد و بر عکس.

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

angular 6 animations 5719 1 تصویر

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

angular 6 animations 5719 2 تصویر

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

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

    سلام با توجه با این که الان انگولار 8 هم اومده، به نظر شما یادگیری انگولار 6 یا 7 درسته؟

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

      سلام...شما اگه با نسخه های قبلی یک فریم ورک (یا هر تکنولوژی دیگه ای) آشنا باشین برای یادگیری نسخه جدید تر دیگه مشکلی ندراین چون به جزء در مواردی خاص تغییرات آنچانی رو اون اعمال نمیشه...بنابراین اگه نسخه 6 یا 7 رو یادبگیرین به راحتی می تونید کار خودتونو راه بندازین و اگه خواستن نسخه جدید رو یاد بگیرین...فقط باید تغییرات جدید که تو اون نسخه اضافه شده رو یاد بگیرین.