Angular 4 - ภาพเคลื่อนไหว

แอนิเมชั่นเพิ่มปฏิสัมพันธ์ระหว่างองค์ประกอบ html แอนิเมชั่นยังสามารถใช้ได้กับ Angular2 ความแตกต่างของ Angular 4 คือภาพเคลื่อนไหวไม่ได้เป็นส่วนหนึ่งของไฟล์@angular/core ไลบรารี แต่เป็นแพ็กเกจแยกต่างหากที่ต้องนำเข้า app.module.ts.

ในการเริ่มต้นเราต้องนำเข้าไลบรารีดังนี้ -

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

BrowserAnimationsModule จำเป็นต้องเพิ่มในอาร์เรย์นำเข้าใน app.module.ts ดังแสดงด้านล่าง -

app.module.ts

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 { }

ใน 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 { 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

ตอนนี้เราจะเพิ่มคุณสมบัติภาพเคลื่อนไหวให้กับมัณฑนากร @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 ที่ต้องใช้ภาพเคลื่อนไหว พารามิเตอร์ตัวที่สองคือฟังก์ชันที่เรานำเข้า - สถานะการเปลี่ยนแปลง ฯลฯ

stateฟังก์ชันเกี่ยวข้องกับขั้นตอนการเคลื่อนไหวซึ่งองค์ประกอบจะเปลี่ยนไปมาระหว่าง ตอนนี้เราได้กำหนดสองสถานะเล็กและใหญ่ สำหรับรัฐที่เล็กกว่าเราได้กำหนดรูปแบบtransform:translateY(100px) และ transform:translateY(100px).

ฟังก์ชันการเปลี่ยนจะเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบ html อาร์กิวเมนต์แรกใช้สถานะคือเริ่มต้นและสิ้นสุด อาร์กิวเมนต์ที่สองยอมรับฟังก์ชัน animate ฟังก์ชัน 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;
   }
`],

ในที่นี้จะใช้อักขระพิเศษ [`] เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ html ถ้ามี สำหรับ div เราได้กำหนดชื่อภาพเคลื่อนไหวที่กำหนดไว้ในไฟล์ app.component.ts

เมื่อคลิกปุ่มจะเรียกใช้ฟังก์ชัน animate ซึ่งกำหนดไว้ในไฟล์ app.component.ts ดังนี้ -

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

ตัวแปรสถานะถูกกำหนดและกำหนดให้ค่าเริ่มต้นน้อยลง ฟังก์ชัน animate จะเปลี่ยนสถานะเมื่อคลิก หากรัฐมีขนาดใหญ่ขึ้นก็จะเปลี่ยนเป็นรัฐเล็กลง และถ้าเล็กกว่าก็จะแปลงเป็นขนาดใหญ่

นี่คือผลลัพธ์ในเบราว์เซอร์ (http://localhost:4200/) จะมีลักษณะดังนี้ -

เมื่อคลิกที่ไฟล์ Click Me ตำแหน่งของภาพจะเปลี่ยนไปตามที่แสดงในภาพหน้าจอต่อไปนี้ -

ฟังก์ชันการแปลงถูกนำไปใช้ในไฟล์ yทิศทางซึ่งเปลี่ยนจาก 0 เป็น 100px เมื่อคลิกปุ่ม Click Me ภาพจะถูกเก็บไว้ในไฟล์assets/images โฟลเดอร์