aframe
Animacja
Szukaj…
Wprowadzenie
Animacje i przejścia w ramce A są definiowane przy użyciu elementu <a-animation> jako dziecka. System oparty jest w przybliżeniu na specyfikacji Web Animations. A-Frame używa tween.js wewnętrznie.
Uwagi
Atrybuty
Oto przegląd atrybutów animacji. Bardziej szczegółowo omówimy poniżej.
| Atrybut | Opis | Domyślna wartość |
|---|---|---|
| atrybut | Atrybut animacji. Aby określić atrybut komponentu, użyj składni componentName.property (np. light.intensity ). | obrót |
| zaczynać | Nazwa zdarzenia, na które należy czekać przed rozpoczęciem animacji. | '' |
| opóźnienie | Opóźnienie (w milisekundach) lub nazwa zdarzenia, na które należy czekać przed rozpoczęciem animacji. | 0 |
| kierunek | Kierunek animacji (między from i to ). Jeden z alternate , alternateReverse reverse , normal , reverse . | normalna |
| dur | Czas trwania (w milisekundach) animacji. | 1000 |
| łagodzenie | Funkcja łagodzenia animacji. Jest bardzo wiele do wyboru. | łatwość |
| koniec | Nazwa zdarzenia, na które należy czekać przed zatrzymaniem animacji. | '' |
| napełnić | Określa efekt animacji, gdy nie jest aktywnie w grze. Jeden z backwards , both , forwards , none . | do przodu |
| od | Wartość początkowa. | Aktualna wartość. |
| powtarzać | Powtórz liczenie lub na indefinite . | 0 |
| do | Wartość końcowa. Musisz podać | Żaden |
Zaczynać
Atrybut begin określa, kiedy animacja powinna się rozpocząć.
Może to być liczba reprezentująca milisekundy oczekiwania lub nazwa zdarzenia, na które należy czekać. Na przykład możemy zdefiniować animację, która czeka 2 sekundy przed skalowaniem encji.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Lub możemy zdefiniować animację, która czeka, aż element nadrzędny wyzwoli zdarzenie o nazwie fade zanim zniknie element.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
Kierunek
Atrybut direction określa sposób animacji między wartością początkową a wartością końcową.
Kiedy zdefiniujemy kierunek naprzemienny, animacja będzie się przesuwać w przód iw tył między wartościami from i to wartości takich jak jo-jo. Naprzemienne kierunki działają tylko wtedy, gdy powtórzymy animację.
| Wartość | Opis |
|---|---|
| alternatywny | Na parzystych cykli, ożywione od from do to . W cyklach nieparzystych animacja od to do from |
| Alternate-Reverse | Na cyklach nieparzystych, ożywione od from do to . W przypadku cykli parzystych animacja od to do from |
| normalna | Animacja od from do to . |
| rewers | Animuj od to do from . |
Łagodzenie
Atrybut easing definiuje funkcję łagodzenia animacji, która domyślnie jest ease . Istnieje zbyt wiele funkcji łagodzenia, aby je wymienić, ale możemy je domyślnie wyjaśnić.
Jedna możliwa wartość jest linear . Podstawowymi funkcjami ułatwiającymi są ease , ease-in , ease-out i ease-in-out .
Następnie jest więcej grup funkcji łagodzenia. Powyższe podstawowe funkcje łagodzenia poprzedzają każdą grupę funkcji łagodzenia. Grupy funkcji łagodzących to: cubic , quad , quart , quint , sine , expo , circ , elastic , back i bounce .
Na przykład, cubic grupa funkcji złagodzenie obejmowałaby ease-cubic , ease-in-cubic , ease-out-cubic , ease-in-out-cubic .
Napełnić
Atrybut fill określa efekt animacji, gdy nie jest aktywnie w grze. Pomyśl o fill jako o wartościach, jakie animacja ustawia na obiekcie przed i / lub po każdym cyklu animacji. Poniżej znajdują się możliwe wartości fill i ich efekty.
| Wartość | Opis |
|---|---|
| wstecz | Przed rozpoczęciem animacji ustaw wartość początkową na wartość from . |
| obie | Połącz efekty wypełniania zarówno do tyłu, jak i do przodu. |
| do przodu | Po zakończeniu animacji końcowa wartość pozostanie na wartości to . Domyślne wypełnienie. |
| Żaden | Przed rozpoczęciem animacji ustaw wartość początkową na wartość początkową. Po zakończeniu animacji zresetuj wartość do wartości początkowej. |
Powtarzać
Atrybut repeat określa częstotliwość powtarzania animacji. Każde powtórzenie animacji nazywamy cyklem. Powtarzanie może być liczbą, która odlicza się w każdym cyklu animacji, aż osiągnie 0 w którym momencie zakończy się animacja, lub możemy ustawić repeat na indefinite a animacja będzie się repeat aż animacja zostanie ręcznie usunięta lub zatrzymana.
WYDARZENIA
Element <a-animation> emituje kilka zdarzeń.
| Nazwa wydarzenia | Opis |
|---|---|
| animacja | Emitowane po zakończeniu animacji. W przypadku powtórzeń, emitowane, gdy liczba powtórzeń osiągnie 0 . Nie emitowane dla powtórzeń na czas nieokreślony. |
| animacja | Emitowane natychmiast po rozpoczęciu odtwarzania animacji. |
Przykładowe animacje
Jako przykład wprowadzający, aby zdefiniować 5-metrową orbitę na elemencie wokół osi Y, która zajmuje 10 sekund, możemy przesunąć pozycję i animować obrót. Ta animacja rozpoczyna się od początkowego obrotu wokół osi Y wynoszącego 0 stopni i osiąga około 360 stopni. Jest on definiowany na czas trwania 10000 milisekund, utrzymuje końcową wartość w każdym cyklu animacji i zapętla się w nieskończoność.
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
Animowanie różnych rodzajów właściwości
System animacji A-Frame może animować różne typy właściwości.
Właściwości vec3
Rama A ma standardowe komponenty vec3 (tj. position , rotation i scale ). Elementy te składają się z trzech czynników: X, Y i Z. Możemy przekazać trzy spacjami liczb do from oraz to atrybutów, tak jak my je zdefiniować na jednostki. W takim przypadku system animacji przyjmie, że vec3 wartość vec3 .
Na przykład, jeśli chcemy animować byt przechodzący z jednego miejsca do drugiego, możemy animować komponent position .
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Właściwości boolowskie
Rama A ma standardowe komponenty, które akceptują jedną wartość logiczną. Wartości boolowskie można również „animować”, odwracając wartość logiczną na końcu każdego cyklu animacji.
Na przykład możemy zdefiniować animację, która wyłącza widoczność bytu po 5 sekundach.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Właściwości numeryczne
Możemy także animować atrybuty numeryczne. Na przykład możemy animować intensywność prymitywów światła.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Właściwości koloru
Możemy animować dowolną właściwość komponentu, która ma typ koloru. Na przykład możemy animować pole od białego do czerwonego.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Właściwości komponentu
Możemy animować określoną właściwość komponentu zawierającego wiele nieruchomości. W tym celu wybieramy właściwość komponentu za pomocą składni kropkowej: componentName.propertyName .
Na przykład, aby animować górny promień stożka, możemy wybrać wartość radiusTop pomocą geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>