---
title: "Easing: co to jest? Słownik pojęć"
description: "Easing to sposób, w jaki animowany element przyspiesza i zwalnia. Dzięki niemu ruch nie jest mechanicznie równy, tylko rusza i hamuje jak prawdziwy przedmiot."
url: https://fluostudio.pl/baza-wiedzy/slownik/easing/
---

[Animacja i wideo](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=animacja)

# Easing

Inaczej ease-in, ease-out, krzywa animacji, timing function

Easing to sposób, w jaki animowany element przyspiesza i zwalnia. Dzięki niemu ruch nie jest mechanicznie równy, tylko rusza i hamuje jak prawdziwy przedmiot.

## W skrócie

-   Ease-out na wejście, ease-in na wyjście, ease-in-out na ruch w obrębie ekranu
-   Ruch liniowy pasuje do obrotu w pętli i przewijanych pasków, rzadko do czegoś więcej
-   W CSS m.in.: ease (domyślny), linear, ease-in, ease-out, ease-in-out, cubic-bezier()

## Usługa

-   [Motion design](https://fluostudio.pl/uslugi/projektowanie-graficzne/motion-design/)

Samochód nie rusza od razu z pełną prędkością i nie staje w miejscu jak wbity w ścianę. Winda zwalnia przed piętrem. Piłka spada coraz szybciej. Oko zna te ruchy, więc element, który na ekranie jedzie ze stałą prędkością i staje bez hamowania, od razu wygląda sztucznie.

Easing opisuje ten rozpęd i hamowanie. W programie do animacji ustawia się go na krzywej między dwiema [klatkami kluczowymi](https://fluostudio.pl/baza-wiedzy/slownik/klatka-kluczowa/), w kodzie strony zapisuje funkcją. Najczęstsze rodzaje:

-   **Ease-out**: szybki start i łagodne hamowanie. Dla elementów, które wchodzą na ekran.
-   **Ease-in**: powolny start i przyspieszanie. Dla elementów, które z ekranu wychodzą.
-   **Ease-in-out**: rozpęd i hamowanie. Dla ruchu z miejsca na miejsce w obrębie ekranu.
-   **Sprężyna**: element przelatuje cel i wraca. Dodaje lekkości, ale w poważnej marce szybko wygląda niepoważnie.

## Easing a charakter marki

Ten sam ruch z innym easingiem mówi co innego. Dobrze widać to w [animacji logo](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/): ostre wejście z krótkim hamowaniem jest dynamiczne, długie i miękkie wygląda spokojnie. Dlatego krzywe trafiają do [motion guidelines](https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/) razem z czasami trwania, jako konkretne wartości. Animator ustawia je w swoim programie, programista wpisuje do kodu, a film, strona i [mikrointerakcje](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) w aplikacji ruszają się tak samo.

## Zobacz też

-   [Animacja i wideo Klatka kluczowa Klatka kluczowa to punkt na osi czasu, w którym animator zapisuje stan elementu: położenie, wielkość, obrót, kolor albo przezroczystość. Ruch między dwoma takimi punktami program wylicza sam.](https://fluostudio.pl/baza-wiedzy/slownik/klatka-kluczowa/)
-   [Animacja i wideo Motion guidelines Motion guidelines to zasady ruchu marki: tempo, krzywe przyspieszania i hamowania, wejścia i przejścia, animacja logo i zakazy. Dzięki nim spot, post i aplikacja ruszają się tak samo.](https://fluostudio.pl/baza-wiedzy/slownik/motion-guidelines/)
-   [Strony www Mikrointerakcja Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/)
-   [Animacja i wideo Motion design Motion design to projektowanie ruchu w grafice. Animowane logo, ikony, napisy, wykresy i przejścia pokazują charakter marki i tłumaczą rzeczy szybciej niż statyczny obraz.](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/)
-   [Animacja i wideo Animacja logo Animacja logo to krótki, zwykle kilkusekundowy ruch, w którym znak marki pojawia się, składa albo zmienia. Otwiera i zamyka filmy, spoty, prezentacje i posty.](https://fluostudio.pl/baza-wiedzy/slownik/animacja-logo/)
-   [Animacja i wideo Lottie Lottie to format animacji wektorowych zapisanych w pliku JSON, najczęściej eksportowanych z After Effects. Na stronach i w aplikacjach zwykle waży mniej niż film i jest ostry w każdym rozmiarze.](https://fluostudio.pl/baza-wiedzy/slownik/lottie/)

## Potrzebujesz ruchu, który pasuje do marki? Pokażemy, jak to robimy.

Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań.

[Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)