انیمیشن با قابلیت استفاده مجدد در انگولار — راهنمای کاربردی

آخرین به‌روزرسانی: ۳۰ فروردین ۱۳۹۹
زمان مطالعه: ۳ دقیقه

در این مقاله یک دکمه «تشویق» (Clap) را که در وب‌سایت مدیوم استفاده می‌شود، با استفاده از امکان انیمیشن در انگولار می‌سازیم. به این ترتیب با روش ایجاد انیمیشن با قابلیت استفاده مجدد در انگولار با استفاده از animation و useAnimation آشنا می‌شویم. همچنین عبارت‌های تغییر «حالت» (State) از قبیل enter ،:leave ،:increment: و decrement: را می‌شناسیم.

ایجاد انیمیشن با قابلیت استفاده مجدد در انگولار

برای مطالعه این مقاله می‌بایست دانشی مقدماتی در مورد متدهای انیمیشن در انگولار مانند ()trigger() ،transition و غیره داشته باشید.

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

// create the animation
const myAnimation = animation('{{ timings }}', []);

// consume the animation
trigger('myTrigger', 
  transition('* => *',
    useAnimation(myAnimation, { params: { timings: 200 } })
  )
);
  1. با فراخوانی تابع ()animation یک انیمیشن ایجاد می‌کنیم. این انیمیشن می‌تواند شامل تعداد پارامترهای ورودی میان‌یابی‌شده مانند {{ timings }} باشد.
  2. با استفاده از تابع ()useAnimation، ‌انیمیشن را مصرف می‌کنیم. این تابع به عنوان آرگومان نخست، ارجاعی به انیمیشن می‌گیرد و آرگومان دوم هم گزینه‌های آن است. پارامترهای ورودی را زیر کلید params ارسال می‌کنیم. در این مثال باید مقدار زمان‌بندی { timings: 200 } را ارسال کنیم.

اکنون که با شیوه ایجاد یک انیمیشن با قابلیت استفاده مجدد آشنا شدیم، باید با ایجاد انیمیشن پالس آن را مورد استفاده قرار دهیم.

ایجاد انیمیشن پالس

ایجاد انیمیشن با قابلیت استفاده مجدد در انگولار

export const pulseAnimation = animation([
  style({ transform: 'scale(1)' }),
  animate(
    '{{ timings }}',
    keyframes([
      style({ transform: 'scale(1)', offset: 0 }),
      style({ transform: 'scale({{ scale }})', offset: 0.5 }),
      style({ transform: 'scale(1)', offset: 1 })
    ])
  )
]);

انیمیشن با قابلیت استفاده مجدد را با فراخوانی تابع ()animation ایجاد می‌کنیم. این انیمیشن پارامترهای ورودی {{ timings }} و {{ scale }} را می‌گیرد. انیمیشن پالس با تغییر دادن مقیاس عنصر از طریق فراخوانی تابع keyframes ایجاد می‌شود.

useAnimation(
pulseAnimation,
{ params: { timings: 200, scale: 1.1, } }
)

at 0ms scale equals 1
at 100ms scale equals 1.1
at 200ms scale equals 1

سپس انیمیشن را درون کامپوننت اول مصرف می‌کنیم.

ایجاد کامپوننت FAB

ایجاد انیمیشن با قابلیت استفاده مجدد در انگولار

@Component({
  selector: 'app-clap-fab',
  template: `<i class="material-icons">pan_tool</i>`,
  animations: [
    trigger('counterChange', [
      transition(
        ':increment',
        useAnimation(pulseAnimation, {
          params: {
            timings: '400ms cubic-bezier(.11,.99,.83,.43)',
            scale: 1.05
          }
        })
      )
    ])
  ]
})
export class ClapFabComponent {
  @HostBinding('@counterChange')
  @Input()
  counter: number;
}

درون آرایه انیمیشن‌های کامپوننت، تابع ()trigger را با یک نام گویا به صورت counterChange فراخوانی می‌کنیم.

سپس یک گذار تعریف کرده و از increment: به عنوان عبارت گذار حالت استفاده می‌کنیم. این وضعیت مطابقت مناسبی دارد، چون می‌خواهیم انیمیشن زمانی اجرا شود که کاربر روی دکمه ضربه می‌زند و شمارنده تشویق نیز افزایش یابد.

درک عبارت‌های تغییر حالت

  • increment: – اتصال افزایش می‌یابد.
  • :decrement: – اتصال کاهش می‌یابد.
  • leave: – عنصر از DOM حذف می‌شود.
  • enter: – عنصر وارد DOM می‌شود.

ایجاد انیمیشن لغزش

ایجاد انیمیشن با قابلیت استفاده مجدد در انگولار

export const slideInAnimation = animation([
  style({ transform: 'translateY({{ from }})', opacity: 0 }),
  animate('{{ timings }}', style({ transform: 'translateY(0)', opacity: 1 }))
]);

export const slideOutAnimation = animation([
  animate(
    '{{ timings }}',
    style({ transform: 'translateY({{ to }})', opacity: 0 })
  )
]);

همانند انیمیشن‌های pulse در این جا نیز از تابع ()animation برای ایجاد انیمیشن‌های با قابلیت استفاده مجدد بهره می‌گیریم. همانند قبل، از میان‌یابی برای تعریف پارامترهای ورودی انیمیشن استفاده خواهیم کرد.

ایجاد کامپوننت Bubble

ایجاد انیمیشن با قابلیت استفاده مجدد در انگولار

@Component({
  selector: 'app-counter-bubble',
  template: `+{{counter}}`,
  animations: [
    trigger('visibilityChange', [
      transition(':enter', [
        useAnimation(slideInAnimation, {
          params: { from: '20%', timings: '200ms ease-in' }
        })
      ]),
      transition(':leave', [
        useAnimation(slideOutAnimation, {
          params: { to: '-200%', timings: '200ms ease-in' }
        })
      ])    
    ])
  ]
})
export class CounterBubbleComponent {
  @HostBinding('@visibilityChange')
  animation = true;
}

زمانی که کامپوننت والد کامپوننت Bubble را نمایش داده یا پنهان می‌سازد، می‌خواهیم انیمیشن لغزش به سمت داخل و بیرون اجرا شود. این محل مناسبی برای استفاده از عبارت‌های تغییر حالت enter: و leave: محسوب می‌شود.

انیمیشن‌های لغزش ایجادشده در گام قبلی را با فراخوانی تابع ()useAnimation با پارامترهای ورودی مناسب مورد استفاده قرار می‌دهیم.

سخن پایانی

به این ترتیب به پایان این راهنما با موضوع ساخت انیمیشن‌های با قابلیت استفاده مجدد در انگولار می‌رسیم. امیدواریم این مطلب مورد توجه شما قرار گرفته باشد. در این مقاله از بسیاری از قابلیت‌های جالب انگولار برای بازسازی دکمه تشویق مدیوم استفاده کردیم. کد کامل این پروژه در این ریپوی گیت‌هاب (+) ارائه شده است.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
شما قبلا رای داده‌اید!
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
netbasal

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *