JQuery jest napisane w JavaScript. Jako ktoś, kto zna każdą z nich, muszę się zastanowić, jak napisali część z nich. W jaki sposób animujesz elementy HTML w czystym JavaScript? Czy jest to po prostu ciągłe aktualizowanie właściwości CSS, która ma być animowana, przy użyciu standardowej manipulacji DOM, z wywołaniami zwrotnymi, aby uczynić ją asynchroniczną? Czy jest to coś bardziej wyrafinowanego?Jak robi się animacja JQuery?
Animacje jQuery jedynie aktualizują właściwości CSS na czasomierzu cyklicznym (co powoduje, że jest on asynchroniczny).
Implementują również algorytm generowania klatek pośrednich, który śledzi, czy animacja jest przed planem, czy nie, i dostosowuje rozmiar kroku w animacji na każdym kroku, aby nadrobić zaległości lub zwolnić w razie potrzeby. Pozwala to na zakończenie animacji w określonym czasie, bez względu na szybkość działania komputera-hosta. Minusem jest to, że wolne lub obciążone komputery będą wyświetlać więcej przerywanych animacji.
Obsługują również funkcje wygładzania, które sterują czasem/kształtem przyspieszenia animacji. Linear oznacza stałą prędkość. Swing jest bardziej typowy, zacznij powoli, przyspieszyć do maksymalnej prędkości w środku, a następnie powoli.
Ponieważ animacje są asynchroniczne, jQuery implementuje także kolejkę animacji, dzięki czemu można określić wiele animacji, które mają być wyświetlane, uruchamiać kolejno po sobie. Druga animacja rozpoczyna się po zakończeniu pierwszej animacji i tak dalej. jQuery oferuje również funkcję uzupełniania, więc jeśli chcesz, aby jakiś twój własny kod był uruchamiany po zakończeniu animacji, możesz określić funkcję wywołania zwrotnego, która zostanie wywołana po zakończeniu animacji. Pozwala to na wykonanie pewnych operacji po zakończeniu animacji, takich jak uruchomienie animacji innego obiektu, ukrycie obiektu itp.
FYI, jQuery javascript source code jest w pełni dostępny, jeśli chcesz uzyskać więcej szczegółów. Rdzeniem pracy jest lokalna funkcja o nazwie doAnimation(), jednak większość prac wykonywana jest w funkcjach o nazwach step i update, które można znaleźć w definicji jQuery.fx.prototype.
Podczas inspekcji elementu podczas animacji jQuery prawie zawsze zmienia on kod CSS, który jest przypisany do elementu przez jQuery, który nie jest tak naprawdę przypisany do zapisywanego przez Ciebie kodu HTML. Zdobądź FireBuga, jeśli nie masz go na firefox i sprawdź, co się dzieje, gdy animacje są wykonywane.
bez konieczności odczytać kodu siebie, z tego co rozumiem, to jest rzeczywiście przy użyciu standardowych metod i właściwości JavaScript, żeby zaktualizować elementów DOM i stylów CSS w regularnych odstępach czasu („Spełnia”), która to realizuje przy użyciu standardowych setInterval() i setTimeout() metod .
To wszystko: zwykły stary setInterval i niektóre manipulacje DOM.
Oczywiście kod jest nieco bardziej skomplikowany.
Wygląd: http://code.jquery.com/jquery-latest.js, w pobliżu końca pliku. Wyszukaj jQuery.fx.prototype.
Zdajesz sobie sprawę, że możesz po prostu otworzyć dowolny plik Jquery.js i przekonać się, prawda? Oto oficjalny kod źródłowy w całości: https://github.com/jquery/jquery/tree/master/src – asawyer
[Dlaczego nie spojrzeć na siebie?] (Http://code.jquery.com/jquery- 1.7.2.js) –
@asawyer tak, ale źródło nie obsługuje technicznych wyjaśnień. Pokazuje tylko, jak to działa, a nie dlaczego tak się dzieje i jak coś takiego działa w teorii. –