1. Общая структура Anime.js
Сила Anime.js в том, что кода очень мало, но функция очень мощная. Давайте изучим ядро исходного кода Anime.js~
Основная причина, по которой Anime.js такой мощный, заключается в том, что структура его кода разработана очень умно и разумно, поэтому, если мы хотим освоить ядро Anime.js, мы должны сначала понять его структуру.
Структура Anime.js выглядит следующим образом:
Оранжевые квадраты — это API, предоставляемые браузером. Три синих квадрата ниже — это методы, реализованные самим Anime.js.
Мы будем интерпретировать и реализовывать их один за другим ниже.
2. Реализация движка Anime.js—engine()
сначала понять что такое
requestAnimationFrame（）方法
грамматика:
window.requestAnimationFrame(callback); window.requestAnimationFrame(callback) Сообщите браузеру, что вы хотите выполнить анимацию, и попросите браузер вызвать указанную функцию обратного вызова, чтобы обновить анимацию перед следующей перерисовкой.
Этот метод должен передать функцию обратного вызова callbackв качестве параметра, и функция обратного вызова будет выполнена перед следующей перерисовкой браузера.
callback内部还接受一个参数，该参数表示开始去执行回调函数的时刻。
Примечание. Если вы хотите продолжить обновление следующего кадра анимации перед следующей перерисовкой браузера, сама функция обратного вызова должна быть вызвана снова. window.requestAnimationFrame()
То есть:
window.requestAnimationFrame()是创建了一个方法去等待执行。
Поскольку есть ожидание, будут и отмены. window.cancelAnimationFrame() для отмены функции обратного вызова.window.requestAnimationFrame()会返回一个ID，将这个ID传给window.cancelAnimationFrame()。
Реализация движка engine():
Зачем использовать замыкания?
Метод движка движка и метод анимации аниме не объединены, поэтому мы можем вызывать метод анимэ несколько раз, а это значит, что вызов метода анимэ нацелен на один движок, но все они вызывают один и тот же метод, поэтому как?в чем разница? С помощью замыканий можно создавать разные блоки памяти , чтобы разные методы аниме соответствовали разным движкам.
Эффект:
