L-release-ähnliche Touch-Ripple-Animation auf Pre-L

Question

Ich liebe die neue Touch-Ripple-Animation, die in der neuen Android L-Version als Teil der neuen UI-Philosophie Material Design eingeführt wurde.

Sie ein Video davon im offiziellen Design-Spezifikation unter Oberflächenreaktion finden Sie hier: http://www.google.com/design/spec/animation/responsive-interaction.html

Es ist im Grunde ein dunkelgrauer Kreis, der in der Mitte der Ansicht blendet und wächst, wie es aus schwindet wieder, schließlich füllen Sie die gesamte Ansicht mit einem hellen Grau, bevor sie wieder verschwinden.

Ich möchte die gleiche Animation zu einer Ansicht in meiner App hinzufügen, die auf ICS ausgerichtet ist.

Ich bin ein bisschen ratlos, wie Sie diese Animation in meiner Anwendung hinzufügen. Die offiziellen Dokumente unter http://developer.android.com/training/animation/index.html scheinen keine Animationen zu enthalten, die "innerhalb einer Ansicht" stattfinden. Ich möchte auch nicht, wenn möglich, vorgezeichnete Rahmenanimationen (eine PNG-Ressource pro Rahmen) verwenden.

Wie würde ich das umsetzen? Jede Hilfe wird sehr geschätzt!

Answer 1

Etwas, das ich gekocht schnell auf, bei weitem nicht ideal, aber hey, es ist etwas: Gist

Im Grunde einen Kreis auf der Basis eines animierten Radius zeichnen. Um den genauen L-Effekt zu erhalten, sollten einige Feinabstimmungen vorgenommen werden. Der interessante Code:

@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); 
} 

---

In ihrem Vortrag "Was in Android ist neu", sprachen sie über, dass diese Animation passiert eigentlich auf einem separaten "Render-Thread", das sein Debüt in der L-Release machen . Dies ermöglicht glattere Animationen, selbst wenn der UI-Thread gerade aktiv ist oder etwas anderes kostet.

Answer 2

Meine Antwort ist etwas spät, aber ich wollte meine Lösung auch teilen. Ich habe eine andere Klasse namens TouchEffectAnimator mit der Idee von Niek Haarman erstellt. Danke an Herrn Haarman übrigens.

Sie können die Klasse und eine Beispielverwendung davon on this gist sehen. Auch ich werde es einfach erklären.

Die Klasse enthält alle notwendigen Methoden und Variablen und erstellt die gleiche Animation, die Android L (Vorschau) derzeit hat. Zur Verwendung dieser Klasse:

• Erstellen Sie eine benutzerdefinierte Ansicht. (Im Wesentlichen habe ich ein LinearLayout erstellt.)
• Initialisieren Sie das TouchEffectAnimator-Objekt.
• Definieren Sie einige Attribute wie Farbe, Effekttyp, Dauer und Größe der Clip-Ecken.
• Rufen Sie die onTouchEvent Methode des TouchEffectAnimator innerhalb der Ansicht onTouchEvent.
• Rufen Sie die onDraw Methode des TouchEffectAnimator innerhalb der Ansicht OnDraw.

und das ist es. Aber es gibt zwei Dinge, die getan werden sollten, damit diese Klasse richtig funktioniert.

• sollte es sein, einige OnClickListener auf der Ansicht der UP Berührungsereignis zu erhalten.
• Es sollte ein benutzerdefinierter oder transparenter Hintergrund für die Ansicht festgelegt werden. Wenn nichts als Hintergrund eingestellt ist, wird die Animation nicht angezeigt.

Ich hoffe, es funktioniert auch für Sie.

P.S. Ich habe diese Klasse für mein Bibliotheksprojekt Android FlatUI Kit erstellt. Sie können die Verwendung dieser Klasse auch in der FlatButton-Klasse sehen.