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

4 سال پیش

امتیاز دهید post

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

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

مرحله 1 – View

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

app.html

&lt;template&gt;
   &lt;div class = "myElement"&gt;&lt;/div&gt;
   &lt;button click.delegate = "animateElement()"&gt;ANIMATE&lt;/button&gt;
&lt;/template&gt;

<button click.delegate = "animateElement()">ANIMATE</button>

</template>

مرحله 2 – 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');
   }
}

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');

}

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

ما 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 {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

.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 {

0% { background-color: #e6efff; }

25% { background-color: #4d91ff; }

50% { background-color: #0058e6; }

75% { background-color: #003180; }

100% { background-color: #000a1a; }

}

@keyframes changeBack {

0% { background-color: #000a1a; }

25% { background-color: #003180; }

50% { background-color: #0058e6; }

75% { background-color: #4d91ff; }

100% { background-color: #e6efff; }

}

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

Aurelia Animations Example

منبع.

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

امتیاز دهید post

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

نویسنده مطلب saber

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

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

مرحله 1 – View

app.html

مرحله 2 – View-model

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

styles.css

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

دیدگاه شما

بدون دیدگاه

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

مرحله 1 – View

app.html

مرحله 2 – View-model

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

styles.css

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه