कोणीय 7 - एनिमेशन

एनिमेशन html एलिमेंट्स के बीच बहुत अधिक इंटरैक्शन जोड़ता है। एनीमेशन Angular 2 के साथ उपलब्ध था, Angular 4 आगे से एनीमेशन @ angular / core लाइब्रेरी का हिस्सा नहीं है, बल्कि एक अलग पैकेज है जिसे app.module.ts में आयात करने की आवश्यकता है।

शुरू करने के लिए, हमें लाइब्रेरी को कोड की निचली पंक्ति के साथ आयात करना होगा -

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

BrowserAnimationsModule में आयात सरणी में जोड़ा जाना चाहिए 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 को एक छवि के साथ जोड़ा है। एक क्लिक ईवेंट है जिसके लिए चेतन फ़ंक्शन कहा जाता है। और 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';

यहां हमने @ कोणीय / एनिमेशन से ट्रिगर, राज्य, शैली, संक्रमण और चेतन आयात किया है।

अब, हम एनिमेशन प्रापर्टी को @Component () डेकोरेटर में जोड़ेंगे -

animations: [ 
   trigger('myanimation',[
      state('smaller',style({ 
         transform : 'translateY(100px)' })), 
      state('larger',style({
         transform : 'translateY(0px)' })), 
         transition('smaller <=> larger',animate('300ms ease-in')) 
   ]) 
]

ट्रिगर एनीमेशन की शुरुआत को परिभाषित करता है। इसके लिए पहला परमपद html टैग को दिए जाने वाले एनीमेशन का नाम है जिसमें एनीमेशन को लागू करने की आवश्यकता है। दूसरा परमार्थ वे कार्य हैं जिन्हें हमने आयात किया है - राज्य, संक्रमण, आदि।

राज्य फ़ंक्शन में एनीमेशन चरण शामिल हैं, जो तत्व के बीच संक्रमण करेगा। अभी हमने दो राज्यों को परिभाषित किया है, छोटे और बड़े। छोटे राज्य के लिए, हमने शैली दी हैtransform:translateY(100px) तथा transform:translateY(100px)

संक्रमण फ़ंक्शन 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>

@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 फ़ाइल।

एक बटन के क्लिक पर यह चेतन फ़ंक्शन को कॉल करता है, जिसे में परिभाषित किया गया है app.component.ts फाइल इस प्रकार है -

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

राज्य चर को परिभाषित किया गया है और छोटे के रूप में डिफ़ॉल्ट मान दिया गया है। चेतन फ़ंक्शन क्लिक पर राज्य को बदलता है। यदि राज्य बड़ा है, तो यह छोटे में परिवर्तित हो जाएगा; और अगर छोटा होता है, तो यह बड़े में बदल जाएगा।

यह कैसे ब्राउज़र में आउटपुट है (http://localhost:4200/) जैसा दिखेगा -

पर क्लिक करने पर Click Me बटन, छवि की स्थिति को निम्न स्क्रीनशॉट में दिखाया गया है -

ट्रांस्फ़ॉर्म फ़ंक्शन को y दिशा में लागू किया जाता है, जिसे क्लिक मी बटन पर क्लिक करने पर 0 से 100px में बदल दिया जाता है। छवि में संग्रहीत हैassets/images फ़ोल्डर।