สถานะคืออะไร? เรียนรู้เพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวเชิงมุม

สถานะ

1. สถานะคืออะไร

สถานะแสดงถึงรูปแบบขององค์ประกอบที่จะย้ายในระยะต่างๆ ของการเคลื่อนไหว [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

2. ประเภทของสถานะ

ใน Angular มีสถานะอยู่สามประเภท: void , * , custom

void : สถานะนี้เกิดขึ้นเมื่อองค์ประกอบถูกสร้างขึ้นในหน่วยความจำ แต่ยังไม่ได้เพิ่มลงใน DOM หรือองค์ประกอบถูกลบออกจาก DOM

* : สถานะหลังจากองค์ประกอบถูกแทรกลงในแผนผัง DOM หรือเป็นองค์ประกอบอยู่แล้วใน สถานะต้นไม้ DOM หรือที่เรียกว่าสถานะเริ่มต้นแบบกำหนดเอง

custom สถานะแบบกำหนดเอง องค์ประกอบจะอยู่บนหน้าตามค่าเริ่มต้นและย้ายจากสถานะหนึ่งไปอีกสถานะหนึ่ง เช่น การพับและขยายแผง

3. ภาพเคลื่อนไหวการเข้าและออก

หมายความว่าองค์ประกอบจะปรากฏต่อหน้าผู้ใช้ในรูปแบบของภาพเคลื่อนไหวหลังจากที่ถูกสร้างขึ้น สถานะของภาพเคลื่อนไหวรายการจะแสดงด้วย void => * และนามแฝงคือ :enter

แอนิเมชั่นทางออกหมายถึงแอนิเมชั่นการอำลาที่ทำก่อนที่องค์ประกอบจะถูกลบ สถานะของแอนิเมชั่นทางออกคือ * => void และนามแฝงคือ :leave

เริ่มต้นอย่างรวดเร็ว

1. ก่อนที่จะใช้ฟังก์ชันแอนิเมชัน คุณต้องแนะนำโมดูลแอนิเมชั่น ซึ่งก็คือ BrowserAnimationsModule

นำเข้า { BrowserAnimationsModule } จาก "@เชิงมุม/แพลตฟอร์มเบราว์เซอร์/ภาพเคลื่อนไหว"

@NgModule({
  การนำเข้า: [BrowserAnimationsModule],
-
ส่งออกคลาส AppModule {}

2. การวิเคราะห์โค้ดเริ่มต้น งานการลบสิ่งที่ต้องทำ และการเพิ่มงาน

<!-- แนะนำ bootstrap.min.css ในไฟล์ index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<คลาส div="คอนเทนเนอร์">
  <h2>สิ่งที่ต้องทำ</h2>
  <div class="แบบฟอร์มกลุ่ม">
    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="เพิ่มสิ่งที่ต้องทำ" />
  </div>
  <ul class="รายการกลุ่ม">
    <li (คลิก)="removeItem(i)" *ngFor="let item of todos; ให้ i = index" class="list-group-item">
      {{ รายการ }}
    </li>
  </ul>
</div>

นำเข้า { ส่วนประกอบ } จาก "@เชิงมุม/แกน"

@ส่วนประกอบ({
  ตัวเลือก: "app-root",
  templateUrl: "./app.component.html",
  สไตล์: []
-
ส่งออกคลาส AppComponent {
  // รายการสิ่งที่ต้องทำ: string[] = ["เรียนรู้เชิงมุม", "เรียนรู้ RxJS", "เรียนรู้ NgRx"]
	// เพิ่มสิ่งที่ต้องทำ
  addItem (อินพุต: HTMLInputElement) {
    this.todos.push (อินพุตค่า)
    อินพุตค่า = ""
  -
	// ลบสิ่งที่ต้องทำ
  ลบรายการ (ดัชนี: หมายเลข) {
    this.todos.splice (ดัชนี 1)
  -
}

3. สร้างภาพเคลื่อนไหว

• วิธีการทริกเกอร์ใช้ในการสร้างภาพเคลื่อนไหว และ

• วิธีการเปลี่ยนใช้เพื่อระบุชื่อภาพเคลื่อนไหว แอนิเมชั่น

• วิธีสไตล์ใช้เพื่อตั้งค่าสไตล์ที่สอดคล้องกับองค์ประกอบในสถานะที่แตกต่างกัน

• วิธีการเคลื่อนไหวใช้เพื่อตั้งค่าพารามิเตอร์การเคลื่อนไหว เช่น เวลาการเคลื่อนไหวของแอนิเมชั่น เหตุการณ์ล่าช้า และรูปแบบการเคลื่อนไหว

@Component({
  ภาพเคลื่อนไหว: [
    //สร้างแอนิเมชั่น ชื่อแอนิเมชั่นคือสไลด์
    ทริกเกอร์ ("สไลด์", [
      //ระบุภาพเคลื่อนไหวทางเข้า หมายเหตุ: ไม่สามารถมีช่องว่างทั้งสองด้านของสตริง และอาจมีหรือไม่มีช่องว่างทั้งสองด้านของลูกศร // void => * สามารถแทนที่ด้วย: enter
      การเปลี่ยนแปลง ("เป็นโมฆะ => *", [
        // ระบุสไตล์ขององค์ประกอบก่อนที่จะเข้าสู่สไตล์ ({ ความทึบ: 0, แปลง: "translateY(40px)" }),
        //ระบุพารามิเตอร์สไตล์และการเคลื่อนไหวขององค์ประกอบหลังจากเข้าสู่ฉาก เคลื่อนไหว(250, สไตล์({ ความทึบ: 1, แปลง: "translateY(0)" }))
      -
      //ระบุภาพเคลื่อนไหวทางออก// * => void สามารถแทนที่ด้วย:leave
      การเปลี่ยนแปลง ("* => เป็นโมฆะ", [
        //ระบุพารามิเตอร์สไตล์และการเคลื่อนไหวขององค์ประกอบหลังจากที่มันปรากฏขึ้น เคลื่อนไหว(600, สไตล์({ ความทึบ: 0, แปลง: "translateX(100%)" }))
      -
    -
  -
})

หมายเหตุ: คุณไม่จำเป็นต้องระบุสถานะเริ่มต้นขององค์ประกอบในภาพเคลื่อนไหวทางเข้า Angular จะล้างสถานะเป็นโมฆะเป็น

ทริกเกอร์สถานะเริ่มต้น ("สไลด์", [
  การเปลี่ยนแปลง (": ป้อน", [
    สไตล์ ({ ความทึบ: 0, แปลง: "translateY (40px)" }),
    เคลื่อนไหว(250)
  -
  การเปลี่ยนแปลง (": ออก", [
 		เคลื่อนไหว (600, สไตล์ ({ ความทึบ: 0, แปลง: "translateX (100%)" }))
  -
])

หมายเหตุ: ในการตั้งค่าพารามิเตอร์การเคลื่อนไหวของภาพเคลื่อนไหว คุณต้องเปลี่ยนพารามิเตอร์หนึ่งของวิธีการเคลื่อนไหวเป็นประเภทสตริง

// เวลาดำเนินการภาพเคลื่อนไหวทั้งหมด เวลาหน่วงเวลา (ไม่บังคับ) รูปแบบการเคลื่อนไหว (ไม่บังคับ)
เคลื่อนไหว ("การคลายออก 600ms 1 วินาที", สไตล์ ({ ความทึบ: 0, แปลง: "translateX (100%)" }))

แอนิเมชั่นคีย์เฟรม

ภาพเคลื่อนไหวคีย์เฟรมถูกกำหนดโดยใช้วิธี keyframes

การเปลี่ยนแปลง (": ออก", [
  เคลื่อนไหว(
    600,
    คีย์เฟรม([
      สไตล์ ({ offset: 0.3, แปลง: "translateX(-80px)" }),
      สไตล์ ({ ชดเชย: 1, แปลง: "translateX (100%)" })
    -
  -
])

การโทรกลับของภาพเคลื่อนไหว

Angular มีฟังก์ชันเรียกกลับสองฟังก์ชันที่เกี่ยวข้องกับภาพเคลื่อนไหว ตามลำดับเมื่อภาพเคลื่อนไหวเริ่มต้นและหลังจากภาพเคลื่อนไหวเสร็จสิ้น

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

นำเข้า { AnimationEvent } จาก "@เชิงมุม/ภาพเคลื่อนไหว"

เริ่มต้น (เหตุการณ์: AnimationEvent) {
  console.log (เหตุการณ์)
-
เสร็จสิ้น (เหตุการณ์: AnimationEvent) {
  console.log (เหตุการณ์)
}

สร้างภาพเคลื่อนไหวที่นำมาใช้ซ้ำได้

1. วางคำจำกัดความของภาพเคลื่อนไหวในไฟล์แยกต่างหากเพื่ออำนวยความสะดวกในการเรียกคอมโพเนนต์หลายรายการ

นำเข้า { เคลื่อนไหว, คีย์เฟรม, สไตล์, การเปลี่ยนแปลง, ทริกเกอร์ } จาก "@เชิงมุม/ภาพเคลื่อนไหว"

ส่งออก const สไลด์ = ทริกเกอร์ ("สไลด์", [
  การเปลี่ยนแปลง (": ป้อน", [
    สไตล์ ({ ความทึบ: 0, แปลง: "translateY (40px)" }),
    เคลื่อนไหว(250)
  -
  การเปลี่ยนแปลง (": ออก", [
    เคลื่อนไหว(
      600,
      คีย์เฟรม([
        สไตล์ ({ offset: 0.3, แปลง: "translateX(-80px)" }),
        สไตล์ ({ ชดเชย: 1, แปลง: "translateX (100%)" })
      -
    -
  -
])

นำเข้า { สไลด์ } จาก "./animations"

@ส่วนประกอบ({
  แอนิเมชั่น: [สไลด์]
})

2. แยกคำจำกัดความของภาพเคลื่อนไหวที่เฉพาะเจาะจงเพื่ออำนวยความสะดวกในการเรียกภาพเคลื่อนไหวหลายรายการ

นำเข้า {ภาพเคลื่อนไหว ภาพเคลื่อนไหว คีย์เฟรม สไตล์ การเปลี่ยนแปลง ทริกเกอร์ useAnimation} จาก "@เชิงมุม/ภาพเคลื่อนไหว"

ส่งออก const slideInUp = ภาพเคลื่อนไหว ([
  สไตล์ ({ ความทึบ: 0, แปลง: "translateY (40px)" }),
  เคลื่อนไหว(250)
-

ส่งออก const slideOutLeft = ภาพเคลื่อนไหว ([
  เคลื่อนไหว(
    600,
    คีย์เฟรม([
      สไตล์ ({ offset: 0.3, แปลง: "translateX(-80px)" }),
      สไตล์ ({ ชดเชย: 1, แปลง: "translateX (100%)" })
    -
  -
-

ส่งออก const สไลด์ = ทริกเกอร์ ("สไลด์", [
  transition(":enter", useAnimation(slideInUp)),
  transition(":leave", useAnimation(slideOutLeft))
])

3. เมื่อเรียกแอนิเมชั่น ให้โอนเวลาการเคลื่อนไหวทั้งหมด เวลาหน่วง และรูปแบบการเคลื่อนไหว

ส่งออก const slideInUp = แอนิเมชั่น(
  -
    สไตล์ ({ ความทึบ: 0, แปลง: "translateY (40px)" }),
    เคลื่อนไหว ("{{ ระยะเวลา }} {{ ล่าช้า }} {{ ผ่อนคลาย }}")
  -
  -
    พารามิเตอร์: {
      ระยะเวลา: "400ms",
      ความล่าช้า: "0s",
      ผ่อนคลาย: "ผ่อนคลาย"
    -
  -
)

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

องค์ประกอบแบบสอบถามเพื่อแสดงภาพเคลื่อนไหว

Angular จัดเตรียมวิธี query เพื่อค้นหาองค์ประกอบและสร้างภาพเคลื่อนไหวสำหรับองค์ประกอบเหล่านั้น

นำเข้า { สไลด์ } จาก "./animations"

ภาพเคลื่อนไหว: [
  สไลด์,
  ทริกเกอร์ ("todoAnimations", [
    การเปลี่ยนแปลง (": ป้อน", [
      แบบสอบถาม ("h2", [
        สไตล์ ({ แปลง: "translateY (-30px)" }),
        เคลื่อนไหว(300)
      -
      // ค้นหาภาพเคลื่อนไหวลูกเพื่อดำเนินการค้นหา ("@slide", animateChild())
    -
  -
]

<div class="container" @todoAnimations>
  <h2>สิ่งที่ต้องทำ</h2>
  <ul class="รายการกลุ่ม">
    <li
      @สไลด์
      (คลิก)="removeItem(i)"
      *ngFor="let item of todos; ให้ i = ดัชนี"
      ชั้น = "รายการกลุ่มรายการ"
    -
      {{ รายการ }}
    </li>
  </ul>
</div>

ตามค่าเริ่มต้น ภาพเคลื่อนไหวหลักและภาพเคลื่อนไหวย่อยจะดำเนินการตามลำดับ group นั้นภาพเคลื่อนไหวย่อยจะถูกดำเนิน

การ
  การเปลี่ยนแปลง (": ป้อน", [
    กลุ่ม([
      แบบสอบถาม ("h2", [
        สไตล์ ({ แปลง: "translateY (-30px)" }),
        เคลื่อนไหว(300)
      -
      แบบสอบถาม("@slide", animateChild())
    -
  -
])

แอนิเมชั่นที่เซ

Angular จัดให้มีวิธีการซวนเซเพื่อชะลอการดำเนินการของภาพเคลื่อนไหวของแต่ละองค์ประกอบในทางกลับกันเมื่อองค์ประกอบหลายรายการดำเนินการภาพเคลื่อนไหวเดียวกันในเวลาเดียวกัน

การเปลี่ยนแปลง (": ป้อน", [
  กลุ่ม([
    แบบสอบถาม ("h2", [
      สไตล์ ({ แปลง: "translateY (-30px)" }),
      เคลื่อนไหว(300)
    -
    แบบสอบถาม("@slide", ซวนเซ (200, animateChild()))
  -
])

ภาพเคลื่อนไหวสถานะที่กำหนดเอง

ภายในวิธีการสืบค้น

เชิงมุมให้วิธี state ในการกำหนดสถานะ

1. การวิเคราะห์โค้ดเริ่มต้น

<div class="container">
  <div class="แผงพาเนล-ค่าเริ่มต้น">
    <div class="panel-heading" (คลิก)="toggle()">
      เฟรมเวิร์กเดียว หลายแพลตฟอร์ม อุปกรณ์เคลื่อนที่และเดสก์ท็อป</div>
    <div class="แผงร่างกาย">
      <p>
        ใช้เทมเพลตการประกาศง่ายๆ เพื่อปรับใช้คุณสมบัติต่างๆ ได้อย่างรวดเร็ว ขยายภาษาเทมเพลตด้วยส่วนประกอบที่กำหนดเองและส่วนประกอบที่มีอยู่มากมาย รับการสนับสนุน Angular ในเกือบทุก IDE
        เพื่อขอความช่วยเหลือและข้อเสนอแนะทันที ทั้งหมดนี้จะช่วยให้คุณเขียนแอปพลิเคชันที่สวยงามได้ แทนที่จะต้องใช้สมองในการทำให้โค้ด "ใช้งานได้"
      </p>
      <p>
        ตั้งแต่ต้นแบบไปจนถึงการใช้งานทั่วโลก Angular สามารถให้การสนับสนุน Google แก่คุณได้
        โครงสร้างพื้นฐานและเทคโนโลยีที่ปรับขนาดได้สูงสำหรับแอปพลิเคชันขนาดใหญ่
      </p>
      <p>
        เข้าถึงเว็บวันนี้ (และพรุ่งนี้) ด้วย Web Workers และการเรนเดอร์ฝั่งเซิร์ฟเวอร์
        ความเร็วสูงสุดที่ทำได้บนแพลตฟอร์ม Angular ช่วยให้คุณควบคุมความสามารถในการปรับขนาดได้อย่างมีประสิทธิภาพ อิงจาก RxJS, Immutable.js และโมเดลพุชอื่นๆ ทำให้สามารถปรับให้เข้ากับความต้องการข้อมูลขนาดใหญ่ได้
      </p>
      <p>
        เรียนรู้การใช้งานเชิงมุม
        สร้างแอปพลิเคชันแล้วนำโค้ดและความสามารถเหล่านี้กลับมาใช้ใหม่ในแอปพลิเคชันบนแพลตฟอร์มที่แตกต่างกันมากมาย -
        เว็บ เว็บบนมือถือ แอพมือถือ แอพเนทีฟ และแอพเนทีฟเดสก์ท็อป
      </p>
    </div>
  </div>
</div>
<สไตล์>
  .คอนเทนเนอร์ {
    ขอบบน: 100px;
  -
  .พาเนลหัว {
    เคอร์เซอร์: ตัวชี้;
  -
</style>

นำเข้า { ส่วนประกอบ } จาก "@เชิงมุม/แกน"

@ส่วนประกอบ({
  ตัวเลือก: "app-root",
  templateUrl: "./app.component.html",
  สไตล์: []
-
ส่งออกคลาส AppComponent {
  isExpended: บูลีน = เท็จ
  สลับ() {
    this.isExpended = !this.isExpended
  -
}

2. สร้างทริกเกอร์ภาพ

เคลื่อนไหว ("expandCollapse", [
  // ใช้เมธอด state เพื่อกำหนดสไตล์ที่สอดคล้องกับสถานะองค์ประกอบสถานะแบบพับ (
    "พังทลาย",
    สไตล์({
      ส่วนสูง: 0,
      ล้น: "ซ่อน",
      ช่องว่างภายในด้านบน: 0,
      ช่องว่างภายใน: 0
    -
  -
  // ใช้วิธีการของรัฐเพื่อกำหนดสไตล์ที่สอดคล้องกับสถานะองค์ประกอบรัฐขยาย ("ขยาย", สไตล์ ({ ความสูง: "*", ล้น: "อัตโนมัติ" }))
  // กำหนดการเปลี่ยนภาพเคลื่อนไหวการขยาย ("ยุบ => ขยาย", เคลื่อนไหว ("การค่อยๆ ขยาย 400 มิลลิวินาที"))
  // กำหนดการเปลี่ยนภาพเคลื่อนไหวแบบพับ ("ขยาย => ยุบ", เคลื่อนไหว ("ความง่ายในการ 400ms"))
])

<div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>

ภาพเคลื่อนไหวการกำหนดเส้นทาง

1. เพิ่มตัวระบุสถานะให้กับเส้นทาง ตัวระบุนี้เป็นสถานะที่กำหนดเองเมื่อเส้นทางดำเนินการภาพเคลื่อนไหว

const เส้นทาง: Routes = [
  -
    เส้นทาง: "",
    ส่วนประกอบ: HomeComponent,
    pathMatch: "เต็ม"
    ข้อมูล: {
      แอนิเมชั่น: "หนึ่ง" 
    -
  -
  -
    เส้นทาง: "เกี่ยวกับ"
    ส่วนประกอบ: AboutComponent,
    ข้อมูล: {
      แอนิเมชั่น: "สอง"
    -
  -
  -
    เส้นทาง: "ข่าว"
    ส่วนประกอบ: NewsComponent,
    ข้อมูล: {
      แอนิเมชั่น: "สาม"
    -
  -
]

2. รับตัวระบุสถานะการกำหนดเส้นทางผ่านออบเจ็กต์ซ็อกเก็ตการกำหนดเส้นทาง และส่งตัวระบุไปยังผู้เรียกแอนิเมชันเพื่อให้แอนิเมชันดำเนินการสถานะปัจจุบันที่จะดำเนินการ

<div class="routerContainer" [@routerAnimations]=" เตรียมเส้นทาง(ทางออก)">
  <เราเตอร์-outlet #outlet="outlet"></router-outlet>
</div>

นำเข้า { RouterOutlet } จาก "@เชิงมุม/เราเตอร์"

ส่งออกคลาส AppComponent {
  เตรียมเส้นทาง (เต้าเสียบ: RouterOutlet) {
    กลับ (
      ทางออก &&
      ร้าน.activatedRouteData &&
      outlet.activatedRouteData.animation
    -
  -
}

3. ตั้งค่า routerContainer เป็นตำแหน่งที่สัมพันธ์กัน และตั้งค่าองค์ประกอบลูกระดับแรกโดยตรงเป็นตำแหน่งที่แน่นอน

/* styles.css */
.เราเตอร์คอนเทนเนอร์ {
  ตำแหน่ง: ญาติ;
-

.เราเตอร์คอนเทนเนอร์ > * {
  ตำแหน่ง: แน่นอน;
  ซ้าย: 0;
  ด้านบน: 0;
  ความกว้าง: 100%;
}

4. สร้างทริกเกอร์ภาพ

เคลื่อนไหว ("routerAnimations", [
  การเปลี่ยนแปลง ("หนึ่ง => สอง, หนึ่ง => สาม, สอง => สาม", [
    query(":enter", style({ แปลง: "translateX(100%)", ความทึบ: 0 })),
    กลุ่ม([
      แบบสอบถาม(
        ":เข้า",
        เคลื่อนไหว(
          "ความง่ายในการ 0.4 วินาที",
          สไตล์ ({ แปลง: "translateX (0)", ความทึบ: 1 })
        -
      -
      แบบสอบถาม(
        ":ออกจาก",
        เคลื่อนไหว(
          "การผ่อนผัน 0.4 วินาที",
          สไตล์({
            แปลงร่าง: "translateX(-100%)",
            ความทึบ: 0
          -
        -
      -
    -
  -
  การเปลี่ยนแปลง ("สาม => สอง, สาม => หนึ่ง, สอง => หนึ่ง", [
    แบบสอบถาม(
      ":เข้า",
      สไตล์ ({ แปลง: "translateX (-100%)", ความทึบ: 0 })
    -
    กลุ่ม([
      แบบสอบถาม(
        ":เข้า",
        เคลื่อนไหว(
          "ความง่ายในการ 0.4 วินาที",
          สไตล์ ({ แปลง: "translateX (0)", ความทึบ: 1 })
        -
      -
      แบบสอบถาม(
        ":ออกจาก",
        เคลื่อนไหว(
          "การผ่อนผัน 0.4 วินาที",
          สไตล์({
            แปลงร่าง: "translateX(100%)",
            ความทึบ: 0
          -
        -
      -
    -
  -
])

สำหรับความรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรม โปรดไปที่: วิดีโอการเขียนโปรแกรม! -

ข้างต้นคืออะไรสถานะคืออะไร? เรียนรู้เพิ่มเติมเกี่ยวกับแอนิเมชั่นใน Angular สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!