מדריך אנימציות באנגולר - מתקדם

בחלק הקודם הכרנו איך להשתמש באנמציות של אנגולר בצורה בסיסית, במידה שאתם לא מכירים אנמציות של אנגולר אני ממליץ בחום לקרוא תחילה את המדריך הבסיסי לפני שממשיכים עם המדריך הזה.

כמו שהכותרת מרמזת, כאן נלמד טכניקות יותר מתקדמות באנימציות אנגולר.

במידה שאנחנו רוצים אנמציה שמגיבה ללחיצת כפתור או שינוי של משתנה כלשהו ולא רק יציאה וכניסה של רכיב לדף נעשה את זה כך:

לרכיב שלנו קוראים child.component.ts

אנחנו כותבים את האנמציה בקובץ חיצוני לרכיב כדי שיהיה גלובלי לכל הפרויקט, שם הקובץ colors-changer.animations.ts

<p [@colors]="colorChange? 'blue' : 'red'">
    child works!
</p>
<button (click)="toggle()">toggle</button>

import { Component, OnInit } from '@angular/core';
import { colorChanger } from '../animations/colors-changer.animations';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  animations: [
    colorChanger
  ]
})
export class ChildComponent implements OnInit {
  colorChange: boolean = false;
  constructor() { }

  ngOnInit() {
  }
  toggle() {
    this.colorChange = !this.colorChange;
  }
}

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

export let colorChanger = trigger('colors', [
    state('red', style({
        backgroundColor: 'red'
    })),
    state('blue', style({
        backgroundColor: 'blue'
    })),
    transition('red<=>blue', [
        animate(2000)
    ])
])

מה עשינו כאן?

colors-changer.animations.ts – מאכלס את האנמציה שלנו, יש לנו מצב אדום (red) ומצב כחול (blue) שקובעים שהרקע ישתנה בהתאם וכמובן שאפשר להוסיף ערכים נוספים לכל אחד מהם.

אחרי שקבענו מה יקרה בכל מצב, אנחנו מוסיפים את המעבר, אצלנו או דו-כיווני והזמן שנקבע הוא 2000 מילי-שניות.

child.component – די פשוט, יש לנו משתנה בשם colorChange שמחליף מצב בין true ל-false בפונקציה toggle.

ב-html של הרכיב יש כמובן כפתור שמפעיל את הפונקציה toggle כל פעם שלוחצים עליו ובפיסקה יש לנו את הטריגר ולמה הוא שווה.

במילים אחרות יש לנו מעבר ממצב למצב אחר ולכן גם כאן אפשר לקצר קצת ולכתוב את האנמציה כך:

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

export let colorChanger = trigger('colors', [
    state('red', style({
        backgroundColor: 'red'
    })),
    state('blue', style({
        backgroundColor: 'blue'
    })),
    transition('* => *', [  //    <----- מעבר מכל מצב לכל מצב
        animate(2000)
    ])
])

בגלל שכוכבית היא מצב ולא משנה איזה, אז גם void נכלל בפנים (גם הוא סוג של מצב). כך שבמקום לכתוב

void => *

אפשר לכתוב כוכבית לכוכבית כמו בדוגמה למעלה.

אני לא ארחיב בנושא אבל זה טוב לדעת, יש אפשרות לנטרל את האנמציות כך:

<div [@.disabled]="isDisabled">
  <p [@colors]="colorChange?'blue':'red'">
    child works!
  </p>
  <button (click)="toggle()">toggle</button>
</div>

רק חשוב לזכור! זה מנטרל את כל האנמציות בתוכו, לא משנה אם מדובר על רכיבים אחרים. במילים אחרות, אם נשים את זה על ה-body אז לא יהיו אנמציות בכל האתר.

הפעלת פונקציות על ידי האנימציה

אנחנו גם יכולים לדעת מתי האנמציה התחילה ומתי היא הסתיימה, זה טוב לנו אם אנחנו רוצים להפעיל פונקציה נוספת בהתאם לאנמציה.

<div>
    <p [@colors]="colorChange?'blue':'red'" 
    (@colors.start)="animationStatus($event)" 
    (@colors.done)="animationStatus($event)">
        child works!
    </p>
    <button (click)="toggle()">toggle</button>
    <pre>STATUS: {{data|json}}</pre>
</div>

import { Component, OnInit } from '@angular/core';
import { colorChanger } from '../animations/colors-changer.animations';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  animations: [
    colorChanger
  ]
})
export class ChildComponent implements OnInit {
  colorChange: boolean = false;
  data: string = '';
  constructor() { }

  ngOnInit() {
  }
  toggle() {
    this.colorChange = !this.colorChange;
  }
  animationStatus(value: string) {
    this.data = value;
  }
}

התוצאה נראת כך:

בהתחלה
STATUS: {
  "element": {},
  "triggerName": "colors",
  "fromState": "void",
  "toState": "red",
  "phaseName": "done",
  "totalTime": 2000,
  "disabled": false,
  "_data": 2
}
בזמן מעבר
STATUS: {
  "element": {},
  "triggerName": "colors",
  "fromState": "red",
  "toState": "blue",
  "phaseName": "start",
  "totalTime": 2000,
  "disabled": false,
  "_data": 5
}
בסוף מעבר
STATUS: {
  "element": {},
  "triggerName": "colors",
  "fromState": "red",
  "toState": "blue",
  "phaseName": "done",
  "totalTime": 2000,
  "disabled": false,
  "_data": 5
}

כמו שניתן לראות אנחנו מקבלים את כל המידע שצריך כדי לדעת איזה אנמציה רצה, מאיזה מצב לאיזה מצב ומה המצב שלה.

אנימציה בשלבים

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

export let colorChanger = trigger('colors', [
    state('red', style({
        backgroundColor: 'red'
    })),
    state('blue', style({
        backgroundColor: 'blue'
    })),
    transition('*=>*', [  //    <----- מעבר מכל מצב לכל מצב
        animate(5000,keyframes([
            style({height: '20px',offset:0}),
            style({height: '40px',offset:0.2}),
            style({height: '10px',offset:0.4}),
            style({height: '20px',offset:0.6}),
        ]))
    ])
])

כמו ב-CSS , גם כאן אנחנו משתמשים ב-keyframes , ה-offset הוא מיקום יחסי לזמן הכללי של האנמציה.

יש עוד מספר דברים יותר מסובכים שאפשר לעשות עם אנימציות, נדבר עליהם בפוסט אחר בהמשך…. כרגע יש לכם מספיק מידע לגרום לאתר שלכם לזוז ו"לרקוד" כמו שהמקצוענים עושים 😁.

מדריך אנימציות באנגולר – מתקדם

מה עשינו כאן?

במילים אחרות יש לנו מעבר ממצב למצב אחר ולכן גם כאן אפשר לקצר קצת ולכתוב את האנמציה כך:

אני לא ארחיב בנושא אבל זה טוב לדעת, יש אפשרות לנטרל את האנמציות כך:

הפעלת פונקציות על ידי האנימציה

אנימציה בשלבים

השארת תגובה

שדה טקסט עשיר עם תמונות

איך למשוך דינמית favicon של אתרים אחרים ב-JS

צור קשר

מה עשינו כאן?

במילים אחרות יש לנו מעבר ממצב למצב אחר ולכן גם כאן אפשר לקצר קצת ולכתוב את האנמציה כך:

אני לא ארחיב בנושא אבל זה טוב לדעת, יש אפשרות לנטרל את האנמציות כך:

הפעלת פונקציות על ידי האנימציה

אנימציה בשלבים

פוסטים קשורים:

השארת תגובה

סינון על פי קטגוריות

צור קשר