Animazione Touch Ripple simile all'L-release su pre-L

Question

Mi piace la nuova animazione Touch Ripple introdotta nel nuovo Android L-release come parte della nuova filosofia dell'interfaccia utente.

È possibile trovare un video di esso nelle specifiche ufficiali di progettazione in reazione superficiale qui: http://www.google.com/design/spec/animation/responsive-interaction.html

E 'fondamentalmente un cerchio grigio scuro che sfuma in al centro della vista e cresce in quanto scompare di nuovo, alla fine riempiendo l'intera vista con un grigio chiaro prima di scomparire di nuovo.

Mi piacerebbe aggiungere la stessa animazione a una vista della mia app indirizzata a ICS.

Sono un po 'ignorante su come aggiungere questa animazione nella mia applicazione. I documenti ufficiali a http://developer.android.com/training/animation/index.html non sembrano coprire le animazioni che si verificano "all'interno di una vista". Inoltre, mi piacerebbe non utilizzare le animazioni del fotogramma prestirate (una risorsa png per fotogramma) se possibile.

Come dovrei implementarlo? Qualsiasi aiuto è molto apprezzato!

Answer 1

Qualcosa che ho cucinato in fretta, ben lungi dall'essere ideale, ma hey, è qualcosa: Gist

disegno Fondamentalmente un cerchio sulla base di un raggio d'animazione. Per ottenere l'esatto effetto-L, è necessario apportare ulteriori modifiche. Il codice interessante:

@Override 
public boolean onTouchEvent(@NonNull final MotionEvent event) { 
    if (event.getActionMasked() == MotionEvent.ACTION_UP) { 
     mDownX = event.getX(); 
     mDownY = event.getY(); 

     ObjectAnimator animator = ObjectAnimator.ofFloat(this, "radius", 0, getWidth() * 3.0f); 
     animator.setInterpolator(new AccelerateInterpolator()); 
     animator.setDuration(400); 
     animator.start(); 
    } 
    return super.onTouchEvent(event); 
} 

public void setRadius(final float radius) { 
    mRadius = radius; 
    if (mRadius > 0) { 
     RadialGradient radialGradient = new RadialGradient(
       mDownX, 
       mDownY, 
       mRadius * 3, 
       Color.TRANSPARENT, 
       Color.BLACK, 
       Shader.TileMode.MIRROR 
     ); 
     mPaint.setShader(radialGradient); 
    } 
    invalidate(); 
} 

private Path mPath = new Path(); 
private Path mPath2 = new Path(); 

@Override 
protected void onDraw(@NonNull final Canvas canvas) { 
    super.onDraw(canvas); 

    mPath2.reset(); 
    mPath2.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW); 

    canvas.clipPath(mPath2); 

    mPath.reset(); 
    mPath.addCircle(mDownX, mDownY, mRadius/3, Path.Direction.CW); 

    canvas.clipPath(mPath, Region.Op.DIFFERENCE); 

    canvas.drawCircle(mDownX, mDownY, mRadius, mPaint); 
} 

---

Nel loro colloquio "Cosa c'è di nuovo in Android", hanno parlato che questa animazione in realtà accade su un "filo Render" separata, che farà il suo debutto nella L-release . Ciò consentirà animazioni più fluide, anche quando il thread dell'interfaccia utente è occupato a gonfiare o fare qualsiasi altra cosa costosa.

Answer 2

La mia risposta è in ritardo ma volevo condividere anche la mia soluzione. Ho creato un'altra classe chiamata TouchEffectAnimator con l'idea di Niek Haarman. Grazie a Mr. Haarman, a proposito.

È possibile visualizzare la classe e un esempio di utilizzo di esso on this gist. Inoltre lo spiegherò semplicemente.

La classe contiene tutti i metodi e le variabili necessari e crea la stessa animazione che Android L (anteprima) ha attualmente. Per l'utilizzo di questa classe:

• Creare una visualizzazione personalizzata. (Nel primo esempio ho creato un LinearLayout)
• Inizializza l'oggetto TouchEffectAnimator.
• Definire alcuni attributi di esso come colore, tipo di effetto, durata e dimensione degli spigoli.
• chiamata al metodo onTouchEvent del TouchEffectAnimator all'interno della vista onTouchEvent.
• Chiama il onDraw metodo di TouchEffectAnimator all'interno della vista suDraw.

e il gioco è fatto. Ma ci sono due cose che dovrebbero essere fatte affinché questa classe funzioni correttamente.

• Ci dovrebbe essere qualche OnClickListener sulla vista per ottenere l'evento di tocco UP.
• Ci dovrebbe essere uno sfondo personalizzato o trasparente impostato per la vista. Se nulla è impostato come sfondo, l'animazione non viene mostrata.

Spero che funzioni anche per te.

P.S. Ho creato questa classe per il mio progetto di libreria Android FlatUI Kit. Puoi vedere l'uso di questa classe anche nella classe FlatButton.