Analisis mendalam tentang cara menggunakan animasi dalam Angular

Artikel ini akan memperkenalkan anda kepada animasi Angular, saya harap ia akan membantu anda! !

1. Nyatakan

1.1 Apa itu keadaan

Keadaan mewakili rupa unsur yang hendak digerakkan pada peringkat gaya pergerakan yang berbeza. [Cadangan tutorial berkaitan: "tutorial sudut"]

1.2 Jenis status

Dalam Angular, terdapat tiga jenis Keadaan tersebut ialah: void, *, custom

kosong: apabila elemen dicipta dalam ingatan Tetapi ini keadaan berlaku apabila elemen belum ditambahkan pada DOM atau dialih keluar daripada DOM*: Keadaan di mana elemen itu dimasukkan selepas pepohon

atau sudah berada dalam

. Keadaan unsur dalam pepohon juga dipanggil keadaan lalai DOMDOM

tersuai

: keadaan tersuai Elemen berada pada halaman secara lalai dan bergerak dari satu keadaan ke keadaan lain, seperti lipatan daripada panel dan berkembang.

1.3 Animasi masuk dan keluar

Animasi masuk bermaksud elemen muncul di hadapan pengguna dalam bentuk animasi selepas ia dibuat Keadaan animasi masukan diwakili oleh

, dan aliasnya ialah

void => *:enter

Animasi keluar merujuk kepada animasi perpisahan yang dilakukan sebelum elemen dipadamkan Status animasi keluar diwakili oleh

dan aliasnya ialah

* => void :leave

2 Mulakan dengan pantas

Sebelum menggunakan fungsi animasi, anda perlu memperkenalkan modul animasi. , iaitu,

BrowserAnimationsModule

Analisis kod lalai,

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

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

Memadamkan tugasan dan menambah tugas

todo

<!-- 在 index.html 文件中引入 bootstrap.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />

<div class="container">
  <h2>Todos</h2>
  <div class="form-group">
    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />
  </div>
  <ul class="list-group">
    <li (click)="removeItem(i)" *ngFor="let item of todos; let i = index" class="list-group-item">
      {{ item }}
    </li>
  </ul>
</div>

Mencipta animasi

import { Component } from "@angular/core"

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent {
  // todo 列表
  todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
  // 添加 todo
  addItem(input: HTMLInputElement) {
    this.todos.push(input.value)
    input.value = ""
  }
  // 删除 todo
  removeItem(index: number) {
    this.todos.splice(index, 1)
  }
}

digunakan untuk mencipta animasi dan menentukan nama animasi

• trigger

kaedah digunakan untuk menentukan keadaan gerakan animasi, animasi keluar atau kemasukan animasi, atau animasi keadaan tersuai. Kaedah

• transition

digunakan untuk menetapkan gaya yang sepadan dengan elemen dalam keadaan yang berbeza

• style

kaedah digunakan untuk menetapkan. parameter gerakan , seperti masa pergerakan animasi, peristiwa tertunda, bentuk pergerakan

• animate

@Component({
  animations: [
    // 创建动画, 动画名称为 slide
    trigger("slide", [
      // 指定入场动画 注意: 字符串两边不能有空格, 箭头两边可以有也可以没有空格
      // void => * 可以替换为 :enter
      transition("void => *", [
        // 指定元素未入场前的样式
        style({ opacity: 0, transform: "translateY(40px)" }),
        // 指定元素入场后的样式及运动参数
        animate(250, style({ opacity: 1, transform: "translateY(0)" }))
      ]),
      // 指定出场动画
      // * => void 可以替换为 :leave
      transition("* => void", [
        // 指定元素出场后的样式和运动参数
        animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
      ])
    ])
  ]
})

Nota: Keadaan lalai elemen tidak perlu dinyatakan dalam animasi masuk,

<li @slide></li>

akan Kosongkan keadaan

sebagai keadaan lalai

Angularvoid

Nota: Untuk menetapkan parameter gerakan animasi, anda perlu menukar satu parameter kaedah

trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
    animate(600, style({ opacity: 0, transform: "translateX(100%)" }))
  ])
])

kepada jenis rentetan

animate

3 Animasi kerangka kunci

// 动画执行总时间 延迟时间(可选) 运动形式(可选)
animate("600ms 1s ease-out", style({ opacity: 0, transform: "translateX(100%)" }))

Animasi kerangka kunci menggunakan definisi kaedah

<.>4. Panggilan balik animasikeyframes

transition(":leave", [
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

Menyediakan dua fungsi panggil balik yang berkaitan dengan animasi, masing-masing apabila animasi memulakan pelaksanaan dan selepas pelaksanaan animasi selesai

Angular5. Cipta animasi boleh guna semula

<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>

Takrifan diletakkan dalam fail berasingan untuk memudahkan panggilan berbilang komponen.

import { AnimationEvent } from "@angular/animations"

start(event: AnimationEvent) {
  console.log(event)
}
done(event: AnimationEvent) {
  console.log(event)
}

Ekstrak definisi animasi khusus untuk memudahkan berbilang panggilan animasi.

import { animate, keyframes, style, transition, trigger } from "@angular/animations"

export const slide = trigger("slide", [
  transition(":enter", [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate(250)
  ]),
  transition(":leave", [
    animate(
      600,
      keyframes([
        style({ offset: 0.3, transform: "translateX(-80px)" }),
        style({ offset: 1, transform: "translateX(100%)" })
      ])
    )
  ])
])

import { slide } from "./animations"

@Component({
  animations: [slide]
})

Hantar jumlah masa gerakan, masa tunda dan bentuk gerakan semasa memanggil animasi

import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"

export const slideInUp = animation([
  style({ opacity: 0, transform: "translateY(40px)" }),
  animate(250)
])

export const slideOutLeft = animation([
  animate(
    600,
    keyframes([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

export const slide = trigger("slide", [
  transition(":enter", useAnimation(slideInUp)),
  transition(":leave", useAnimation(slideOutLeft))
])

6. Animasi pelaksanaan elemen pertanyaan

export const slideInUp = animation(
  [
    style({ opacity: 0, transform: "translateY(40px)" }),
    animate("{{ duration }} {{ delay }} {{ easing }}")
  ],
  {
    params: {
      duration: "400ms",
      delay: "0s",
      easing: "ease-out"
    }
  }
)

transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))

Sederhana Menyediakan kaedah

untuk mencari elemen dan mencipta animasi untuk elemen

AngularquerySecara lalai, animasi ibu bapa dan animasi anak dilaksanakan mengikut urutan, dengan animasi induk dilaksanakan terlebih dahulu, dan kemudian animasi kanak-kanak , anda boleh menggunakan kaedah

untuk menjadikannya selari

import { slide } from "./animations"

animations: [
  slide,
  trigger("todoAnimations", [
    transition(":enter", [
      query("h2", [
        style({ transform: "translateY(-30px)" }),
        animate(300)
      ]),
      // 查询子级动画 使其执行
      query("@slide", animateChild())
    ])
  ])
]

<div class="container" @todoAnimations>
  <h2>Todos</h2>
  <ul class="list-group">
    <li
      @slide
      (click)="removeItem(i)"
      *ngFor="let item of todos; let i = index"
      class="list-group-item"
    >
      {{ item }}
    </li>
  </ul>
</div>

7 Animasi berjalin group

trigger("todoAnimations", [
  transition(":enter", [
    group([
      query("h2", [
        style({ transform: "translateY(-30px)" }),
        animate(300)
      ]),
      query("@slide", animateChild())
    ])
  ])
])

menyediakan kaedah

, apabila berbilang elemen dilaksanakan. animasi yang sama pada masa yang sama, Biarkan pelaksanaan setiap animasi elemen ditangguhkan secara bergilir-gilir.

AngularstaggerNota: Kaedah

hanya boleh digunakan dalam kaedah

transition(":enter", [
  group([
    query("h2", [
      style({ transform: "translateY(-30px)" }),
      animate(300)
    ]),
    query("@slide", stagger(200, animateChild()))
  ])
])

stagger8 Animasi status tersuaiquery

Menyediakan

kaedah untuk menentukan status.

Angularstate

Analisis kod lalai

Buat animasi

trigger("expandCollapse", [
  // 使用 state 方法定义折叠状态元素对应的样式
  state(
    "collapsed",
    style({
      height: 0,
      overflow: "hidden",
      paddingTop: 0,
      paddingBottom: 0
    })
  ),
  // 使用 state 方法定义展开状态元素对应的样式
  state("expanded", style({ height: "*", overflow: "auto" })),
  // 定义展开动画
  transition("collapsed => expanded", animate("400ms ease-out")),
  // 定义折叠动画
  transition("expanded => collapsed", animate("400ms ease-in"))
])

<div class="panel-body" [@expandCollapse]="isExpended ? &#39;expanded&#39; : &#39;collapsed&#39;"></div>

9.  路由动画

为路由添加状态标识，此标识即为路由执行动画时的自定义状态

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
    pathMatch: "full",
    data: {
      animation: "one" 
    }
  },
  {
    path: "about",
    component: AboutComponent,
    data: {
      animation: "two"
    }
  },
  {
    path: "news",
    component: NewsComponent,
    data: {
      animation: "three"
    }
  }
]

通过路由插座对象获取路由状态标识，并将标识传递给动画的调用者，让动画执行当前要执行的状态是什么

<div class="routerContainer" [@routerAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

import { RouterOutlet } from "@angular/router"

export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return (
      outlet &&
      outlet.activatedRouteData &&
      outlet.activatedRouteData.animation
    )
  }
}

将 routerContainer 设置为相对定位，将它的直接一级子元素设置成绝对定位

/* styles.css */
.routerContainer {
  position: relative;
}

.routerContainer > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

创建动画

trigger("routerAnimations", [
  transition("one => two, one => three, two => three", [
    query(":enter", style({ transform: "translateX(100%)", opacity: 0 })),
    group([
      query(
        ":enter",
        animate(
          "0.4s ease-in",
          style({ transform: "translateX(0)", opacity: 1 })
        )
      ),
      query(
        ":leave",
        animate(
          "0.4s ease-out",
          style({
            transform: "translateX(-100%)",
            opacity: 0
          })
        )
      )
    ])
  ]),
  transition("three => two, three => one, two => one", [
    query(
      ":enter",
      style({ transform: "translateX(-100%)", opacity: 0 })
    ),
    group([
      query(
        ":enter",
        animate(
          "0.4s ease-in",
          style({ transform: "translateX(0)", opacity: 1 })
        )
      ),
      query(
        ":leave",
        animate(
          "0.4s ease-out",
          style({
            transform: "translateX(100%)",
            opacity: 0
          })
        )
      )
    ])
  ])
])

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Analisis mendalam tentang cara menggunakan animasi dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!