android - studio - L-release-como la animación Touch Ripple en pre-L

ripple effect button

Question

Me encanta la nueva animación Touch Ripple que se introdujo en el nuevo lanzamiento de Android L como parte de la nueva filosofía de UI Material Design.

Puede encontrar un video de él en la especificación de diseño oficial bajo reacción de superficie aquí: http://www.google.com/design/spec/animation/responsive-interaction.html

Es básicamente un círculo gris oscuro que se desvanece en el centro de la vista y crece a medida que se desvanece, hasta que finalmente completa toda la vista con un gris claro antes de desaparecer nuevamente.

Me gustaría agregar la misma animación a una vista en mi aplicación que está orientada a ICS.

Estoy un poco desorientado sobre cómo agregar esta animación en mi aplicación. Los documentos oficiales en http://developer.android.com/training/animation/index.html no parecen cubrir animaciones que ocurren "dentro de una vista". Además, me gustaría no usar animaciones de cuadros previamente dibujadas (un recurso de png por cuadro) si es posible.

¿Cómo haría para implementar eso? ¡Cualquier ayuda es muy apreciada!

Answer 1

Algo que cociné rápidamente, lejos de lo ideal, pero bueno, es algo: Gist

Básicamente dibujando un círculo basado en un radio animado. Para obtener el efecto L exacto, se deben hacer algunos ajustes más. El código interesante:

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

En su charla "Qué hay de nuevo en Android", hablaron de que esta animación en realidad sucede en un "Procesamiento de hilos" separado, que hará su debut en la versión L-release. Esto permitirá animaciones más suaves, incluso cuando el subproceso de la interfaz de usuario esté ocupado inflando o haciendo cualquier otra cosa costosa.

Answer 2

Mi respuesta es un poco tarde pero también quería compartir mi solución. Creé otra clase llamada TouchEffectAnimator con la idea de Niek Haarman. Gracias al Sr. Haarman por cierto.

Puede ver la clase y un ejemplo de uso de la misma en esta esencia . También lo explicaré simplemente.

La clase contiene todos los métodos y variables necesarios y crea la misma animación que Android L (vista previa) tiene actualmente. Para usar esta clase:

• Crear una vista personalizada. (en el primer ejemplo creé un LinearLayout)
• Inicialice el objeto TouchEffectAnimator.
• Defina algunos atributos del mismo como color, tipo de efecto, duración y tamaño de las esquinas del clip.
• Llame al método onTouchEvent de TouchEffectAnimator dentro de onTouchEvent de la vista .
• Llame al método onDraw de TouchEffectAnimator dentro de onDraw de la vista .

y eso es. Pero hay dos cosas que se deben hacer para que esta clase funcione correctamente.

• Debe haber algo de OnClickListener en la vista para obtener el evento UP UP touch.
• Debe haber un fondo personalizado o transparente establecido en la vista. Si nada se establece como fondo, la animación no se muestra.

Espero que funcione para ti tambien.

PS He creado esta clase para mi proyecto de biblioteca Android FlatUI Kit . También puede ver el uso de esta clase en la clase FlatButton.