Сложные последовательности

Последнее обновление 17 июля 2019 08:10:49 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Помимо анимации отдельных элементов HTML. Angular также позволяет нам анимировать согласованные последовательности, такие как вся сетка или список элементов, когда они входят и покидают страницу. Мы можем выбрать запуск нескольких анимаций параллельно или последовательную анимацию дискретно, одну за другой.

Вот некоторые из функций, которые управляют сложными анимационными последовательностями:

query () находит один или несколько внутренних элементов HTML.
stagger () применяет каскадную задержку к анимации для нескольких элементов.
group () выполняет несколько шагов анимации параллельно.
sequence () запускает шаги анимации один за другим.

Анимируйте несколько элементов, используя функции query () и stagger ()

Функция query () позволяет вам находить внутренние элементы в анимируемом элементе. Эта функция предназначается для определенных элементов HTML в родительском компоненте и применяет анимацию к каждому элементу индивидуально. Angular интеллектуально управляет настройкой, разборкой и очисткой, координируя элементы по всей странице.

Функция stagger () позволяет определить временной интервал между каждым запрашиваемым элементом, который анимируется, и, таким образом, анимирует элементы с задержкой между ними.

Вкладка Filter / Stagger в живом примере показывает список героев с вводной последовательностью. Весь список героев идет каскадно, с небольшой задержкой сверху вниз.

В следующем примере показано, как использовать функции query () и stagger () для записи анимированного элемента.

Используйте query () для поиска любого элемента, входящего или выходящего из страницы. Запрос указывает элементы, соответствующие определенным критериям класса CSS.
Для каждого из этих элементов используйте style (), чтобы установить одинаковый начальный стиль для элемента. Сделайте его невидимым и используйте transform, чтобы переместить его из положения, чтобы он мог скользить на месте.
Используйте stagger (), чтобы задержать каждую анимацию на 30 миллисекунд.
Анимируйте каждый элемент на экране в течение 0,5 секунды, используя настраиваемую кривую замедления, одновременно добавляя и отменяя преобразование.

Код TypeScript:

animations: [
    trigger('pageAnimations', [
      transition(':enter', [
        query('.hero, form', [
          style({opacity: 0, transform: 'translateY(-100px)'}),
          stagger(-30, [
            animate('500ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 1, transform: 'none' }))
          ])
        ])
      ])
    ]),
  ]
})
export class HeroListPageComponent implements OnInit {
  @HostBinding('@pageAnimations')
  public animatePage = true;
  _heroes = [];
  heroTotal = -1;
  get heroes() {
    return this._heroes;
  }
  ngOnInit() {
    this._heroes = HEROES;
  }
  updateCriteria(criteria: string) {
    criteria = criteria ? criteria.trim() : '';
    this._heroes = HEROES.filter(hero => hero.name.toLowerCase().includes(criteria.toLowerCase()));
    const newTotal = this.heroes.length;
    if (this.heroTotal !== newTotal) {
      this.heroTotal = newTotal;
    } else if (!criteria) {
      this.heroTotal = -1;
    }
  }
}

Демонстрация в реальном времени:

Посмотрите, как Pen использует триггер для анимации от w3resource ( @ w3resource ) на CodePen .

Параллельная анимация с использованием функции group ()

Вы видели, как добавить задержку между каждой последовательной анимацией. Но вы также можете настроить анимацию, которая происходит параллельно. Например, вы можете захотеть анимировать два свойства CSS одного и того же элемента, но использовать разные функции замедления для каждого из них. Для этого вы можете использовать функцию animation group ().

Примечание. Функция group () используется для группировки шагов анимации, а не анимированных элементов.

В следующем примере использование групп для обоих: ввод и: оставьте разрешение для двух разных конфигураций синхронизации. Они применяются к одному и тому же элементу параллельно, но работают независимо.

Код TypeScript:

animations: [
  trigger('flyInOut', [
    state('in', style({
      width: 120,
      transform: 'translateX(0)', opacity: 1
    })),
    transition('void => *', [
      style({ width: 10, transform: 'translateX(50px)', opacity: 0 }),
      group([
        animate('0.3s 0.1s ease', style({
          transform: 'translateX(0)',
          width: 120
        })),
        animate('0.3s ease', style({
          opacity: 1
        }))
      ])
    ]),
    transition('* => void', [
      group([
        animate('0.3s ease', style({
          transform: 'translateX(50px)',
          width: 10
        })),
        animate('0.3s 0.2s ease', style({
          opacity: 0
        }))
      ])
    ])
  ])
]

Демонстрация в реальном времени:

Смотрите параллельную анимацию Pen от w3resource ( @ w3resource ) на CodePen .

Последовательная и параллельная анимация

Сложные анимации могут иметь много вещей, происходящих одновременно. Но что, если вы хотите создать анимацию, включающую несколько анимаций, происходящих одна за другой? Ранее мы использовали group () для одновременного запуска нескольких анимаций.

Вторая функция sequence () позволяет вам запускать те же анимации одну за другой. Внутри sequence () шаги анимации состоят из вызовов функций style () или animate ().

Используйте style () для немедленного применения предоставленных данных стиля.
Используйте animate (), чтобы применить данные стилей за определенный промежуток времени.

Пример анимации фильтра

Давайте посмотрим на другую анимацию на странице примера. На вкладке «Фильтр / Stagger» введите текст в поле «Поиск героев», например, «Магнит» или «Торнадо».

Фильтр работает в режиме реального времени при вводе. Элементы покидают страницу при вводе каждой новой буквы, и фильтр становится все более строгим. Список героев постепенно возвращается на страницу по мере удаления каждой буквы в окне фильтра.

Шаблон HTML содержит триггер с именем filterAnimation.

ЦСИ / приложение / герой-список-page.component.html

<ul class="heroes" [@filterAnimation]="heroTotal">
</ul>

Демонстрация в реальном времени:

Смотрите анимацию пера от w3resource ( @ w3resource ) на CodePen .

Файл компонента содержит три перехода.

@Component({
  animations: [
    trigger('filterAnimation', [
      transition(':enter, * => 0, * => -1', []),
      transition(':increment', [
        query(':enter', [
          style({ opacity: 0, width: '0px' }),
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 1, width: '*' })),
          ]),
        ], { optional: true })
      ]),
      transition(':decrement', [
        query(':leave', [
          stagger(50, [
            animate('300ms ease-out', style({ opacity: 0, width: '0px' })),
          ]),
        ])
      ]),
    ]),
  ]
})
export class HeroListPageComponent implements OnInit {
  heroTotal = -1;
}

Демонстрация в реальном времени:

Смотрите анимацию пера от w3resource ( @ w3resource ) на CodePen .

Анимация делает следующее:

Игнорирует любые анимации, которые выполняются, когда пользователь впервые открывает или переходит на эту страницу. Фильтр сужает то, что уже есть, поэтому он предполагает, что любые анимированные элементы HTML уже существуют в DOM.
Выполняет фильтр совпадений для совпадений.

Для каждого матча:

Скрывает элемент, делая его полностью прозрачным и бесконечно узким, устанавливая его непрозрачность и ширину равными 0.
Анимация в элементе более 300 миллисекунд. Во время анимации элемент принимает ширину и непрозрачность по умолчанию.
Если имеется несколько совпадающих элементов, в каждом элементе начинаются помехи, начиная с верхней части страницы, с задержкой в 50 миллисекунд между каждым элементом.

Резюме

Угловые функции для анимации нескольких элементов начинаются с query (), чтобы найти внутренние элементы, например, собирая все изображения внутри <div>. Оставшиеся функции, stagger (), group () и sequence (), применяют каскады или позволяют вам контролировать применение нескольких шагов анимации.

Предыдущая: Введение в угловую анимацию
Далее: Многоразовые анимации