Dzisiaj chciałbym napisać o tym, o czym nieraz wspominałem od czasów ostatniego MIX’a, ale nie było okazji tego w szerszym gronie wyartykułować. Mianowicie chodzi mi o efekt, który nazwałem “wyskakującym krzesłem” od przykładu, który zazwyczaj go demonstruje.
O co chodzi z tym krzesłem, czyż nie umiem już posługiwać się Blendem? Tak zapewnie niejeden czytający tego posta sobie pomyśli. Już wyjaśniam.
Chodzi o wyjeżdżające krzesło na szczegółach elementu, po tym jak wybierze się dany element na liście. Nie byłoby w tym nic zaskakującego, gdyby nie to, że krzesło szczegółów wyjeżdża wprost z … krzesła na elemencie listy! Skąd krzesło szczegółów zna dokładnie i precyzyjnie pozycję odpowiadającego mu krzesła na danym elemencie listy? To są zupełnie inne obszary UI!
Cały patent kryje się w nowych możliwościach FluidMoveBehavior, który potrafi animować teraz nie tylko sam element, ale także zbindowane dane. Pozycja konkretnych obiektów danych jest znajdowana na ekranie i to ona jest uwzględniana w animacji. Widzimy, że jak będziemy animować dany obiekt z danymi, a nie jego konkretną wizualną reprezentację, to nasze zadanie stanie się dużo prostsze. FluidMoveBehavior używany jest w gridzie ze szczegółami elementu i trzeba mu przekazać pozycję startową, którą jest położenie krzesła na danym elemencie listy. Pozycję startową krzesła dla danego obiektu danych rejestrujemy za pomocą FluidMoveSetTagBehavior w szablonie elementu listy. Ta informacja jest umieszczana niejawnie w data store, a potem jest wyciągana przez FluidMoveBehavior, który wtedy już wie, jak ma animować krzesło reprezentujące dany obiekt. W tym miejscu trzeba dodać, że możemy przebieg animacji modyfikować za pomocą dowolnej easing function, a całość odbywa się bez napisania linijki kodu ze strony użytkownika! Jest to piękny przykład, pokazujący jak w uniwersalny sposób można zamknąć kawałek kodu, by innym żyło się lepiej.
A jak zrobić, by elementy wyjeżdżały płynnie z jednej listy i w wjeżdżały w odpowiednie miejsce na drugiej? Nic prostszego! Wystarczy tylko w obu listach w szablonie panelu umieścić FluidMoveBehavior, tak by animował dzieci kontenera pobierane z data context’u.
Ciekawe efekty można osiągnąć używając LayoutStates na elementach listy, w której w kontenerze osadzony jest FluidMoveBehavior. Wtedy wszystko jest w ruchu, wszystko żyje, wszystko się zmienia. Zmienia się tworzony element przy jego dodawaniu do listy, ale także sama lista stopniowo rezerwuje dla niego miejsce. Podobnie może się dziać przy usuwaniu elementu z listy.
Więcej praktycznych szczegółów, przydatne linki oraz wszystkie przykłady zamieściłem tutaj.
Posty
Brak komentarzy:
Prześlij komentarz