Jak edytować wygładzanie skali bez zniekształcania proporcji postaci

Skala określa rozmiar wzdłuż każdej osi. Gdy pozioma i pionowa skala używają tego samego mnożnika, postać zachowuje proporcje. Gdy te mnożniki się różnią, zmienia się jej kształt. Dokumentacja techniczna MDN opisuje tę różnicę jako skalowanie jednolite i niejednolite. MDN: funkcja CSS scale()

Wygładzanie określa, jak animowana wartość zmienia się między klatkami kluczowymi. Załóżmy, że obie osie zaczynają od 80% i kończą na 100%. Jeśli skala pozioma osiągnie 96%, gdy pionowa nadal wynosi 88%, postać chwilowo stanie się szersza w stosunku do swojej wysokości. Wartości początkowe i końcowe mogą wyglądać poprawnie, mimo że przejście wyraźnie rozciąga postać.

Jeśli postać początkowo nie jest zniekształcona, równe wartości skali X i Y przez cały czas trwania przejścia zachowują jej proporcje. Ogólniej rzecz biorąc, zachowuj zatwierdzone proporcje bazowe: jeśli przygotowany zasób celowo zaczyna od nierównych wartości skali, pomnóż obie przez ten sam zmieniający się współczynnik. Nie zastępuj automatycznie tych wartości bazowych równymi liczbami.

Zapisz kopię roboczą i znajdź transformację kontrolującą całą postać. W tym poradniku zacznij od pojedynczej warstwy 2D postaci, której wygląd przy rozmiarze referencyjnym jest już prawidłowy. Jeśli grafika składa się z osobnych elementów, najpierw ustaw wspólną transformację odpowiadającą za zmianę ogólnego rozmiaru; w przeciwnym razie edycja wyłącznie tułowia może zmienić jego rozmiar względem twarzy lub akcesoriów.

W After Effects zaznacz warstwę postaci i naciśnij S, aby wyświetlić parametr Scale. Podczas wprowadzania proporcjonalnych zmian rozmiaru włącz Constrain Proportions — ikonę obok wartości skali. Adobe opisuje tę funkcję jako przeznaczoną do powiązanej edycji skali. Adobe: dostosowywanie właściwości warstw w After Effects

Zapisz zatwierdzone wartości początkowe i końcowe oraz czasy klatek kluczowych, zanim cokolwiek zmienisz. Sprawdź również istniejące klatki pośrednie. Traktuj opcję łączenia wartości jako pomoc podczas edycji i weryfikuj rzeczywiste wartości w całej animacji, zamiast zakładać, że jej włączenie naprawiło wcześniejsze zmiany.

Zanim dopracujesz timing, wybierz punkt, wokół którego ma następować powiększanie. W After Effects skala zmienia się względem punktu zakotwiczenia warstwy. Wyśrodkowany punkt sprawdza się przy powiększaniu wokół środka; punkt w dolnej części pośrodku może być odpowiedni, gdy postać podczas powiększania powinna wizualnie pozostawać na podłożu. Adobe: punkty zakotwiczenia warstw

Użyj Value Graph, aby sprawdzić rozmiar, oraz Speed Graph, aby kształtować szybkość jego zmian. Adobe definiuje wykres wartości jako przedstawiający wartości właściwości w czasie, a wykres szybkości jako pokazujący tempo ich zmian. Wybierz odpowiedni wykres bezpośrednio w opcjach Graph Editor, zamiast polegać na widoku domyślnym. Adobe: podstawy animacji w After Effects

Na wykresie Value Graph oglądaj jednocześnie wszystkie istotne składowe skali. Przy równych wartościach bazowych ich krzywe powinny się pokrywać przez całą jednolitą animację skalowania. Odstęp między nimi to sygnał, by sprawdzić odpowiadającą mu klatkę. Przy nierównych zatwierdzonych wartościach bazowych porównuj zmiany proporcjonalne, zamiast oczekiwać, że krzywe będą się pokrywać.

Użyj Speed Graph, jeśli chcesz zmienić przyspieszenie lub wyhamowanie, zachowując te same wartości klatek kluczowych. Po każdej istotnej zmianie wróć do Value Graph. Dzięki temu możesz przeprowadzić dwie osobne kontrole: sprawdzić, czy timing jest odpowiedni i czy zależność między rozmiarami pozostaje prawidłowa.

Skorzystaj z tego przykładu: prawidłowo proporcjonalna postać 2D powiększa się z 80%, 80% do 100%, 100% w ciągu 12 klatek. To przykładowe ustawienia, a nie wymagany czas trwania ani zakres rozmiaru.

1. Zaznacz warstwę postaci, wyświetl parametr Scale i włącz Constrain Proportions.
2. Ustaw pierwszą klatkę kluczową Scale na 80%, 80%, a drugą — 12 klatek później — na 100%, 100%.
3. Zaznacz obie klatki kluczowe Scale i wybierz Animation > Keyframe Assistant > Easy Ease.
4. Otwórz Graph Editor i wybierz Edit Speed Graph.
5. Zaznacz jednocześnie klatki kluczowe skali. Dostosuj odpowiednie składowe w spójny sposób, wprowadzając niewielkie zmiany uchwytów.
6. Przełącz na Edit Value Graph i sprawdź wartości osi między klatkami kluczowymi.

Easy Ease zapewnia wyjściowe przejście z zerową szybkością w wybranych klatkach kluczowych. Aby wprowadzić dokładniejsze zmiany, użyj Animation > Keyframe Velocity, by edytować prędkość wejściową lub wyjściową oraz wpływ. Adobe wyjaśnia, że poziome przesuwanie uchwytów prędkości zmienia ich wpływ na sąsiednie klatki kluczowe. Adobe: stosowanie i kontrolowanie zmian prędkości w After Effects

W tym przykładzie spróbuj szybkiego powiększenia, po którym nastąpi dłuższe wyhamowanie. Dostosuj wpływ wejściowy przy ostatniej klatce kluczowej, wyświetl podgląd i porównaj go z oryginałem. W tej iteracji zachowaj rozmiary końcowe i 12-klatkowy czas trwania, aby ocenić samą zmianę wygładzania.

Jeśli po wprowadzeniu zmiany postać się rozciąga, cofnij ją i sprawdź, które składowe były zaznaczone. Zanim przejdziesz dalej, ponownie sprawdź zarówno wartości pośrednie, jak i końcowe. Samouczek Adobe dotyczący Graph Editor pokazuje, jak zaznaczać klatki kluczowe, wyświetlać uchwyty, dostosowywać Speed Graph i wyświetlać podgląd wyniku. Adobe: tworzenie dynamicznego ruchu między klatkami kluczowymi za pomocą Graph Editor

Jeśli trudno porównać krzywe, zastosuj test zmian proporcjonalnych. Dla wybranej klatki podziel bieżącą skalę każdej osi przez zatwierdzoną wartość bazową tej osi. Przy jednolitej zmianie rozmiaru wyniki powinny być równe. Test ten bezpośrednio wynika z zastosowania jednego mnożnika do obu wymiarów.

Stan	Skala X	Skala Y	X ÷ bazowa X	Y ÷ bazowa Y	Interpretacja
Zatwierdzona wartość bazowa	80%	80%	1.00	1.00	Kształt odniesienia
Prawidłowa klatka pośrednia	92%	92%	1.15	1.15	Proporcje zachowane
Zniekształcona klatka pośrednia	96%	88%	1.20	1.10	Wzrost w poziomie jest większy
Zatwierdzona wartość końcowa	100%	100%	1.25	1.25	Przywrócono proporcje odniesienia

W zniekształconym przykładzie stosunek szerokości do wysokości zostaje pomnożony przez 96 ÷ 88 ≈ 1.091. Względem wartości bazowej postać jest przez to około 9.1% szersza w stosunku do swojej wysokości. To przykładowe obliczenia, a nie pomiary konkretnej animacji.

Przy celowo nierównej wartości bazowej 120%, 100% jednolite powiększenie o współczynnik 1.10 daje 132%, 110%. Obie osie zwiększyły się o 10%, więc zatwierdzony wygląd zostaje zachowany. Zmiana wartości końcowej na 132%, 132% zmieniłaby istniejące proporcje.

Zanim ponownie zmienisz wygładzanie, ustal przyczynę widocznego problemu. Wstrzymaj animację na wybranej klatce, aby odróżnić zmianę kształtu od przesunięcia pozycji lub zmiany szczegółów obrazu.

Objaw	Co sprawdzić dalej
Szerokość i wysokość zmieniają się w różnym stopniu podczas przejścia	Porównaj wartości osi, klatki pośrednie i uchwyty krzywej w tym momencie.
Cała postać przesuwa się podczas powiększania	Sprawdź punkt zakotwiczenia i animację parametru Position.
Zmienia się tylko rozmiar jednego elementu postaci względem pozostałych	Sprawdź transformację tego elementu i wspólną transformację postaci.
Przed wyhamowaniem postać staje się większa, niż zamierzono	Sprawdź na wykresie Value Graph, czy rozmiar nie przekracza docelowej wartości.
Sylwetka zachowuje proporcje, ale krawędzie stają się postrzępione	Sprawdź rozdzielczość grafiki źródłowej i stopień powiększenia.

Chwilowe przekroczenie rozmiaru może zachować proporcje, jeśli obie osie przekraczają wartości docelowe w tym samym stopniu. Osobno zdecyduj, czy taki większy rozmiar powinien znaleźć się w animacji. Jeśli założenia wymagają prostego powiększenia i zatrzymania, utrzymuj wartości skali w wybranym zakresie od rozmiaru początkowego do końcowego.

Powiększenie grafiki rastrowej może również zmienić jej wygląd bez naruszania proporcji. Adobe zwraca uwagę, że znaczne powiększenie warstw rastrowych może uwidocznić piksele, a ich pomniejszenie może zmiękczyć obraz. Zmiana wygładzania nie rozwiąże problemu szczegółowości grafiki źródłowej. Adobe: skalowanie lub odbijanie warstwy

Sprawdź klatkę początkową, kilka klatek pośrednich, klatkę o największym rozmiarze oraz klatkę końcową. Dokładniej przeanalizuj miejsca, w których skala zmienia się najszybciej lub kształt wydaje się zmieniać. Sprawdzenie wybranych klatek pomaga zlokalizować problemy; analiza pełnych krzywych pozwala wykryć różnice między tymi klatkami.

Następnie wyświetl podgląd z docelową szybkością odtwarzania. W samouczku Adobe dotyczącym Graph Editor zaleca się sprawdzenie panelu Info, aby potwierdzić, czy podgląd jest odtwarzany w czasie rzeczywistym, ponieważ niepełny podgląd może utrudnić ocenę timingu. Adobe: wyświetlanie podglądu i dostosowywanie animacji Graph Editor

Zakończ, gdy postać osiąga zamierzone rozmiary, zachowuje zatwierdzone proporcje przez całe przejście, a jej przyspieszenie i wyhamowanie odpowiadają założeniom. Kieruj się zasadą jednego wspólnego mnożnika skali, użyj wykresów do sprawdzenia timingu i zweryfikuj kształt w klatkach pośrednich, zanim zaakceptujesz edycję.

• Adobe — dostosowywanie właściwości warstw w After Effects
• Adobe — podstawy animacji w After Effects
• Adobe — stosowanie i kontrolowanie zmian prędkości w After Effects
• Adobe — tworzenie dynamicznego ruchu między klatkami kluczowymi za pomocą Graph Editor
• MDN — funkcja CSS scale()