Wyrusz w teren i twórz własne animacje do swoich projektów.
Czasami możesz nie chcieć używać wygładzających słów kluczowych zawartych w kodzie CSS albo korzystasz z animacji internetowych lub platformy JavaScript. W takich przypadkach możesz zazwyczaj zdefiniować własne krzywe (lub równania), dzięki czemu masz dużą kontrolę nad charakterem animacji w projekcie.
Podsumowanie
- Niestandardowe wygładzanie pozwala nadać projektom bardziej osobisty charakter.
- Możesz tworzyć sześcienne krzywe Béziera podobne do domyślnych krzywych animacji (z wolnością, z wolnością itp.), ale ze szczególnym naciskiem w różnych miejscach.
- Użyj JavaScriptu, gdy potrzebujesz większej kontroli nad czasem i zachowaniem animacji, na przykład w przypadku animacji elastycznych lub odbijających.
W przypadku animacji za pomocą CSS możesz określić krzywe sześcienne Béziera, aby określić czas. Słowa kluczowe ease, ease-in, ease-out i linear są mapowane na wstępnie zdefiniowane krzywe Béziera, które są opisane w specyfikacji przejść CSS i specyfikacji animacji internetowych.
Te krzywe Béziera przyjmują cztery wartości lub dwie pary liczb, z których każda opisuje współrzędne X i Y punktów kontrolnych krzywej sześciennej Béziera. Punkt początkowy krzywej Béziera ma współrzędne (0, 0), a punkt końcowy ma współrzędne (1, 1). Możesz ustawić wartości X i Y dwóch 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], chociaż specyfikacja nie jest jasna, o ile.
Zmiana wartości X i Y każdego punktu kontrolnego powoduje zupełnie inną krzywą, a tym samym zupełnie inny efekt animacji. Jeśli na przykład pierwszy punkt kontrolny znajduje się w prawym dolnym rogu, animacja będzie się powoli uruchamiać. Jeśli znajduje się w lewym górnym rogu, początek będzie szybki. I na odwrót: jeśli drugi punkt kontrolny znajduje się w prawym dolnym rogu siatki, będzie działać szybko na końcu. Jeśli znajduje się w lewym górnym rogu, będzie działał powoli.
Dla porównania mamy tu 2 krzywe: typową krzywą z wolnością i krzywą niestandardową:
Wyświetlanie animacji z wygładzaniem niestandardowym
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 własnej krzywej to świetna zabawa i daje Ci znaczną kontrolę nad charakterem animacji. Na przykład na powyższej krzywej widać, że krzywa przypomina klasyczną krzywą wygładzania, ale ze skróconą krzywą, czyli fragmentem „rozpoczęcia”, i długim spowolnieniem na końcu.
Eksperymentuj z tym narzędziem krzywej animacji i sprawdź, jak krzywa wpływa na styl animacji.
Większa kontrola dzięki wykorzystaniu platform JavaScript
Czasami potrzebujesz nawet większej kontroli, niż daje Ci krzywa Béziera sześcienna. Jeśli chcesz uzyskać efekt „elastycznego odbijania”, możesz użyć struktury JavaScriptu, bo jest to trudne do osiągnięcia za pomocą CSS lub animacji internetowych.
TweenMax
Jednym z wydajnych narzędzi jest platforma TweenMax firmy GreenSock (lub TweenLite, jeśli chcesz maksymalnie uprościć pracę), ponieważ zapewnia ona dużą kontrolę w małej bibliotece JavaScript i jest bardzo dopracowaną bazą kodu.
Zobacz animację z efektem wygładzania
Aby korzystać z TweenMax, umieść na swojej stronie ten skrypt:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Po utworzeniu skryptu możesz wywołać TweenMax na swoim elemencie i określić, jakich właściwości chcesz używać, oraz dostępne wygładzanie. 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'
});
Warto zapoznać się z dokumentacją TweenMax, która opisuje wszystkie dostępne tu opcje.