Loading...
انیمیشن (Animations) در انگولار 6
انیمیشن قابلیت تعامل زیادی را به عناصر اضافه می کند. انیمیشن از نسخه دوم انگولار اضافه شده است. برای استفاده از قابلیت انیمیشن فریم ورک انگولار باید ماژول مربوط به آن را به فایل app.module.ts اضافه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
همانطور که در کد فوق مشاهده می کنید، ما ابتدا ماژول BrowserAnimationsModule وارد و سپس آن را به بخش imports اضافه کرده ایم.
حال در فایل app.component.html محتوای زیر را برای متحرک سازی با استفاده از امکانات انگولار، اضافه می کنیم:
1 2 3 4 5 6 | <div> <button (click) = "animate()">Click Me</button> <div [@myanimation] = "state" class = "rotate"> <img src = "assets/images/img.png" width = "100" height = "100"> </div> </div> |
در داخل div اصلی یک button و یک div که شامل یک تصویر است، اضافه شده است. برای button یک رویداد کلیک که تابع animate را فراخوانی می کند، مشخص شده و به عنصر div دستورالعمل @myanimation اضافه مقدار state به آن داده شده است. این state می تواند یکی از state های تعریف شده در فایل .ts باشد.
حال انیمیشن مورد نظر را در فایل app.component.ts تعریف می کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import { Component } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], styles:[` div{ margin: 0 auto; text-align: center; width:200px; } .rotate{ width:100px; height:100px; border:solid 1px red; } `], animations: [ trigger('myanimation',[ state('smaller',style({ transform : 'translateY(100px)' })), state('larger',style({ transform : 'translateY(0px)' })), transition('smaller <=> larger',animate('300ms ease-in')) ]) ] }) export class AppComponent { state: string = "smaller"; animate() { this.state= this.state == 'larger' ? 'smaller' : 'larger'; } } |
در کد فوق ما مواردی که برای ایجاد انیمیشن لازم هستند را import کرده ایم.
1 | import { trigger, state, style, transition, animate } from '@angular/animations'; |
سپس بخش مربوط به انیمیشن به @Component() اضافه شده است:
1 2 3 4 5 6 7 8 9 10 11 | animations: [ trigger('myanimation',[ state('smaller',style({ transform : 'translateY(100px)' })), state('larger',style({ transform : 'translateY(0px)' })), transition('smaller <=> larger',animate('300ms ease-in')) ]) ] |
Trigger شروع انیمیشن را تعریف می کند. پارامتر اول Trigger نام انیمیشن را مشخص می کند و پارامتر دوم جزئیات انیمیشن را مشخص می کند. تابع state شامل مراحل متحرک سازی که بر روی عنصر اعمال می شود، است. در حال حاضر ما دو وضعیت smaller و larger را برای عنصر تعریف کرده ایم. تابع transition انیمیشن را به عنصر html اضافه می کند. آرگومان اول این تابع وضعیت (states) های شروع و پایان را می گیرد. آرگومان دوم یک تابع animate می گیرد. این تابه به شما اجازه می دهد تا سرعت اجرای انیمیشن، تاخیر، نوع اجرای آن را مشخص کنید.
محتوای فایل html که از انیمیشن استفاده شده است:
1 2 3 4 5 6 | <div> <button (click) = "animate()">Click Me</button> <div [@myanimation] = "state" class="rotate"> <img src = "assets/images/img.png" width = "100" height = "100"> </div> </div> |
کد زیر یک پراپرتی استایل را به دستورالعمل @component اضافه می کند. این استایل موقعیت عنصر div را در وسط صفحه تنظیم می کند.
1 2 3 4 5 6 7 8 9 10 11 12 | styles:[` div{ margin: 0 auto; text-align: center; width:200px; } .rotate{ width:100px; height:100px; border:solid 1px red; } `], |
توجه داشته باشید که محتوای CSS در داخل دو کاراکتر ` قرار گرفته اند. این کاراکتر در بالای کلید tab و قبل از عدد 1 قرار دارد. زمانی که بر روی دکمه کلیک شود، تابع animate() تعریف شده در فایل app.component.ts فراخوانی می شود.
1 2 3 4 5 6 | export class AppComponent { state: string = "smaller"; animate() { this.state= this.state == 'larger' ? 'smaller' : 'larger'; } } |
در کد فوق یک متغیر با نام state و مقدار پیش فرض smaller تعریف شده است. تابع animate() مقدار متغیر state را در هنگام کلیک بر روی دکمه Click Me تغییر می دهد. اگر مقدار متغیر smaller باشد، آن را به larger تغییر و می دهد و بر عکس.
خروجی برنامه:
همان طور که در شکل زیر نشان داده شده است، با کلیک بر روی دکمه Click Me موقعیت (position) تصویر تغییر می کند.
تابع transform در جهت Y عمل می کند و زمانی بر روی دکمه Click Me کلیک شود، موقعیت آن را از 0 به 200px تغییر می دهد.
سلام با توجه با این که الان انگولار 8 هم اومده، به نظر شما یادگیری انگولار 6 یا 7 درسته؟
سلام...شما اگه با نسخه های قبلی یک فریم ورک (یا هر تکنولوژی دیگه ای) آشنا باشین برای یادگیری نسخه جدید تر دیگه مشکلی ندراین چون به جزء در مواردی خاص تغییرات آنچانی رو اون اعمال نمیشه...بنابراین اگه نسخه 6 یا 7 رو یادبگیرین به راحتی می تونید کار خودتونو راه بندازین و اگه خواستن نسخه جدید رو یاد بگیرین...فقط باید تغییرات جدید که تو اون نسخه اضافه شده رو یاد بگیرین.