انیمیشن (Animations) در انگولار ۷

انیمیشن قابلیت تعامل زیادی را به عناصر اضافه می کند. انیمیشن از نسخه دوم انگولار اضافه شده است. برای استفاده از قابلیت انیمیشن فریم ورک انگولار ۷ باید ماژول مربوط به آن را به فایل app.module.ts اضافه کنید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

همانطور که در کد فوق مشاهده می کنید، ما ابتدا ماژول BrowserAnimationsModule وارد و سپس آن را به بخش imports اضافه کرده ایم. حال در فایل app.component.html محتوای زیر را برای متحرک سازی با استفاده از امکانات انگولار، اضافه می کنیم:

<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 تعریف می کنیم:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
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 کرده ایم.

import { trigger, state, style, transition, animate } from '@angular/animations';

سپس بخش مربوط به انیمیشن به @Component() اضافه شده است:

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 که از انیمیشن استفاده شده است:

<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 را در وسط صفحه تنظیم می کند.

styles:[`
   div{ 
      margin: 0 auto;
      text-align: center;
      width:200px;
   }
   .rotate{
      width:100px;
      height:100px;
      border:solid 1px red;
   }
`],

توجه داشته باشید که محتوای CSS در داخل دو کاراکتر ` قرار گرفته اند. این کاراکتر در بالای کلید tab و قبل از عدد ۱ قرار دارد. زمانی که بر روی دکمه کلیک شود، تابع animate تعریف شده در فایل app.component.ts فراخوانی می شود.

export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state = this.state == ‘larger’? 'smaller' : 'larger';
   }
}

در کد فوق یک متغیر با نام state و مقدار پیش فرض smaller تعریف شده است. تابع animate مقدار متغیر state را در هنگام کلیک بر روی دکمه Click Me تغییر می دهد. اگر مقدار متغیر smaller باشد، آن را به larger تغییر و می دهد و بر عکس.

خروجی برنامه: