Qual è il modo corretto di animare una vista da una coordinata all'altra?

Question

Mi piacerebbe fare quanto segue. Ho un set di pulsanti con alcune icone su di essi. Quando l'utente ne tocca uno, vorrei introdurre una nuova vista che inizi nella stessa coordinata dell'icona TAPpata, e quindi quella nuova vista si sposterebbe su un'altra posizione sullo schermo e al suo arrivo verrà rimossa.

So come creare una nuova vista e aggiungerla/rimuoverla a RelativeLayout padre (se non si tratta di un RelativeLayout?) E tutto il resto. Quello su cui non sono chiaro è come ottenere le coordinate assolute del pulsante che è stato toccato (poiché è solo un elemento all'interno di un layout genitore, all'interno di un altro layout principale) e quindi impostare le sue coordinate e applicare un'animazione, e quindi cosa sarebbe avvisami che è arrivato dove stava andando, in modo che io possa rimuoverlo?

Non riesco a trovare un esempio di come farlo comunque, quindi, sperando che qualcuno possa indicarmi la giusta direzione.

Answer 1

Quindi, si scopre che questo è molto più semplice di quanto immaginassi.

Ho creato un RelativeLayout a schermo intero che mostro solo mentre sta accadendo l'animazione.

ho la posizione di partenza del mio tasto sepolto come questo (è divertente vedere questi meccanismi di codifica stile C in Java, sono abbastanza raro in questi giorni:

int fromLoc[] = new int[2]; 
v.getLocationOnScreen(fromLoc);  
float startX = fromLoc[0]; 
float startY = fromLoc[1]; 

Così, ora ho la mia partenza punto.

mio punto finale è un assoluto coordinata sullo schermo, è possibile assegnare che comunque si desidera

Poi faccio un po 'di classe helper animazioni che mi permette di passare in tutte le coordinate, la richiamata, e il durata dell'animazione

public class Animations { 
public Animation fromAtoB(float fromX, float fromY, float toX, float toY, AnimationListener l, int speed){ 


     Animation fromAtoB = new TranslateAnimation(
       Animation.ABSOLUTE, //from xType 
       fromX, 
       Animation.ABSOLUTE, //to xType 
       toX, 
       Animation.ABSOLUTE, //from yType 
       fromY, 
       Animation.ABSOLUTE, //to yType 
       toY 
       ); 

     fromAtoB.setDuration(speed); 
     fromAtoB.setInterpolator(new AnticipateOvershootInterpolator(1.0f)); 


     if(l != null) 
      fromAtoB.setAnimationListener(l);    
       return fromAtoB; 
    } 
} 

e abbiamo bisogno di un ascoltatore per farci sapere quando l'animazione è fatto per cancellarlo

AnimationListener animL = new AnimationListener() { 

     @Override 
     public void onAnimationStart(Animation animation) {  
     } 

     @Override 
     public void onAnimationRepeat(Animation animation) {   
     } 

     @Override 
     public void onAnimationEnd(Animation animation) { 
      //this is just a method to delete the ImageView and hide the animation Layout until we need it again. 
      clearAnimation();  
     } 
    }; 

E infine gettiamo tutto insieme e premere GO

int fromLoc[] = new int[2]; 
    v.getLocationOnScreen(fromLoc);  
    float startX = fromLoc[0]; 
    float startY = fromLoc[1];  
    RelativeLayout rl = ((RelativeLayout)findViewById(R.id.sticker_animation_layout)); 
    ImageView sticker = new ImageView(this); 

    int stickerId = getStickerIdFromButton(v); 
    if(stickerId == 0){ 
     stickerAnimationPlaying = false; 
     return;   
    } 

    float destX = 200.0f;//arbitrary place on screen 
    float destY = 200.0f;//arbitrary place on screen 

    sticker.setBackgroundResource(stickerId); 
    sticker.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); 

    rl.addView(sticker); 
    Animations anim = new Animations(); 
    Animation a = anim.fromAtoB(startX, startY, destX, destY, animL,750); 
    sticker.setAnimation(a); 
    a.startNow(); 

Answer 2

Sono basta aggiungere la mia vista sulla posizione centrale sul layout del frame e tradurre la mia vista sull'asse xe sull'asse y. Prova sottostante Codice: -

aggiungere archivio di immagini sulla 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); 

Aggiungere animazione sulla visualizzazione dell'immagine

 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(); 

Answer 3

È possibile utilizzare l'animazione di transizione Android per spostare una vista sul layout. Dai un'occhiata al link qui sotto per avere qualche idea sull'animazione delle viste all'interno del layout.

https://github.com/lgvalle/Material-Animations