ما هي الحالة؟ تعلم المزيد عن الرسوم المتحركة في الزاوي

ولاية

1. ما هي الحالة

؟ تمثل الحالة نمط العنصر الذي سيتم تحريكه في مراحل الحركة المختلفة. [البرامج التعليمية الموصى بها: "البرنامج التعليمي الزاوي"]

2. أنواع الحالات

في Angular، هناك ثلاثة أنواع من الحالات: void ، * ، custom

void : تحدث هذه الحالة عندما يتم إنشاء العنصر في الذاكرة ولكن لم تتم إضافته بعد إلى DOM أو تتم إزالة العنصر من DOM

* : الحالة بعد إدراج العنصر في شجرة DOM، أو أنه عنصر موجود بالفعل في DOM حالة شجرة DOM، وتسمى أيضًا الحالة الافتراضية المخصصة

custom الحالة المخصصة، يكون العنصر موجودًا في الصفحة افتراضيًا وينتقل من حالة إلى أخرى، مثل طي اللوحة وتوسيعها.

3. الرسوم المتحركة للدخول والخروج

تعني أن العنصر يظهر أمام المستخدم على شكل رسوم متحركة بعد إنشائه، ويتم تمثيل حالة الرسوم المتحركة للدخول بالرمز void => * ، والاسم المستعار هو :enter

تشير الرسوم المتحركة للخروج إلى الرسوم المتحركة التي تم إجراؤها قبل حذف العنصر. حالة الرسوم المتحركة للخروج هي * => void ، والاسم المستعار هو :leave

ابدأ بسرعة

1. قبل استخدام وظيفة الرسوم المتحركة، تحتاج إلى تقديم وحدة الرسوم المتحركة، وهي BrowserAnimationsModule

استيراد { BrowserAnimationsModule } من "@angular/platform-browser/animations"

@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 class="container">
  <h2>الكل</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 i = Index" class="list-group-item">
      {{ غرض }}
    </لي>
  </ul>
</div>

استيراد { Component } من "@angular/core"

@عنصر({
  المحدد: "جذر التطبيق"،
  templateUrl: "./app.component.html"،
  الأنماط: []
})
فئة التصدير AppComponent {
  // قائمة المهام: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
	// إضافة ما يجب القيام به
  addItem(الإدخال: HTMLInputElement) {
    this.todos.push(input.value)
    قيمة الإدخال = ""
  }
	// حذف ما يجب القيام به
  إزالة العنصر (الفهرس: الرقم) {
    this.todos.splice(الفهرس، 1)
  }
}

3. إنشاء الرسوم المتحركة.

• يتم استخدام طريقة التشغيل لإنشاء الرسوم المتحركة، ويتم

• استخدام طريقة الانتقال لتحديد اسم الرسوم المتحركة. يتم استخدام طريقة الانتقال لتحديد حالة الحركة للرسوم المتحركة، أو الخروج من الرسوم المتحركة أو الرسوم المتحركة للدخول، أو الحالة المخصصة الرسوم المتحركة.

• يتم استخدام أسلوب النمط لتعيين النمط المطابق للعنصر في حالات مختلفة.

• يتم استخدام أسلوب الرسوم المتحركة لتعيين معلمات الحركة، مثل وقت حركة الرسوم المتحركة والأحداث المتأخرة ونماذج الحركة

@Component({.
  الرسوم المتحركة: [
    // إنشاء رسوم متحركة، اسم الرسوم المتحركة هو الشريحة
    الزناد ("الشريحة"، [
      // تحديد الرسوم المتحركة للمدخل ملاحظة: لا يمكن أن تكون هناك مسافات على جانبي السلسلة، وقد تكون هناك مسافات على جانبي السهم وقد لا تكون // void => * يمكن استبدالها بـ: enter
      انتقال ("باطل => *"، [
        // حدد نمط العنصر قبل أن يدخل style({ opacity: 0, Transform: "translateY(40px)" }),
        // حدد معلمات النمط والحركة للعنصر بعد الدخول إلى المشهد animate(250, style({ opacity: 1, converter: "translateY(0)" }))
      ])،
      // تحديد الرسوم المتحركة للخروج // * => يمكن استبدال الفراغ بـ: leave
      انتقال ("* => باطل"، [
        // حدد معلمات النمط والحركة للعنصر بعد ظهوره animate(600, style({ opacity: 0, Transform: "translateX(100%)" }))
      ])
    ])
  ]
})

ملاحظة: لا تحتاج إلى تحديد الحالة الافتراضية للعنصر في الرسوم المتحركة للمدخل، حيث ستقوم Angular بمسح حالة الفراغ كمشغل الحالة الافتراضية

("slide"، [.
  الانتقال (":أدخل"، [
    النمط ({ العتامة: 0، التحويل: "translateY(40px)" })،
    الرسوم المتحركة (250)
  ])،
  الانتقال (":إجازة"، [
 		تحريك (600، نمط ({ التعتيم: 0، تحويل: "translateX(100%)" }))
  ])
])

ملاحظة: لتعيين معلمات الحركة للرسوم المتحركة، تحتاج إلى تغيير معلمة واحدة من طريقة الرسوم المتحركة إلى نوع سلسلة

// إجمالي وقت تنفيذ الرسوم المتحركة ووقت التأخير (اختياري) ونموذج الحركة (اختياري)
animate("600 مللي ثانية 1 ثانية"، style({ العتامة: 0, تحويل: "translateX(100%)" }))

الرسوم المتحركة للإطار الرئيسي

يتم تعريف الرسوم المتحركة للإطار الرئيسي باستخدام طريقة keyframes

الانتقال (":إجازة"، [
  تحريك(
    600،
    الإطارات الرئيسية([
      النمط ({إزاحة: 0.3، تحويل: "translateX(-80px)" })،
      النمط ({الإزاحة: 1، التحويل: "translateX(100%)" })
    ])
  )
])

رد الاتصال بالرسوم المتحركة

يوفر Angular وظيفتين رد الاتصال المتعلقتين بالرسوم المتحركة، على التوالي عند بدء الرسوم المتحركة وبعد اكتمال الرسوم المتحركة.

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

استيراد { AnimationEvent } من "@angular/animations"

بدء (الحدث: حدث الرسوم المتحركة) {
  console.log(الحدث)
}
تم (الحدث: حدث الرسوم المتحركة) {
  console.log(الحدث)
}

إنشاء رسوم متحركة قابلة لإعادة الاستخدام

1. ضع تعريف الرسوم المتحركة في ملف منفصل لتسهيل استدعاءات المكونات المتعددة.

استيراد { تحريك، إطارات رئيسية، نمط، انتقال، تشغيل } من "@angular/animations"

تصدير شريحة const = الزناد ("الشريحة"، [
  الانتقال (":أدخل"، [
    النمط ({ العتامة: 0، التحويل: "translateY (40px)" })،
    الرسوم المتحركة (250)
  ])،
  الانتقال (":إجازة"، [
    تحريك(
      600،
      الإطارات الرئيسية([
        النمط ({إزاحة: 0.3، تحويل: "translateX(-80px)" })،
        النمط ({الإزاحة: 1، التحويل: "translateX(100%)" })
      ])
    )
  ])
])

استيراد {شريحة} من "./الرسوم المتحركة"

@عنصر({
  الرسوم المتحركة: [الشريحة]
})

2. استخرج تعريفات محددة للرسوم المتحركة لتسهيل مكالمات الرسوم المتحركة المتعددة.

استيراد {animate, Animation, keyframes, style, Transition, Trigger, useAnimation} من "@angular/animations"

تصدير const SlideInUp = الرسوم المتحركة([
  النمط ({ العتامة: 0، التحويل: "translateY(40px)" })،
  الرسوم المتحركة (250)
])

تصدير const SlideOutLeft = الرسوم المتحركة([
  تحريك(
    600،
    الإطارات الرئيسية([
      النمط ({إزاحة: 0.3، تحويل: "translateX(-80px)" })،
      النمط ({الإزاحة: 1، التحويل: "translateX(100%)" })
    ])
  )
])

تصدير شريحة const = الزناد ("الشريحة"، [
  انتقال (":أدخل"، useAnimation(slideInUp))،
  انتقال (":مغادرة"، useAnimation (slideOutLeft))
])

3. عند استدعاء الرسوم المتحركة، قم بنقل إجمالي وقت الحركة ووقت التأخير وتصدير نموذج الحركة

const SlideInUp = Animation(
  [
    النمط ({ العتامة: 0، التحويل: "translateY(40px)" })،
    تحريك ("{{ المدة }} {{ تأخير }} {{ تخفيف }}")
  ]،
  {
    المعلمات: {
      المدة: "400 مللي ثانية"،
      تأخير: "0s"،
      تخفيف: "تخفيف"
    }
  }
)

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

عنصر الاستعلام لتنفيذ الرسوم المتحركة

يوفر Angular طريقة query للعثور على العناصر وإنشاء رسوم متحركة لها

استيراد {شريحة} من "./الرسوم المتحركة"

الرسوم المتحركة: [
  شريحة,
  الزناد ("todoAnimations"، [
    الانتقال (":أدخل"، [
      الاستعلام ("h2"، [
        النمط ({تحويل: "translateY(-30px)" })،
        الرسوم المتحركة (300)
      ])،
      // الاستعلام عن الرسوم المتحركة التابعة لتنفيذ الاستعلام ("@slide"، animateChild())
    ])
  ])
]

<div class="container" @todoAnimations>
  <h2>الكل</h2>
  <ul class="list-group">
    <لي
      @الشريحة
      (انقر) = "إزالة العنصر (أنا)"
      *ngFor = "السماح بعنصر المهام؛ Let i = Index"
      فئة = "قائمة مجموعة العنصر"
    >
      {{ غرض }}
    </لي>
  </ul>
</div>

افتراضيًا، يتم تنفيذ الرسوم المتحركة الأصلية والرسوم المتحركة group بالترتيب، ثم يتم تنفيذ الرسوم المتحركة الفرعية

.
  الانتقال (":أدخل"، [
    مجموعة([
      الاستعلام ("h2"، [
        النمط ({تحويل: "translateY(-30px)" })،
        الرسوم المتحركة (300)
      ])،
      الاستعلام ("@الشريحة"، animateChild ())
    ])
  ])
])

الرسوم المتحركة متداخلة

يوفر Angular طريقة stagger لتأخير تنفيذ الرسوم المتحركة لكل عنصر على حدة عندما تقوم عناصر متعددة بتنفيذ نفس الرسوم المتحركة في نفس الوقت.

الانتقال (":أدخل"، [
  مجموعة([
    الاستعلام ("h2"، [
      النمط ({تحويل: "translateY(-30px)" })،
      الرسوم المتحركة (300)
    ])،
    الاستعلام ("@ الشريحة"، stagger (200، animateChild ()))
  ])
])

الرسوم المتحركة للحالة المخصصة

داخل طريقة الاستعلام.

يوفر Angular طريقة state لتعريف الحالة.

1. تحليل الكود الافتراضي

<div class="container">
  <div class="panel Panel-default">
    <div class="panel-heading" (انقر)="toggle()">
      إطار عمل واحد ومنصات متعددة والجوال وسطح المكتب</div>
    <div class="panel-body">
      <ص>
        استخدم قوالب تعريفية بسيطة لتنفيذ الميزات المتنوعة بسرعة. قم بتوسيع لغة القالب بمكونات مخصصة ومجموعة واسعة من المكونات الموجودة. احصل على الدعم لـ Angular في أي بيئة تطوير متكاملة (IDE) تقريبًا
        للحصول على مساعدة فورية وردود الفعل. كل هذا لمساعدتك على كتابة تطبيقات جميلة، بدلاً من إرهاق عقلك لجعل الكود "يعمل".
      </ص>
      <ص>
        من النموذج الأولي إلى النشر العالمي، يمكن لـ Angular أن تقدم لك الدعم لـ Google
        بنية تحتية وتقنيات قابلة للتطوير بشكل كبير للتطبيقات واسعة النطاق.
      </ص>
      <ص>
        يمكنك الوصول إلى الويب اليوم (وغدًا) من خلال Web Workers والعرض من جانب الخادم
        أعلى سرعة يمكن تحقيقها على المنصة. يمنحك Angular تحكمًا فعالاً في قابلية التوسع. استنادًا إلى RxJS وImmutable.js ونماذج الدفع الأخرى، يمكنه التكيف مع متطلبات البيانات الضخمة.
      </ص>
      <ص>
        تعلم كيفية استخدام الزاوي
        قم ببناء التطبيقات ثم أعد استخدام هذه التعليمات البرمجية والإمكانيات في التطبيقات على العديد من الأنظمة الأساسية المختلفة -
        الويب، وويب الهاتف المحمول، وتطبيقات الهاتف المحمول، والتطبيقات الأصلية، والتطبيقات الأصلية لسطح المكتب.
      </ص>
    </div>
  </div>
</div>
<نمط>
  .حاوية {
    الهامش العلوي: 100 بكسل؛
  }
  عنوان اللوحة {
    المؤشر: المؤشر؛
  }
</style>

استيراد { Component } من "@angular/core"

@عنصر({
  المحدد: "جذر التطبيق"،
  templateUrl: "./app.component.html"،
  الأنماط: []
})
فئة التصدير AppComponent {
  isExpened: منطقية = خطأ
  تبديل () {
    this.isExpened = !this.isExpened
  }
}

2. إنشاء

مشغل الرسوم المتحركة ("expandCollapse"، [
  // استخدم طريقة الحالة لتحديد النمط المطابق لحالة عنصر الحالة المطوية (
    "انهارت"،
    أسلوب({
      الارتفاع: 0,
      الفائض: "مخفي"،
      الحشو العلوي: 0،
      الحشو السفلي: 0
    })
  )،
  // استخدم طريقة الحالة لتحديد النمط المطابق لعنصر الحالة الموسعة State("expanded"، style({ height: "*"، overflow: "auto" }))),
  // تحديد انتقال الرسوم المتحركة التوسعية ("collapsed => Extended"، animate("400ms easy-out"))،
  // تحديد انتقال الرسوم المتحركة القابلة للطي ("expanded =>lapsed"، animate("400ms easy-in"))
])

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

الرسوم المتحركة للتوجيه

1. أضف معرف الحالة إلى المسار. هذا المعرف هو الحالة المخصصة عندما يقوم المسار بتنفيذ

مسارات ثابتة للرسوم المتحركة: المسارات = [.
  {
    طريق: ""،
    المكون: هومكومبونينت،
    pathMatch: "كامل"،
    بيانات: {
      الرسوم المتحركة: "واحد" 
    }
  },
  {
    المسار: "حول"،
    المكون: حول المكون،
    بيانات: {
      الرسوم المتحركة: "اثنان"
    }
  },
  {
    المسار: "الأخبار"،
    المكون: مكون الأخبار،
    بيانات: {
      الرسوم المتحركة: "ثلاثة"
    }
  }
]

2. احصل على معرف حالة التوجيه من خلال كائن مأخذ التوجيه، وقم بتمرير المعرف إلى المتصل بالرسوم المتحركة للسماح للرسوم المتحركة بتنفيذ الحالة الحالية التي سيتم تنفيذها

<div class="routerContainer" [@routerAnimations]=" إعداد الطريق (المنفذ)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

استيراد { RouterOutlet } من "@angular/router"

فئة التصدير AppComponent {
  إعداد الطريق (المخرج: RouterOutlet) {
    يعود (
      مَنفَذ &&
      منفذ.activatedRouteData &&
      activatedRouteData.animation
    )
  }
}

3. اضبط routerContainer على الموضع النسبي، واضبط عناصره الفرعية المباشرة من المستوى الأول على الموضع المطلق

/*styles.css */
حاوية جهاز التوجيه {
  الموقف: نسبي؛
}

.routerContainer > * {
  الموقف: مطلق؛
  اليسار: 0؛
  أعلى: 0؛
  العرض: 100%؛
}

4. إنشاء

مشغل الرسوم المتحركة ("routerAnimations"، [
  انتقال ("واحد => اثنان، واحد => ثلاثة، اثنان => ثلاثة"، [
    query(":enter"، style({ تحويل: "translateX(100%)"، العتامة: 0 })))،
    مجموعة([
      استفسار(
        ":يدخل"،
        تحريك(
          "0.4 ثانية سهولة"،
          النمط ({تحويل: "translateX(0)"، العتامة: 1 })
        )
      )،
      استفسار(
        ":يترك"،
        تحريك(
          "سهولة 0.4 ثانية"،
          أسلوب({
            تحويل: "ترجمةX(-100%)"،
            التعتيم: 0
          })
        )
      )
    ])
  ])،
  انتقال ("ثلاثة => اثنان، ثلاثة => واحد، اثنان => واحد"، [
    استفسار(
      ":يدخل"،
      النمط ({تحويل: "translateX(-100%)"، العتامة: 0 })
    )،
    مجموعة([
      استفسار(
        ":يدخل"،
        تحريك(
          "0.4 ثانية سهولة الدخول"،
          النمط ({تحويل: "translateX(0)"، العتامة: 1 })
        )
      )،
      استفسار(
        ":يترك"،
        تحريك(
          "سهولة 0.4 ثانية"،
          أسلوب({
            تحويل: "ترجمةX(100%)"،
            التعتيم: 0
          })
        )
      )
    ])
  ])
])

لمزيد من المعرفة المتعلقة بالبرمجة، يرجى زيارة: فيديو البرمجة! !

ما سبق هو ما هو الوضع؟ تعرف على المزيد حول الرسوم المتحركة في Angular لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!