Wyrusz w trasę i twórz całkowicie niestandardowe animacje do swoich projektów.
Czasami nie chcesz używać słów kluczowych easing, które są dostępne w CSS, lub używasz animacji internetowych albo frameworku JavaScript. W takich przypadkach możesz zdefiniować własne krzywe (lub równania), co daje Ci dużą kontrolę nad wyglądem animacji w projekcie.
Podsumowanie
- Dzięki niestandardowemu wygładzaniu możesz nadać swoim projektom bardziej indywidualny charakter.
- Możesz tworzyć krzywe Béziera stopnia 3, które przypominają domyślne krzywe animacji (łagodne wygaszanie, łagodne narastanie itp.), ale z naciskiem na inne miejsca.
- Użyj go, jeśli potrzebujesz większej kontroli nad czasem i zachowaniem animacji, np. w przypadku animacji elastycznych lub odbijających się od światła.
Jeśli korzystasz z animacji za pomocą stylów CSS, możesz zdefiniować czasy, korzystając z sześciennych krzywych Béziera. W rzeczywistości słowa kluczowe ease, ease-in, ease-out i linear odnoszą się do wstępnie zdefiniowanych krzywych Béziera, które są opisane w specyfikacji przejść CSS i specyfikacji animacji internetowych.
Krzywe Beziera przyjmują cztery wartości, czyli dwie pary liczb, z których każda opisuje współrzędne X i Y punktów kontrolnych krzywej Béziera. Punkt początkowy krzywej Béziera ma współrzędne (0, 0), a punkt końcowy – współrzędne (1, 1). Możesz ustawić wartości X i Y dla obu punktów kontrolnych. Wartości X dla dwóch punktów kontrolnych muszą mieścić się w zakresie od 0 do 1, a wartość Y każdego punktu kontrolnego może przekraczać limit [0, 1], choć specyfikacja nie jest jasna.
Zmiana wartości X i Y każdego punktu kontrolnego powoduje znaczną zmianę krzywej, a co za tym idzie – odmienny charakter animacji. Jeśli np. pierwszy punkt kontrolny znajduje się w prawym dolnym rogu, animacja będzie się uruchamiać wolno. Jeśli znajduje się w lewym górnym rogu, będzie szybko działać. I odwrotnie, jeśli drugi punkt kontrolny znajduje się w prawym dolnym rogu siatki, będzie działał szybko na końcu, a jeśli w lewym górnym rogu, będzie bardzo powoli.
Dla porównania omówiliśmy 2 krzywe: typową krzywą łagodnego rozruchu i krzywą niestandardową:
Animacja z niestandardowym wygładzaniem
Kod CSS krzywej niestandardowej to:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Pierwsze dwie liczby to współrzędne X i Y pierwszego punktu kontrolnego, a drugie dwie liczby to współrzędne X i Y drugiego punktu kontrolnego.
Tworzenie niestandardowej krzywej jest bardzo przyjemne i daje Ci dużą kontrolę nad charakterem animacji. Na przykład krzywa pokazana powyżej przypomina klasyczną krzywą łagodnego przejścia, ale z krótszym początkiem i dłuższym spowolnieniem na końcu.
Eksperymentuj z tym narzędziem krzywej animacji i zobacz, jak krzywa wpływa na styl animacji.
Używaj platform JavaScript, aby mieć większą kontrolę
Czasami potrzebujesz większej kontroli niż ta, jaką zapewnia krzywa Béziera stopnia 3. Jeśli chcesz uzyskać efekt sprężystego odbicia, możesz użyć frameworku JavaScript, ponieważ jest to efekt trudny do osiągnięcia za pomocą kodu CSS lub animacji internetowych.
TweenMax
Potężną platformą jest opracowana przez GreenSock platforma TweenMax (lub TweenLite, jeśli zależy Ci na bardzo lekkiej aplikacji). Zapewnia ona duże możliwości kontroli w małej bibliotece JavaScript, a do tego powstała bardzo dopracowana baza kodu.
Animacja wygładzania elastycznego
Aby używać TweenMax, umieść na stronie ten skrypt:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Po umieszczeniu skryptu możesz wywołać funkcję TweenMax w elementach i określić, jakie właściwości i jakie łagodne przejścia mają być używane. Jest wiele opcji wygładzania, których możesz użyć. W poniższym kodzie zastosowano elastyczne wygładzanie:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
Zapoznaj się z dokumentacją TweenMax, aby poznać wszystkie dostępne opcje.