Angular7-アニメーション

アニメーションは、html要素間に多くの相互作用を追加します。アニメーションはAngular2で利用可能でした。Angular4以降、アニメーションは@ 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';

ここでは、トリガー、状態、スタイル、遷移、およびアニメーションを@ 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')) 
   ]) 
]

トリガーは、アニメーションの開始を定義します。それに対する最初のパラメータは、アニメーションを適用する必要があるhtmlタグに与えられるアニメーションの名前です。2番目のパラメーターは、インポートした関数(state、transitionなど)です。

状態関数には、要素が遷移するアニメーションステップが含まれます。現在、小さい状態と大きい状態の2つの状態を定義しています。小さい状態の場合は、スタイルを指定しましたtransform:translateY(100px) そして transform:translateY(100px)

遷移関数は、html要素にアニメーションを追加します。最初の引数は開始状態と終了状態を取り、2番目の引数は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ディレクティブに追加されたstyleプロパティがあり、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 フォルダ。