• ۲۹
  • مرداد
توضیحات
  • دسته‌بندی‌ها : آموزش جاوا اسکریپت
  • بازدید : 416
جلسه ۲۱ : آموزش انیمیشن در AngularJS
  • جزئیات
  • نوع محتواآموزش تصویری

فیلم های آموزشی آکادمی پی وی لرن

  • آموزش های مرتبط

  • ۲۹
  • مرداد

جلسه ۲۱ : آموزش انیمیشن در AngularJS

  • دسته‌بندی‌ها :
  • بازدید : 416

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. CSS3 دستوراتی را برای ایجاد افکت ها و انیمیشن های متنوع در فایل صفحه وب ارائه می دهد. که ما در طی دوره آموزش CSS به آن اشاره کردیم. همچنین HTML دارای تگ هایی برای متحرک سازی و ایجاد جلوه های انیمیشن در صفحه وب است. اکنون می خواهیم به مبحث آشنایی با animation یا آموزش انیمیشن در AngularJS ، بپردازیم.

AngularJS در زمینه ی ایجاد انیمیشن نیز دستوراتی را برای متحرک سازی و پویانمایی در صفحه وب ، ارائه می دهد. که در ادامه به بررسی آن می پردازیم.

آشنایی با animation یا انیمیشن در AngularJS

AngularJS با استفاده از CSS، جلوه های  متحرک را در صفحه وب، فراهم می کند.

انیمیشن چیست

یک انیمیشن زمانی اتفاق می افتد که تبدیل یک عنصر HTML باعث ایجاد پویانمایی می شود.

مثال : مخفی کردن DIV

خودتان امتحان کنید »

مثال : 

برنامه های آنگولار نباید با انیمیشن های زیاد پر شوند. اما برخی از انیمیشن ها می توانند درک برنامه را آسان تر کنند.

ابزاری که برای انیمیشن نیاز است

برای اینکه برنامه های خود را برای انیمیشن آماده کنید. باید کتابخانه AngulateJS Animate را اضافه کنید:

مثال : 

سپس باید در برنامه به ماژول ngAnimate اشاره کنید:

مثال : 

یا اگر برنامه ی شما نام هم دارد. عبارت ngAnimate را در بخش تعریف نام برنامه به شکل زیر وارد کنید:

مثال : افزودن عبارت ngAnimate

خودتان امتحان کنید »

مثال : 

بررسی جزئیات ngAnimate

ماژول ngAnimate کلاس هایی را اضافه و حذف می کند.

ماژول ngAnimate عناصر HTML شما را تحریک نمی کند، اما هنگامی که در ngAnimate متوجه رویدادهایی خاص مانند پنهان کردن یا نمایش یک عنصر HTML می شوید، در واقع عنصر HTML، برخی از کلاس های از پیش تعریف شده را که می تواند برای ساخت انیمیشن استفاده شود. بکار می گیرد.

دستوراتی که در آنگولار ، کلاس ها را اضافه یا حذف می کنند:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

دستور ng-show و ng-hide ، مقدار کلاس ng-hide را اضافه یا حذف می کند.

دستورات دیگر هنگام ورود به DOM ، یک کلاس ng-enter را اضافه یا حذف می کند. و یک صفت ng-leave را هنگام حذف شدن از DOM ، اضافه می کند.

زمانیکه موقعیت مکانی یک عنصر HTML تغییر می کند. دستور ng-repeat مقدار کلاس ng-move را اضافه می کند.

عنصر HTML دارای مقادیری از کلاس هاست که در زمان به پایان رسیدن انیمیشن، حذف می شود.

مثال:دستور ng-hide مقادیر کلاس های زیر را اضافه می کند:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add (اگر عنصر HTML حذف شده باشد).
  • ng-hide-remove (اگر عنصر HTML نمایان شده باشد).
  • ng-hide-add-active (اگر عنصر HTML حذف شده باشد).
  • ng-hide-remove-active (اگر عنصر HTML نمایان شده باشد).

ایجاد انیمیشن با استفاده از CSS

ما می توانیم از انتقال CSS یا انیمیشن CSS برای متحرک کردن عناصر HTML استفاده کنیم.

انمیشن transitions در CSS

transitions در CSS به شما این امکان را می دهد. که مقدار خصوصیت CSS را به طور هماهنگ، از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:

مثال : transitions در CSS

خودتان امتحان کنید »

مثال : 

انیمیشن در CSS

انیمیشن های CSS به شما این امکان را می دهد. که ارزش خصوصیت CSS را از یک مقدار به دیگری، در مدت زمان مشخصی تغییر دهید:

مثال : انیمیشن در CSS

خودتان امتحان کنید »

مثال : 

کلام آخر

طی آموزش مباحث آشنایی با animation یا انیمیشن در AngularJS ، شما با چگونگی ایجاد انیمیشن ها و جلوه های ساده در عناصر HTML در آنگولار ، آشنا شدید. همچنین مروری بر انیمیشن در CSS داشتیم. امیدواریم که این آموزش به اندازه ی کافی مفید و موثر بوده باشد.

 

 

 

این پست را ارزیابی کنید
QR:  جلسه ۲۱ : آموزش انیمیشن در AngularJS
به اشتراک بگذارید