Standardowa krzywa łagodzenia projektu materiału
Zaprojektuj niestandardową funkcję synchronizacji CSS Cube-bezier(), przeciągając dwa punkty kontrolne, wyświetl podgląd na żywo względem odniesienia liniowego, a następnie skopiuj gotową wartość.
Wynik
Ta strona otwiera generator z już załadowanymi x1=0,4, y1=0, x2=0,2, y2=1 — standardową krzywą dynamiki opublikowaną w wytycznych ruchu Google Material Design. Przeciągnij uchwyt lub edytuj liczby, krzywą, podgląd na żywo i aktualizację CSS, którą można skopiować.
Material Design nazywa tę krzywą „standardowym wygładzaniem” i zaleca ją w przypadku większości przejść na ekranie — elementów, które są już widoczne i po prostu się poruszają, zmieniają rozmiar lub zanikają na tym samym ekranie. Jego kształt szybko przyspiesza, a następnie delikatnie zwalnia, aż do miejsca, w którym się znajduje, dlatego tak wiele aplikacji na Androida i interfejsów internetowych w stylu Material charakteryzuje się tym samym efektem przejścia, dzięki czemu nikt nie zauważa, że używają tych samych czterech liczb.
Wrzuć go bezpośrednio do funkcji synchronizacji przejścia lub funkcji synchronizacji animacji, aby uzyskać wrażenie spójnego materiału, lub użyj go jako punktu odniesienia: wytyczne dotyczące materiału definiują również oddzielne krzywe „spowalniania” i „przyspieszania” dla elementów wchodzących i wychodzących z ekranu, których ta pojedyncza krzywa standardowa nie ma zastąpić.