آموزش انیمیشن ها در انگولار ۷

آموزش انیمیشن ها در انگولار ۷

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

انیمیشن ها تعامل زیادی بین عناصر html اضافه می کنند. انیمیشن با انگولار ۲ در دسترس بود، از انگولار ۴ به بعد، انیمیشن دیگر بخشی از کتابخانه @angular/core نیست، بلکه یک بسته جداگانه است که باید در app.module.ts وارد شود.

برای شروع، باید کتابخانه را با خط کد زیر وارد کنیم

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

همانطور که در زیر نشان داده شده است، BrowserAnimationsModule باید به آرایه import در 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 { }

در app.component.html عناصر 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 اصلی یک دکمه و یک div با تصویر اضافه کرده ایم. یک رویداد کلیک وجود دارد که برای آن تابع animate فراخوانی می شود. و برای div، دستور @myanimation اضافه شده و مقدار به عنوان حالت داده می شود.

اجازه دهید اکنون 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';
   }
}

ما باید تابع انیمیشنی را که قرار است در فایل .ts استفاده شود، مطابق شکل بالا وارد کنیم.

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

در اینجا ما تریگر، حالت، استایل، انتقال و متحرک سازی را از @angular/animations وارد کرده ایم.

اکنون، ویژگی 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 شروع انیمیشن را مشخص می کند. اولین پارامتر آن نام انیمیشنی است که باید به تگ html داده شود که انیمیشن باید روی آن اعمال شود. پارامتر دوم توابعی هستند که ما وارد کرده ایم – حالت، انتقال و غیره.

تابع حالت شامل مراحل انیمیشن است که عنصر بین آنها انتقال می یابد. در حال حاضر دو حالت کوچکتر و بزرگتر را تعریف کرده ایم. برای حالت کوچکتر، استایل transform:translateY(100px) و transform:translateY(100px) را داده ایم.

تابع Transition انیمیشن را به عنصر html اضافه می کند. آرگومان اول حالت شروع و پایان را می گیرد، آرگومان دوم تابع متحرک را می پذیرد. تابع متحرک به شما امکان می دهد طول، تاخیر و سهولت انتقال را تعریف کنید.

اجازه دهید اکنون فایل .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>

یک ویژگی style در دستورالعمل @component اضافه شده است که در مرکز div را تراز می کند. اجازه دهید مثال زیر را برای درک همین موضوع در نظر بگیریم

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

در اینجا، یک کاراکتر ویژه [“] برای افزودن استایل به عنصر html، در صورت وجود، استفاده می‌شود. برای div، نام انیمیشن تعریف شده در فایل app.component.ts را داده ایم.

با کلیک یک دکمه، تابع animate را فراخوانی می کند که در فایل app.component.ts به صورت زیر تعریف شده است –

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

متغیر state تعریف می شود و مقدار پیش فرض کوچکتر به آن داده می شود. تابع animate وضعیت را با کلیک تغییر می دهد. اگر حالت بزرگتر باشد، به کوچکتر تبدیل می شود. و اگر کوچکتر باشد به بزرگتر تبدیل می شود.

خروجی در مرورگر (http://localhost:4200/) به این صورت خواهد بود –

با کلیک بر روی دکمه من کلیک کنید، موقعیت تصویر همانطور که در تصویر زیر نشان داده شده است تغییر می کند

تابع تبدیل در جهت y اعمال می شود که با کلیک بر روی دکمه Click Me از ۰ به ۱۰۰ پیکسل تغییر می کند. تصویر در پوشه assets/images ذخیره می شود.

منبع.

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

1. آموزش انگولار ۷
2. آموزش نمای کلی انگولار ۷
3. آموزش راه اندازی محیط انگولار ۷
4. آموزش راه اندازی پروژه در انگولار ۷
5. آموزش اجزای سازنده در انگولار ۷
6. آموزش ماژول ها در انگولار ۷
7. آموزش اتصال داده در انگولار ۷
8. آموزش اتصال رویداد در انگولار ۷
9. آموزش تمپلیت ها در انگولار ۷
10. آموزش دستورالعمل ها در انگولار ۷
11. آموزش پایپ ها در انگولار ۷
12. آموزش مسیریابی در انگولار ۷
13. آموزش سرویس ها در انگولار ۷
14. آموزش Http Client در انگولار ۷
15. آموزش درخواست های CLI در انگولار ۷
16. آموزش فرم ها در انگولار ۷
17. آموزش پیمایش مجازی در انگولار ۷
18. آموزش Drag and Drop در انگولار ۷