-L -release como animação Toque Ripple em pré -L

? FD_ @ | Original: StackOverFlow
---

Eu adoro a nova animação Toque Ripple que foi introduzida no novo L -release Android como parte da nova filosofia UI Design de Materiais.

Você pode encontrar um vídeo dele na especificação design oficial sob reação de superfície aqui: http://www.google.com/design/spec/animation/responsive-interaction.html

É basicamente um círculo cinza - escuro que se desvaneça em no centro da vista e cresce à medida que ele desaparece de novo, eventualmente, enchendo toda a vista com um cinza claro, antes de desaparecer novamente.

Eu gostaria de adicionar a mesma animação de uma visão em meu aplicativo que está destinada a ICS.

Estou um pouco sem noção sobre como adicionar esta animação em meu aplicativo. Os documentos oficiais em http://developer.android.com/training/animation/index.html não parecem cobrir animações que acontecem " dentro de uma visão " . Além disso, eu gostaria de não usar pré-desenhados de quadros de animação ( um recurso png por quadro ), se possível .

Como eu iria sobre como implementar isso? Qualquer ajuda é muito apreciada!

---

Top 5 Responder

1Niek Haarman @

Algo que eu cozido rapidamente, longe de ser ideal, mas hey, isso é algo : https://gist.github.com/nhaarman/dfe0631a820bccb7a3b3

Basicamente desenhar um círculo com base em um raio de animação . Para obter a L- efeito exato, mais alguns ajustes devem ser feitos . O código 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);
}

Em sua palestra "O que há de novo no Android ", eles falaram sobre essa animação que realmente acontece em um separado "Dai thread", que fará sua estréia na libertação L. Isso permitirá que as animações mais suaves, mesmo quando o segmento interface do usuário é inflar ocupado, ou fazendo qualquer outra coisa caro.

2eluleci @

A minha resposta é meio tarde, mas eu queria compartilhar minha solução também. Eu criei uma outra classe chamada TouchEffectAnimator com a idéia de Niek Haarman . Graças ao Sr. Haarman pelo caminho.

Você pode ver a classe e um exemplo de uso do mesmo https://gist.github.com/eluleci/6e0d02c766b27f6a5253 . Também vou explicar -lo simplesmente.

A classe contém todos os métodos e variáveis ​​em que necessárias e cria a mesma animação que Android L ( preview) tem atualmente . Para utilizar esta 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 é isso . Mas há duas coisas que devem ser feitas para esta classe para funcionar corretamente .

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.

Espero que funcione para você também.

P.S. Eu criei esta classe para o meu projeto de biblioteca https://github.com/eluleci/FlatUI . Você pode ver o uso dessa classe em classe FlatButton também.