2012-03-09 5 views
7

私は次のことをしたいと思います。私はそれらの上にいくつかのアイコンを持っているボタンのセットを持っています。ユーザーがタップすると、タップされたアイコンと同じ座標で始まる新しいビューを導入し、その新しいビューが画面上の他の場所に移動し、到着した時点で削除されます。ある座標から別の座標にビューをアニメーション化する正しい方法は何ですか?

私は新しいビューを作成し、それを親RelativeLayoutに追加/削除する方法を知っています(それはRelativeLayoutではないでしょうか?)。私が明確にしていないのは、タップされたボタンの絶対座標を取得する方法です(別の親レイアウト内の親レイアウト内の要素の1つだけなので)。次に座標を設定してアニメーションを適用します。それが私がそれを取り除くことができるように、それが行くところに到着したことを私に通知しますか?

これを行う方法の例が見つからないため、誰かが正しい方向に私を向けることができれば幸いです。

+0

[OK]を、私は誰もが答えでチャイムない場合は他の人が参照するために、私は、明日それを投稿します、自分自身をそれを考え出しました。 –

+0

これについてのチュートリアルもありますか? – ManishSB

答えて

10

これは、私が想像していたよりはるかに単純です。

私はアニメーションが起こっている間だけ表示する、フルスクリーンの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();  
     } 
    }; 

をクリアするために行われたときに知っているように、リスナーが必要そして最後に、私たちは一緒にすべてを投げるとプレスが

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

これは私の助けになるように、このためのチュートリアルを持っています – ManishSB

+2

@ Real_steel4819、ごめんなさい、私はチュートリアルを持っていない...この回答で書いたものだけです。 –

+0

'getStickerIdFromButton(v);'とは何ですか? –

0

私はGOフレームレイアウト上の中心位置に私のビューを追加するだけで、私の視点はx軸とy軸になります。コードの下に試してみてください: -

あなたは、レイアウトの景色を移動するには、Androidの遷移アニメーションを使用することができ、画像表示に

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

をアニメーションを追加で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); 

上の画像ビューを追加します。 以下のリンクを参照して、レイアウト内のビューのアニメーション化に関するアイデアを入手してください。

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

関連する問題