將視圖從一個座標移動到另一個座標的正確方法是什麼？

Question

我想做以下事情。我有一組按鈕，其上有一些圖標。當用戶點擊一個圖標時，我想引入一個新的視圖，它以與點擊圖標相同的座標開始，然後該新視圖會移動到屏幕上的其他位置，並在它到達時被刪除。

我知道如何創建一個新的視圖並將其添加/刪除到父親RelativeLayout（它不應該是一個RelativeLayout？）以及所有這些。我不清楚的是如何獲取被點擊的按鈕的絕對座標（因爲它只是父佈局內的一個元素，在另一個父佈局內），然後設置座標並應用動畫，然後通知我它已到達目的地，以便我可以將其刪除？

無論如何，找不到一個如何做到這一點的例子，所以希望有人能指出我正確的方向。

Answer 1

所以，事實證明，這比我想象的要簡單得多。

我創建了一個全屏幕RelativeLayout，我只在動畫發生時顯示。

我得到我喜歡這個埋按鈕的起始位置（這很有趣，看看在Java中使用這些C風格的編碼機制，他們是非常罕見的，這些天：

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

所以，現在我有我的起點點。

我的終點是一個絕對座標在屏幕上，你可以分配自己的喜好

然後我做一點動畫助手類，它讓我通過在所有的座標，回調，和動畫的持續時間

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

，我們需要一個傾聽者，讓我們知道當動畫做是爲了清除它

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

最後一點，我們把它放在一起，然後按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

我只需將我的視圖添加到框架佈局的中心位置，然後將我的視圖轉換爲x軸和y軸。嘗試下面的代碼： - 上的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); 

添加圖片視圖圖像視圖添加動畫

 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

您可以使用Android過渡動畫搬過來佈局的視圖。 看看下面提到的鏈接，以獲得佈局中動畫視圖的一些想法。

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