JQuery написан на Javascript. Как кто-то, кто знает немного каждого, я должен задаться вопросом, как они написали кое-что из этого. Как вы одушевляете HTML-элементы в чистом Javascript? Это просто многократно обновляет свойство CSS, которое должно быть анимировано, используя стандартную манипуляцию DOM, с обратными вызовами, чтобы сделать его асинхронным? Или это нечто более сложное?Как JQuery делает анимацию?
jQuery анимации просто обновляют свойства CSS на повторяющемся таймере (что делает его асинхронным).
Они также реализуют алгоритм tweening, который отслеживает, превышает ли анимация по расписанию или позади графика, и они корректируют размер шага в анимации на каждом шаге, чтобы догнать или замедлить по мере необходимости. Это позволяет завершить анимацию в указанное время независимо от того, насколько быстро работает хост-компьютер. Недостатком является то, что медленные или занятые компьютеры будут показывать более прерывистые анимации.
Они также поддерживают функции ослабления, которые управляют временем/формой ускорения анимации. Linear означает постоянную скорость. Swing является более типичным, начинайте медленно, ускоряйтесь до максимальной скорости в середине, а затем медленно.
Поскольку анимация асинхронна, jQuery также реализует очередь анимации, чтобы вы могли указать несколько анимаций, которые вы хотите увидеть, выполнить один за другим. Вторая анимация начинается, когда заканчивается первая анимация и так далее. jQuery также предлагает функцию завершения, поэтому, если вы хотите, чтобы какой-либо из ваших собственных кодов запускался, когда анимация завершена, вы можете указать функцию обратного вызова, которая будет вызвана, когда анимация завершится. Это позволяет выполнить некоторую операцию, когда анимация завершена, например, начать анимацию какого-либо другого объекта, скрыть объект и т. Д.
FYI, jQuery javascript source code полностью доступен, если вы хотите получить более подробную информацию. Ядро работы находится в локальной функции, называемой doAnimation(), хотя большая часть работы выполняется в функциях, называемых step и update, которые могут быть найдены с определением jQuery.fx.prototype.
При проверке элемента во время анимации jQuery почти всегда он изменяет ваш CSS-код, который присваивается элементу через jQuery, который на самом деле не назначен из HTML, который вы пишете. Получите FireBug, если у вас его нет для firefox и проверьте, что происходит во время анимации.
Не прочитав код сам, из того, что я понимаю, действительно использует стандартные методы и свойства Javascript для обновления элементов DOM и стилей CSS с регулярными интервалами («тики»), которые он выполняет с использованием стандартных методов setInterval() и setTimeout() ,
Вот и все: простой старый наборInterval и некоторые манипуляции с DOM.
Конечно, код немного сложнее.
Посмотрите: http://code.jquery.com/jquery-latest.js, в конце файла. Найдите jQuery.fx.prototype.
Вы понимаете, что можете открыть любой файл Jquery.js и сами убедиться в этом? Вот официальный исходный код целиком: https://github.com/jquery/jquery/tree/master/src – asawyer
[Почему бы вам не посмотреть сами?] (Http://code.jquery.com/jquery- 1.7.2.js) –
@asawyer да, но источник не служит техническому объяснению. Это просто показывает, как это происходит, а не почему это делается именно так и как что-то подобное работает теоретически. –