L -release -come animazione touch Ripple on pre -L

? FD_ @ | Original: StackOverFlow
---

Amo la nuova animazione touch Ripple che è stato introdotto nel nuovo L -release Android come parte della nuova filosofia UI Material design .

È possibile trovare un video di esso nelle specifiche di progettazione ufficiale 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 crescere nel tempo svanisce di nuovo, alla fine riempiendo l' intera vista con un grigio chiaro prima di scomparire di nuovo .

Mi piacerebbe aggiungere lo stesso di animazione a una vista nella mia app che è rivolti al ICS.

Io sono un po 'confusi su come aggiungere questa animazione nella mia applicazione . La documentazione ufficiale a http://developer.android.com/training/animation/index.html non sembrano coprire le animazioni che avvengono "dentro una visione " . Inoltre, mi piacerebbe non utilizzare animazioni di fotogrammi pre-disegnate (una png risorse per frame ), se possibile .

Come potrei fare per attuare questo? Qualsiasi aiuto è molto apprezzato !

---

Top 5 Risposta

1Niek Haarman @

Qualcosa ho cucinato in fretta, lungi dall'essere ideale, ma hey, è qualcosa : https://gist.github.com/nhaarman/dfe0631a820bccb7a3b3

Fondamentalmente disegnando un cerchio sulla base di un raggio di animazione . Per ottenere l'esatto L - effetto, un po 'di tweaking dovrebbe essere fatto . 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);
}

Nella loro talk " Cosa c'è di nuovo in Android", hanno parlato che questa animazione avviene in realtà su un separato " filo render", che farà il suo debutto nella L -release . Questo permetterà animazioni fluide, anche quando il thread UI è gonfiaggio occupato, o fare qualsiasi altra cosa costosa .

2eluleci @

La mia risposta è un po 'tardi, ma ho voluto condividere la mia soluzione troppo . Ho creato un'altra classe chiamata TouchEffectAnimator con l'idea di Niek Haarman . Grazie al Sig Haarman proposito .

Si può vedere la classe e un esempio di uso di esso https://gist.github.com/eluleci/6e0d02c766b27f6a5253 . Anche io lo spiego semplicemente .

La classe contiene tutti i metodi e le variabili in esso necessarie e crea la stessa animazione che Android L ( anteprima ) ha attualmente . Per usare questa classe :

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.

e questo è tutto . Ma ci sono due cose che dovrebbero essere fatte per questa classe per funzionare correttamente .

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.

Spero che funziona anche per te .

Post scriptum Ho creato questa classe per il mio progetto di biblioteca https://github.com/eluleci/FlatUI . Si può vedere l'utilizzo di questa classe in classe FlatButton pure .