Poradnik wideo: dodawanie własnych animacji do banerów w Figmie
Ten film pokazuje, jak dodawać do banerów własne animacje z klatkami kluczowymi za pomocą wtyczki Bannerify.
W każdej klatce kluczowej animacji możesz edytować 5 różnych właściwości. Wszystkie różnice we właściwościach między klatkami kluczowymi są animowane automatycznie. Na przykład ustawienie skali 2x w klatce 0% i skali 1x w klatce 100% automatycznie utworzy animację „zmniejszania się”.
- Właściwość X animuje położenie elementu w poziomie (w pikselach).
- Właściwość Y animuje położenie elementu w pionie (w pikselach).
- Właściwość Opacity animuje procent krycia elementu.
- Właściwość Rotate animuje obrót elementu w stopniach.
- Właściwość Scale animuje rozmiar elementu.
Względne przesunięcia X/Y w procentach
Jeśli wolisz ustawiać położenie X/Y jako procent animowanego elementu, przełącz jednostki Position z px na % we właściwościach klatki kluczowej. Wtedy wartości X/Y podajesz w procentach (zamiast w pikselach).
Procentowa wartość przesunięcia X/Y automatycznie animuje element, do którego zastosowano animację, względem jego położenia, a procent jest liczony od jego rozmiaru. Na przykład wartość przesunięcia X 10% w klatce kluczowej przesunie warstwę o szerokości 100px o 10px. Ta sama animacja z przesunięciem X 10% zastosowana do warstwy o szerokości 200px przesunie ją o 20px.
Rozdzielenie skali na osie X i Y
Jeśli wolisz ustawiać skalę osobno dla każdej osi X/Y, przełącz tryb Scale z Uniform na X / Y we właściwościach klatki kluczowej. Wtedy wartości skali w poziomie i w pionie ustawiasz w klatkach niezależnie, zamiast skalować obie osie jednakowo przy równomiernym powiększaniu lub pomniejszaniu.
To ustawienie przydaje się, gdy chcesz animować szerokość lub wysokość warstwy, nie zmieniając jednocześnie drugiej osi.