Mover un ImageView a diferentes posiciones de forma animada en Android
Tengo varios ImageView
s en un RelativeLayout
. Ahora, cuando el usuario toca cualquiera de los ImageView, quiero que se mueva a una ubicación específica con animación sutil.
P.ej; Inicialmente he establecido márgenes para LayoutParams
asociados con un ImageView
como layoutparams1.setMargins(90,70,0,0);
Y luego se han añadido a la distribución.
- Android 2.3: Crecer / reducir el error de animación?
- Onlclick oyente no está funcionando correctamente ..?
- Animación de una vista mientras que ListView no está funcionando
- Repetir AnimatorSet
- Adición de efecto de arrastrar natural a ImageView igual que las cabeceras de chat de Facebook Messanger utilizando la biblioteca de rebote
Y cuando imageview es aprovechado, me gustaría que su nueva ubicación de 200,200
, con la animación.
Entonces, ¿es posible? Si es así, ¿cómo?
Tenga en cuenta que tengo tanto RelativeLayout
y todos sus hijos ImageView
s creados mediante programación.
Y soy nuevo en el desarrollo de Android, por lo que se espera una respuesta elaborativa.
- Cómo cambiar el valor de NumberPicker con animación?
- Animar un cuadro de diálogo personalizado
- Una manera fácil de hacer funcionar la animación GONE
- Android ScaleAnimation
- OnTouchListener en vista invisible
- Error setBackground Ver después de la animación
- Loop AnimatorSet
- Makecaleupanimation de appwidget
TranslateAnimation animation = new TranslateAnimation(0, 50, 0, 100); animation.setDuration(1000); animation.setFillAfter(false); animation.setAnimationListener(new MyAnimationListener()); imageView.startAnimation(animation);
ACTUALIZACIÓN: El problema es que la View
todavía está en su posición anterior. Así que tenemos que moverlo cuando termine la animación. Para detectar cuando la animación está terminada tenemos que crear nuestro propio animationListener
(dentro de nuestra clase de activity
):
private class MyAnimationListener implements AnimationListener{ @Override public void onAnimationEnd(Animation animation) { imageView.clearAnimation(); LayoutParams lp = new LayoutParams(imageView.getWidth(), imageView.getHeight()); lp.setMargins(50, 100, 0, 0); imageView.setLayoutParams(lp); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationStart(Animation animation) { } }
Así que el onClickEvent
será despedido de nuevo en su nuevo lugar. La animación ahora lo moverá aún más hacia abajo, por lo que es posible que desee guardar las y
en una variable, de modo que en la onAnimationEnd()
no lo mueva a una ubicación de corrección.
También es mejor usar ObjectAnimator
. Esta vista de movimiento en nueva posición. por ejemplo :
ImageView splash ; @Override public boolean onTouchEvent(MotionEvent event) { float tx = event.getX(); float ty = event.getY(); int action = event.getAction(); switch(action) { case MotionEvent.ACTION_DOWN: tx = event.getX(); ty = event.getY(); // findViewById(R.id.character).setX(tx-45); // findViewById(R.id.character).setY(ty-134); ObjectAnimator animX = ObjectAnimator.ofFloat(splash, "x", tx-45); ObjectAnimator animY = ObjectAnimator.ofFloat(splash, "y", ty-134); AnimatorSet animSetXY = new AnimatorSet(); animSetXY.playTogether(animX, animY); animSetXY.start(); break; default: } return true; }
En debajo del código agrego una visión de la imagen en el centro en la disposición del marco dinámicamente. Después de añadir estoy aumento de escala y establecer alfa para dar efecto de zoom y después de la animación completa sólo estoy traducir mi imagen ver una posición a otra posición.
Añadir opinión de imagen en framelayout
imgHeart = new ImageView(getBaseContext()); imgHeart.setId(R.id.heartImage); imgHeart.setImageResource(R.drawable.material_heart_fill_icon); imgHeart.setLayoutParams(new FrameLayout.LayoutParams(50, 50, Gravity.CENTER)); mainFrameLaout.addView(imgHeart);
Añadir animación en la vista de imagen
imgHeart.animate() .scaleXBy(6) .scaleYBy(6) .setDuration(700) .alpha(2) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { imgHeart.animate() .scaleXBy(-6f).scaleYBy(-6f) .alpha(.1f) .translationX((heigthAndWidth[0] / 2) - minusWidth) .translationY(-((heigthAndWidth[1] / 2) - minusHeight)) .setDuration(1000) .setListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { // remove image view from framlayout } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }).start(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }).start();