Cách chính xác để animate Chế độ xem từ một tọa độ này sang tọa độ khác là gì?

Question

Tôi muốn làm như sau. Tôi có một bộ nút có một số biểu tượng trên chúng. Khi người dùng chạm vào một, tôi muốn giới thiệu Chế độ xem mới bắt đầu ở cùng tọa độ với biểu tượng nhấn và sau đó Chế độ xem mới sẽ chuyển sang một số vị trí khác trên màn hình và khi nó đến nơi bị xóa.

Tôi biết cách tạo chế độ xem mới và thêm/xóa nó vào RelativeLayout mẹ (nó không phải là RelativeLayout?) Và tất cả điều đó. Những gì tôi không rõ ràng là làm thế nào để có được tọa độ tuyệt đối của nút được khai thác (vì nó chỉ là một phần tử bên trong bố cục cha mẹ, bên trong bố cục cha khác) và sau đó đặt tọa độ và áp dụng hoạt ảnh, thông báo cho tôi rằng nó đã đến nơi nó đang đi, để tôi có thể loại bỏ nó?

Không thể tìm thấy ví dụ về cách thực hiện việc này, vì vậy, hy vọng ai đó có thể chỉ cho tôi đúng hướng.

Answer 1

Vì vậy, nó chỉ ra rằng điều này là thẳng tiến hơn nhiều so với tôi tưởng tượng.

Tôi đã tạo ra toàn màn hình RelativeLayout mà tôi chỉ hiển thị trong khi hoạt ảnh đang diễn ra.

tôi nhận được vị trí bắt đầu của nút chôn tôi như thế này (nó buồn cười để nhìn thấy những cơ chế C phong cách mã hóa trong Java, họ đang khá hiếm những ngày này:

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

Vì vậy, bây giờ tôi phải bắt đầu của tôi điểm.

điểm cuối cùng của tôi là hoàn toàn phối hợp trên màn hình, bạn có thể gán rằng tuy nhiên bạn muốn

Sau đó, tôi thực hiện một ít lớp helper Animations cho phép tôi vượt qua trong tất cả các tọa độ, gọi lại, và thời lượng của hoạt ảnh

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

và chúng ta cần một người biết lắng nghe để cho chúng tôi biết khi nào hình ảnh động được thực hiện để xóa nó

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

Và cuối cùng chúng ta ném nó tất cả cùng nhau và nhấn 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

Tôi chỉ cần thêm chế độ xem của tôi vào vị trí trung tâm trên bố cục khung và dịch chế độ xem của tôi sang trục x và trục y. Hãy thử mã dưới đây: - xem hình ảnh

Thêm vào 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); 

Thêm hình ảnh động trên xem hình ảnh

 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

Bạn có thể sử dụng hình ảnh động chuyển Android để di chuyển một cái nhìn qua cách bố trí. Hãy xem liên kết được đề cập bên dưới để biết một số ý tưởng về cách xem hoạt ảnh bên trong bố cục.

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