Mover un ImageView a una posición diferente en forma animada en Android

Question

Tengo varios ImageView s en un . ahora, cuando el usuario toque cualquiera de los ImageView, quiero que se mueva a una ubicación específica con una animación sutil.

Eg; Inicialmente establecí los márgenes para LayoutParams asociados con ImageView como layoutparams1.setMargins(90,70,0,0); y luego los agregué al diseño.

y cuando se toca imageview, me gustaría que su nueva ubicación sea 200,200, con animación.

Entonces, ¿es posible? ¿Si es así, entonces cómo?

Tenga en cuenta que tengo ambos 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 elaborada.

Answer 1

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 el View es en realidad todavía en su posición de edad. Entonces, debemos moverlo cuando la animación haya terminado. Para detectar cuando la animación está terminado tenemos que crear nuestra propia animationListener (dentro de nuestra clase 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 la onClickEvent obtendrá disparado 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 x y y en una variable, de modo que en el onAnimationEnd() no lo mueva a una ubicación de reparación.

Answer 2

también es mejor que use ObjectAnimator. este movimiento ve en una 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; 
} 

Answer 3

En código de abajo añado un vista de la imagen en el centro de diseño de marcos dinámicamente. Después de agregar, aumente la escala y establezca alfa para dar un efecto de zoom y después de la animación completa solo estoy traduciendo mi imagen, vea una posición a otra posición.

Agregar vista de la 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 vista de la 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();