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

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

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

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

1// create the animation
2const myAnimation = animation('{{ timings }}', []);
3
4// consume the animation
5trigger('myTrigger', 
6  transition('* => *',
7    useAnimation(myAnimation, { params: { timings: 200 } })
8  )
9);

1. با فراخوانی تابع ()animation یک انیمیشن ایجاد می‌کنیم. این انیمیشن می‌تواند شامل تعداد پارامترهای ورودی میان‌یابی‌شده مانند {{ timings }} باشد.
2. با استفاده از تابع ()useAnimation، ‌انیمیشن را مصرف می‌کنیم. این تابع به عنوان آرگومان نخست، ارجاعی به انیمیشن می‌گیرد و آرگومان دوم هم گزینه‌های آن است. پارامترهای ورودی را زیر کلید params ارسال می‌کنیم. در این مثال باید مقدار زمان‌بندی { timings: 200 } را ارسال کنیم.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

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

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

1export const pulseAnimation = animation([
2  style({ transform: 'scale(1)' }),
3  animate(
4    '{{ timings }}',
5    keyframes([
6      style({ transform: 'scale(1)', offset: 0 }),
7      style({ transform: 'scale({{ scale }})', offset: 0.5 }),
8      style({ transform: 'scale(1)', offset: 1 })
9    ])
10  )
11]);

انیمیشن با قابلیت استفاده مجدد را با فراخوانی تابع ()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

1@Component({
2  selector: 'app-clap-fab',
3  template: `<i class="material-icons">pan_tool</i>`,
4  animations: [
5    trigger('counterChange', [
6      transition(
7        ':increment',
8        useAnimation(pulseAnimation, {
9          params: {
10            timings: '400ms cubic-bezier(.11,.99,.83,.43)',
11            scale: 1.05
12          }
13        })
14      )
15    ])
16  ]
17})
18export class ClapFabComponent {
19  @HostBinding('@counterChange')
20  @Input()
21  counter: number;
22}

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

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

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

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

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

1export const slideInAnimation = animation([
2  style({ transform: 'translateY({{ from }})', opacity: 0 }),
3  animate('{{ timings }}', style({ transform: 'translateY(0)', opacity: 1 }))
4]);
5
6export const slideOutAnimation = animation([
7  animate(
8    '{{ timings }}',
9    style({ transform: 'translateY({{ to }})', opacity: 0 })
10  )
11]);

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

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

1@Component({
2  selector: 'app-counter-bubble',
3  template: `+{{counter}}`,
4  animations: [
5    trigger('visibilityChange', [
6      transition(':enter', [
7        useAnimation(slideInAnimation, {
8          params: { from: '20%', timings: '200ms ease-in' }
9        })
10      ]),
11      transition(':leave', [
12        useAnimation(slideOutAnimation, {
13          params: { to: '-200%', timings: '200ms ease-in' }
14        })
15      ])    
16    ])
17  ]
18})
19export class CounterBubbleComponent {
20  @HostBinding('@visibilityChange')
21  animation = true;
22}

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

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

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

• مجموعه آموزش‌های جاوا اسکریپت
• مجموعه آموزش‌های برنامه‌نویسی
• آموزش مقدماتی AngularJS
• ۱۰ قابلیت مفید انگولار که احتمالاً از وجودشان اطلاع ندارید — راهنمای کاربردی
• آموزش انگولار (Angular): ساخت یک اپلیکیشن در ۲۰ دقیقه – به زبان ساده

==