2016-05-26 12 views
36

Od maja Google zaktualizował wytyczne dotyczące projektowania materiałów na swojej stronie internetowej. Widziałem ciekawy i fajny wzór w jednej z nowych sekcji o nazwie Feature discovery.Animacje funkcji wykrywania dla Androida

Chciałbym wprowadzić the animation for 'discovering' the Navigation Drawer button. W ostatniej aktualizacji Google Fit znajduje się podobna animacja dla szuflady nawigacji i przycisku akcji pływającej.

Tak często, w przypadku animacji Androida, Google zapewnia dobrą i wspaniałą wskazówkę dotyczącą interfejsów użytkownika, ale nie mamy żadnych dodatkowych informacji na temat rozwijania jej dla naszych własnych aplikacji.

Czy wiesz, czy istnieją rodzime rozwiązania z bibliotekami Androida do wdrażania tego rodzaju animacji? Jeśli tak, czy jest dostępny dla systemu Android 5.0 (API 21) - może być wyższy niż Android 4.1+?

Edytuj: Zrobiłem projekt Github, aby zrealizować tę samą animację. Możesz go znaleźć tutaj: https://github.com/Guimareshh/Feature-discovery-animations

Dzięki!

+0

ktoś proszę podaj nagrodę w tej sprawie .. tq .. – faruk

+0

Witaj, zrobiłeś to ...? –

+0

@Hardeep nie jest dokładnie taki jak animacja, którą widzimy w witrynie Google Design, ale jest prawie taka sama. Potrzebuję trochę więcej czasu, żeby to ukończyć. W tym tygodniu powinienem przesłać projekt Github i edytować ten post, aby uzyskać więcej informacji. – Guimareshh

Odpowiedz

7

Musisz zrobić własną animację albo można użyć Ripple Effect + Reveal i ustawić ją na ikonę szuflady nawigacji,

Circular Reveal Animation

void enterReveal() { 
    // previously invisible view 
    final View myView = findViewById(R.id.my_view); 

    // get the center for the clipping circle 
    int cx = myView.getMeasuredWidth()/2; 
    int cy = myView.getMeasuredHeight()/2; 

    // get the final radius for the clipping circle 
    int finalRadius = Math.max(myView.getWidth(), myView.getHeight())/2; 

    // create the animator for this view (the start radius is zero) 
    Animator anim = 
     ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius); 

    // make the view visible and start the animation 
    myView.setVisibility(View.VISIBLE); 
    anim.start(); 
} 
+2

Dzięki za pomoc, ta animacja pomoże mi stworzyć to, co chcę. Zamierzam stworzyć próbkę na Githubie, podzielę się nią w tym poście! – Guimareshh

4

Udzielając odpowiedzi na Twoje pytanie, Google zawsze udostępnia nowe próbki interesujących składników widgetów. Większość z nich zostanie dodana tylko do nowej wersji Androida. I są różne powody. Na przykład, ponieważ nowe widgety wykorzystują zasoby i działają tylko w nowej wersji Androida, która ma zaktualizowany silnik interfejsu użytkownika. I inne ...

Dlatego nie ma oficjalnej animacji Reveal Google, która działa tylko w systemie Android 5.0>.

Ale istnieje wiele backports za to:

Spójrz wszystkie dostępne, a nie oficjalne backporty dla Androida Awesome Android UI.

Gdy Google przedstawił materiał Android - nie było żadnej biblioteki dla wszystkich tych elementów. Ale w krótkim czasie, przez różnych programistów napisano wiele przydatnych bibliotek. Ale po tej popularności Google wprowadza całą bibliotekę dla tych widżetów.


W efekcie nie ma backportów i najprawdopodobniej Google nie wprowadzi tych widżetów. Ale słuchając twojego pytania, myślę, że możesz to zrobić, korzystając z nieoficjalnych backportów, połączonych powyżej.

4

Mam również stworzył ten DesignPattern w niestandardowych View. Możesz go znaleźć here. Należy pamiętać, że jest to mój pierwszy opublikowany widok niestandardowy i jest on wciąż rozwijany (może to oznaczać pewne błędy i brakuje pewnej dokumentacji), ale powinien być wystarczająco dobry do codziennego użytku.

wykorzystać go dodać do biblioteki do zależności:

compile 'com.cilenco.libraries:featurediscovery:1.0.2'  or 
compile 'com.cilenco.libraries:featurediscovery:+'   always newest version 

Po, że jesteś w stanie stworzyć DiscoveryView takiego. Zrealizuj wszystkie inne funkcje, aby dostosować wygląd i kontrolę nad widokiem.

DiscoveryView discoveryView = new DiscoveryView.Builder(context, view) 
.setPrimaryText(R.string.header) 
.setSecondaryText(R.string.description) 
.setOnClickListener(this) 
.build(); 

discoveryView.show(); 

Aby uczynić ten widok jeszcze lepszy prosimy zgłaszać problemy i żądań ciągnąć do repozytorium, jeśli znajdziesz jakieś błędy lub masz jakieś nowe pomysły na to.