gsap
Płynne animacje interfejsu JARVIS z GSAP — przejścia, efekty i sekwencje czasowe
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill GSAP daje Ci dostęp do profesjonalnych animacji GreenSock Animation Platform dla interfejsu asystenta JARVIS. Tworzysz gładkie przejścia paneli HUD, animacje wskaźników statusu, efekty wizualizacji danych i sekwencje czasowe. Skill kładzie nacisk na wydajność — używa transformacji i opacity dla przyspieszenia GPU, unika problemów z layoutem i respektuje preferencje użytkownika dotyczące zmniejszonej animacji. Każda animacja wymaga czyszczenia po rozładowaniu komponentu, aby uniknąć wycieków pamięci.
Jak używać
Zainstaluj skill GSAP w swoim projekcie JARVIS, dodając go do konfiguracji umiejętności asystenta. Sprawdź, że masz dostęp do biblioteki GreenSock Animation Platform i że Twój projekt obsługuje TypeScript.
Przed napisaniem animacji napisz test — to kluczowa praktyka TDD opisana w dokumentacji. Test powinien sprawdzać, czy animacja wchodzi z poprawnymi właściwościami, czy respektuje preferencje zmniejszonej animacji i czy prawidłowo się czyści.
W komponencie Vue, gdzie chcesz animować panel HUD, zaimportuj GSAP i zdefiniuj animację używając transformacji lub opacity — nigdy nie animuj właściwości, które powodują zmianę layoutu. Użyj GPU-accelerowanych właściwości dla płynności.
Dla złożonych sekwencji animacji utwórz timeline GSAP zamiast pojedynczych animacji. Timeline pozwala Ci kontrolować kolejność i timing wielu efektów jednocześnie.
W hooku unmount komponentu zawsze zabij wszystkie animacje za pomocą gsap.globalTimeline.clear() lub kill() na konkretnej animacji. To zapobiega wyciekom pamięci i konfliktom z przyszłymi animacjami.
Wybierz odpowiednią funkcję easing dla nastroju interfejsu JARVIS — dokumentacja zawiera wzorce zaawansowane w folderze references/, które pokazują, jak organizować złożone animacje.