08

Anime.js

Anime.js

Цель: познакомиться с функциями-конструкторами, ключевым словом this, добавлением анимаций с помощью библиотеки anime.js.

Содержание и порядок выполнения лабораторной работы:

  1. Изучить объекты, методы объектов, функции-конструкторы, ключевые слова new и this.
  2. Создать новую страницу animation.html в проекте из предыдущих лабораторных работ. Добавить ссылку на эту страницу в меню макета.
  3. К странице подключить минифицированный файл библиотеки anime.js и main.js, в котором вы будете писать ваш код.
  4. Написать функцию-конструктор, которая принимает DOM-элемент и параметры анимации и добавляет метод animate при вызове, которого добавляется анимация со случайным свойством из transform с помощью функции anime из библиотеки. Также по завершении анимации в консоль должна выводиться информация об элементе, на котором закончилась анимация. Пример кода ниже.
  5. На страницу добавить кнопку, при нажатии на которую на страницу добавляется новый элемент, для него создается новый объект с помощью функции-конструктора и вызывается метод animate для запуска анимации.
  6. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
  7. Загрузить проект на сервер через sftp или используя ssh.
function AnimationTarget(el, ...) {
  this.el = el;
  // другие параметры из конструктора

  this.animate = function() {
    anime({
      targets: this.el,
      // другие параметры анимации
    });
  }
}

Требования к JS:

  • Все задачи имеют решение и требуемый в них вывод.
  • Отсутствуют ошибки в консоли браузера при работе с веб-страницей.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Вопросы для защиты

  1. Что такое метод объекта?
  2. Что такое функция-конструктор?
  3. Для чего используется ключевое слово new?
  4. Как работает и на что указывает ключевое слово this?
Предыдущая Следующая