آموزش انیمیشن ها در برنامه نویسی اورلیا

آموزش انیمیشن ها در برنامه نویسی اورلیا

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش انیمیشن ها در برنامه نویسی اورلیا خواهیم پرداخت.

مرحله ۱ – View

View ما دارای یک عنصر خواهد بود که متحرک خواهد شد و یک دکمه برای ایجاد تابع ()animateElement.

app.html

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

مرحله ۲ – View-model

در داخل فایل جاوا اسکریپت خود ، ما پلاگین CssAnimator را وارد کرده و آن را به عنوان یک وابستگی تزریق می کنیم. تابع animateElement برای شروع انیمیشن با انیماتور تماس می گیرد. انیمیشن در مرحله بعدی ایجاد خواهد شد.

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

مرحله ۳ – استایل

ما CSS را در داخل فایل styles / styles.css خواهیم نوشت. .myAnimation-add نقطه شروع یک انیمیشن است در حالی که .myAnimation-remove هنگام تکمیل انیمیشن فراخوانی می شود.

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   ۰% { background-color: #e6efff; }
   ۲۵% { background-color: #4d91ff; }
   ۵۰% { background-color: #0058e6; }
   ۷۵% { background-color: #003180; }
   ۱۰۰% { background-color: #000a1a; }
}

@keyframes changeBack {
   ۰% { background-color: #000a1a; }
   ۲۵% { background-color: #003180; }
   ۵۰% { background-color: #0058e6; }
   ۷۵% { background-color: #4d91ff; }
   ۱۰۰% { background-color: #e6efff; }
}

پس از کلیک بر روی دکمه ANIMATE ، رنگ زمینه از آبی روشن به سایه تیره تغییر می یابد. وقتی این انیمیشن بعد از سه ثانیه کامل شد، عنصر در حالت شروع محو می شود.

منبع.

لیست جلسات قبل آموزش برنامه نویسی اورلیا

1. آموزش برنامه نویسی اورلیا
2. بررسی اجمالی برنامه نویسی اورلیا 
3. آموزش تنظیمات محیطی در برنامه نویسی اورلیا 
4.  آموزش اولین برنامه در برنامه نویسی اورلیا
5. آموزش اجزا در برنامه نویسی اورلیا
6. آموزش چرخه زندگی کامپوننت در برنامه نویسی اورلیا
7. آموزش عناصر سفارشی در برنامه نویسی اورلیا
8. آموزش تزریق وابستگی در برنامه نویسی اورلیا
9. آموزش پیکربندی در برنامه نویسی اورلیا
10. آموزش پلاگین ها در برنامه نویسی اورلیا
11. آموزش اتصال داده ها در برنامه نویسی اورلیا
12. آموزش رفتار اتصال در برنامه نویسی اورلیا
13. آموزش مبدل ها در برنامه نویسی اورلیا
14. آموزش رویدادها در برنامه نویسی اورلیا
15. آموزش گردآورنده رویداد در برنامه نویسی اورلیا
16. آموزش فرم ها در برنامه نویسی اورلیا
17. آموزش HTTP در برنامه نویسی اورلیا
18. آموزش رفرنس ها در در برنامه نویسی اورلیا
19. آموزش مسیریابی در برنامه نویسی اورلیا
20. آموزش تاریخچه در برنامه نویسی اورلیا
21. آموزش انیمیشن ها در برنامه نویسی اورلیا
22. آموزش dialog در برنامه نویسی اورلیا
23. آموزش بومی سازی در برنامه نویسی اورلیا
24. آموزش ابزارها در برنامه نویسی اورلیا
25. آموزش بسته بندی در برنامه نویسی اورلیا
26. آموزش اشکال زدایی در برنامه نویسی اورلیا
27.  جامعه برنامه نویسی اورلیا