2016-05-26 38 views
36

Da maggio, Google ha aggiornato le linee guida sulla progettazione dei materiali sul proprio sito web. Ho visto un modello di design interessante e interessante in una delle nuove sezioni denominate Feature discovery.Animazioni di rilevamento delle funzioni per Android

Vorrei implementare the animation for 'discovering' the Navigation Drawer button. C'è un'animazione simile nell'ultimo aggiornamento di Google Fit, per il cassetto di navigazione e il pulsante di azione mobile.

Come spesso, per le animazioni Android, Google fornisce una linea guida per l'interfaccia utente bella e fantastica, ma non abbiamo ulteriori informazioni per lo sviluppo per le nostre app.

Sapete se esistono soluzioni native con librerie Android per implementare questo tipo di animazioni? Se sì, è disponibile per Android 5.0 (API 21) inferiore? Può essere sopra Android 4.1+?

Modifica: ho realizzato un progetto Github per realizzare la stessa animazione. Puoi trovarlo qui: https://github.com/Guimareshh/Feature-discovery-animations

Grazie!

+0

chiunque .. si prega di mettere taglie su questo per favore .. tq .. – faruk

+0

Ciao hai fatto .. ?? –

+0

@Hardeep non è esattamente come l'animazione che possiamo vedere nel sito web di progettazione di Google, ma è quasi la stessa. Mi serve un po 'più di tempo per finirlo. Dovrebbe essere fatto questa settimana, caricherò un progetto Github e modificherò questo post per ulteriori informazioni. – Guimareshh

risposta

7

il necessario per rendere l'animazione personalizzata o altro si può usare Ripple Effect + Reveal e impostarlo alla navigazione icona cassetto,

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

Grazie per il tuo aiuto, questa animazione mi aiuterà a creare ciò che voglio. Creerò un esempio su Github, lo condividerò in questo post! – Guimareshh

4

Rispondendo alla tua domanda, Google fornisce sempre nuovi esempi di componenti widget interessanti. Molti di questi verranno aggiunti solo a una nuova versione di Android. E ci sono diverse ragioni per questo. Ad esempio, perché i nuovi widget utilizzano le risorse e funzionano solo sulla nuova versione di Android, che ha un motore di interfaccia utente aggiornato. E altro ...

Ecco perché, non esiste alcuna animazione ufficiale di Google Reveal, che funziona solo su Android 5.0>.

ma ci sono un sacco di backport per questo:

Date un'occhiata tutti i backport ufficiali disponibili e non per Android Awesome Android UI.

Quando Google ha introdotto materiale Android, non esisteva alcuna libreria per tutti gli elementi. Ma in breve tempo, da diversi sviluppatori sono state scritte molte librerie utili. Ma dopo quella popolarità, Google presenta tutta la libreria per quei widget.


Pertanto, non ci sono backport e molto probabilmente Google non introdurrà i widget. Ma ascoltando la tua domanda, penso che tu possa farlo, usando non i backport ufficiali, collegati sopra.

4

Ho creato anche questo DesignPattern in una visualizzazione personalizzata. Lo puoi trovare here. Si noti che questa è la mia prima vista personalizzata pubblicata ed è ancora in fase di sviluppo (quindi potrebbero esserci alcuni bug e manca un po 'di documentazione), ma dovrebbe essere sufficiente per l'uso quotidiano.

Per usarlo aggiungere la biblioteca per le dipendenze:

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

Dopo di che si è in grado di creare un DiscoveryView come questo. Scopri tutte le altre funzioni per regolare l'aspetto e il controllo sulla vista.

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

discoveryView.show(); 

Per rendere questo punto di vista anche meglio non esitate a segnalare problemi e fare richieste di pull al repository, se trovate qualche bug o avete nuove idee per esso.