L- Release - wie Touch Ripple Animation auf Pre- L

? FD_ @ | Original: StackOverFlow
---

Ich liebe die neuen Touch- Ripple -Animation, die in der neuen Android- L- Release im Rahmen des neuen UI Philosophie Material Design eingeführt wurde.

Sie können ein Video von ihr 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 dunkelgrauen Kreis, der in verblasst in der Mitte der Ansicht, und wächst, wie es aus schwindet wieder, schließlich erfüllte das ganze Ansicht mit einem hellgrauen, bevor er wieder verschwand .

Ich möchte die gleichen Animation zu einer Ansicht in meiner app, die Aktionen mit ICS hinzuzufügen.

Ich bin ein wenig ratlos, wie diese Animation in meiner Anwendung hinzuzufügen. Die offizielle Dokumentation zu http://developer.android.com/training/animation/index.html scheinen nicht zu Animationen, die passieren "in einer Ansicht " zu decken. Außerdem würde Ich mag nicht vorgezeichneten Frame-Animationen (ein png -Ressource pro Frame ), wenn möglich .

Wie würde ich mich über die Implementierung von das gehen ? Jede Hilfe ist willkommen!

---

Top 5 Antwort

1Niek Haarman @

Etwas, das ich gekocht schnell, alles andere als ideal, aber hey, es ist etwas : https://gist.github.com/nhaarman/dfe0631a820bccb7a3b3

Grundsätzlich Zeichnen eines Kreises auf der Grundlage einer animierten Radius. Um die exakte L- Wirkung zu erzielen, sollten einige weitere Optimierungen durchgeführt werden. Die interessantCode :

@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 ist neu in Android ", sprachen sie über dass diese Animation passiert eigentlich auf ein separates " Render- Thread ", der sein Debüt in der L- Release machen. Dies wird glatter Animationen ermöglichen, auch wenn das UI-Thread ist besetzt Aufblasen, oder irgendetwas anderes tun, teuer .

2eluleci @

Meine Antwort ist ein bisschen spät, aber ich meine Lösung zu teilen. Ich habe eine andere Klasse namens TouchEffectAnimator mit der Idee, Niek Haarman . Vielen Dank an Herrn Haarman übrigens.

Sie können die Klasse und ein Beispiel für die Verwendung es https://gist.github.com/eluleci/6e0d02c766b27f6a5253 sehen . Auch ich werde es einfach zu erklären.

Die Klasse enthält alle notwendigen Methoden und Variablen in sie und schafft die gleiche Animation, Android L ( Vorschau) derzeit . Für die Verwendung dieser Klasse :

Create a custom view. (in gist example I created a LinearLayout) Initialise the TouchEffectAnimator object. Define some attributes of it like color, effect type, duration and clip corners size. Call the onTouchEvent method of TouchEffectAnimator inside the view's onTouchEvent. Call the onDraw method of TouchEffectAnimator inside the view's onDraw.

und das ist es . Aber es gibt zwei Dinge, die getan werden sollte, für diese Klasse, um richtig zu arbeiten.

There should be some OnClickListener on the view to get the UP touch event. There should be a custom or transparent background set to the view. If nothing is set as background the animation is not shown.

Ich hoffe, es funktioniert auch für Sie.

PS: Ich habe diese Klasse für meine Bibliotheksprojekt https://github.com/eluleci/FlatUI . Sie können die Verwendung dieser Klasse in FlatButton Klasse als auch zu sehen .