Lab

Zachowania, z których składam interfejsy - do wzięcia w rękę. Sprężyny są w tej samej parametryzacji, w jakiej pisze się animacje na iOS; kształty są z tej strony. Otwórz to na telefonie, tam ma sens.

Naciśnij, przeciągnij, wyrzuć.

Nic tu nie jest nagraniem ani makietą. Każdy blok niżej jest kontrolką, która trafia do interfejsów, i chodzi na tych samych sprężynach co kalkulator wyceny.

Cztery krzywe

Ten sam dystans, cztery sposoby przejechania go. Naciśnij i patrz na różnicę, zamiast czytać o niej.

Krzywa strony
cubic-bezier(.22,1,.36,1)
Typografia. Dojeżdża i staje.
bounce 0
visualDuration .34
Śledzenie kursora. Nigdy nie przestrzeliwuje.
bounce 0,2
visualDuration .34
Domyślna odpowiedź kontrolki. Tyle życia ma iOS.
bounce 0,45
visualDuration .34
Za dużo na przycisk, w porządku na żart.

Sprężynę opisują tu dwie liczby, nie cztery: ile ruch wydaje się trwać i ile z niego zostaje na przeskok. To ta sama para, którą przyjmuje spring(duration:bounce:) w SwiftUI - dlatego kontrolki na tej stronie odpowiadają jak na telefonie, a nie jak krzywa dobrana na oko.

Sheet

Panel od dolnej krawędzi, zamykany odsunięciem. Ten sam nosi podsumowanie wyceny.

Złap za górną krawędź i pociągnij w dół. Panel idzie dokładnie za palcem, w górę stawia opór, a puszczony w ruchu kończy lot z prędkością ręki - nie odtwarza animacji zamykania.

Kontrolki

Segmenty, przełączniki, stepper i suwak - podłączone do pliku konfiguracyjnego, który z nich wychodzi.

Widok garażu

Dystans interakcji

2.5 m

0,5 m5,0 m

Znaczniki 3DPodpowiedź nad pojazdem zamiast komunikatu w kącie ekranu.

Dźwięki interfejsuKrótkie kliknięcie przy zmianie zakładki. Domyślnie wyłączone.

Miejsca w garażuNa gracza, zanim wejdą modyfikatory z uprawnień.

Co z tego wychodzi

Config.Garage = {
    view = "grid",
    markers3d = true,
    interfaceSounds = false,
    slots = 6,
    interactDistance = 2.5,
}

Tak wygląda plik, który dostaje admin: nazwy po angielsku, komentarze po polsku, żadnej wartości ukrytej w kodzie.

Co robi każda z nich

Segment: zaznaczenie jedzie do nowej komórki (layoutId)
Przełącznik: gałkę można przeciągnąć i wyrzucić; pod naciskiem się rozciąga
Stepper: cyfry przewijają się kolumnami, rusza się tylko ta, która się zmieniła
Suwak: za końcem rozciąga się po krzywej rubber band
Nacisk: każda kontrolka wgina się pod palcem o 3% i wraca na sprężynie

Dock

Magnifikacja z macOS: kafel pod kursorem rośnie, sąsiedzi mniej, a spadek jest ciągły.

Wszystkie kafle czytają jedną wartość - pozycję kursora w poziomie - i każdy przelicza własny dystans do niej. Dlatego rząd odkształca się gładko wokół wskaźnika, zamiast pojedynczy kafel przeskakiwać w stan hover. Na ekranie dotykowym nie ma czego śledzić, więc nasłuch nie zostaje w ogóle podpięty i zostaje zwykły rząd linków.

Stos

Prawdziwe opinie na kartach, które odrzuca się w bok. Ta sama treść leży też zwykłym tekstem na /opinie.

„This is a seriously awesome HUD, I recommend it 👍”

Robert Burneika

„Won it in a Giveaway, delivery was quick! Really appreciate 🤍”

Quantum Queen

„Very fast, friendly, great support, and the script is very good.”

Stas Sayé

1 / 8

Karta przechyla się proporcjonalnie do tego, gdzie w tej chwili jest - obrót jest wyliczany z jej własnego przesunięcia, nie odtwarzany z animacji, więc między ręką a przechyłem nie ma opóźnienia. Odrzucenie liczy się z odległości albo z prędkości: szybki flick zamyka kartę, która ledwo drgnęła, a powolne dociągnięcie zamyka ją przy zerowej prędkości.

Na iOS

Rzeczy, których nie widać, dopóki nie otworzy się strony na telefonie - i które trzeba było zrobić ręcznie.

Przewijanie pod nakładką: dokument wyjęty z przewijania, pozycja przywracana
Pole tekstowe: 16 px na dotyku, bo Safari inaczej przybliża stronę
Opóźnienie tapnięcia: touch-action: manipulation, bez 300 ms na double-tap
Podświetlenie tapnięcia: zdjęte - kontrolka odpowiada sama
Wysokość panelu: dvh, nie vh - pasek adresu zmienia widok
Bezpieczne obszary: wcięcia notcha i home indicatora w barze i sheecie
Animacje przy przewijaniu: wartości Motion zamiast scroll-timeline z CSS

Ostatni wiersz jest najdroższy: połowa ruchu na tej stronie stała wcześniej na animation-timeline, co jest poprawną odpowiedzią i jednocześnie funkcją, której Safari długo nie miało. Na telefonie ta połowa po prostu nie istniała - a telefon z linkiem z Discorda to najczęstszy sposób, w jaki ta strona jest otwierana.

Chcesz to samo w swoim skrypcie?

To nie biblioteka do kupienia - to sposób pisania interfejsów, który wchodzi w każdy zasób NUI. Policz zakres albo napisz i opisz, co ma się ruszać.

Zobacz to w wydanych skryptach