Android中一個視圖彈齣動畫的簡單實現

動畫實現的功能描述：類似於畫廊的功能，點擊其中一個圖片的縮圖，然後全屏開啟這個圖片，中間的過程用動畫實現，給操作者一個從縮圖放大到全屏的感覺。

由上述的描述可以看出，使用者點擊縮圖的位置是不固定的，所以動畫的起始位置是不固定的，而且有的特殊情況下可能動畫起始是視圖的大小也是不固定的，所以用anim的xml定義實現是不可能的，所以這裡我用將用手寫AnimationSet的方式實現這個動畫。

樣本程式描述：

本樣本是通過點擊不同位置上的button，然後通過動畫彈出一個LinearLayout，點擊這個LinearLayout，然後又通過動畫的方式隱藏這個LinearLayout。

第一步，建立一個工程，在初始的main.xml中添加多個button

本例是添加了6個button，具體代碼就不再貼出了。樣子就是這樣的：

 

第二步，給每個button添加上點擊事件

可以通過xml上的android:onClick="btnOnClick"屬性聲明點擊事件，然後在相應的Activity上實現這個方法就可以了，代碼如下：

btnOnClick(View btn)

1     public void btnOnClick(View btn) {2         showView(btn);3     }

第三步，實現彈齣動畫和隱藏動畫

顯示動畫如下：

顯示動畫

 1 AnimationSet animSet = new AnimationSet(true); 2         ScaleAnimation sa = new ScaleAnimation((float) v.getWidth() 3                 / ((View) v.getParent()).getWidth(), 1.0f, 4                 (float) v.getHeight() / ((View) v.getParent()).getHeight(), 5                 1.0f, v.getX() + v.getWidth() / 2, v.getY() + v.getHeight() / 2); 6         sa.setDuration(2000); 7         AlphaAnimation aa = new AlphaAnimation(0.2f, 1); 8         aa.setDuration(2000); 9         animSet.addAnimation(sa);10         animSet.addAnimation(aa);

隱藏動畫如下：

隱藏動畫

 1 AnimationSet animSet = new AnimationSet(true); 2         ScaleAnimation sa = new ScaleAnimation(1, (float) v.getWidth() 3                 / ((View) v.getParent()).getWidth(), 1, (float) v.getHeight() 4                 / ((View) v.getParent()).getHeight(), v.getX() + v.getWidth() 5                 / 2, v.getY() + v.getHeight() / 2); 6         sa.setDuration(2000); 7         AlphaAnimation aa = new AlphaAnimation(1f, 0f); 8         aa.setDuration(2000); 9         animSet.addAnimation(sa);10         animSet.addAnimation(aa);

綜上所述，整個樣本的核心代碼就是Activity的2個方法，Activity的原始碼如下：

Activity

 1 public class AnimTestActivity extends Activity { 2     private LinearLayout mView = null; 3  4     /** Called when the activity is first created. */ 5     @Override 6     public void onCreate(Bundle savedInstanceState) { 7         super.onCreate(savedInstanceState); 8         setContentView(R.layout.main); 9     }10 11     public void btnOnClick(View btn) {12         showView(btn);13     }14 15     private void showView(final View v) {16         if (mView == null) {17             mView = new LinearLayout(this);18             mView.setBackgroundColor(Color.BLUE);19             addContentView(mView, new ViewGroup.LayoutParams(20                     LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));21         }22         mView.setOnClickListener(new View.OnClickListener() {23             @Override24             public void onClick(View view) {25                 hideView(v);26             }27         });28 29         AnimationSet animSet = new AnimationSet(true);30         ScaleAnimation sa = new ScaleAnimation((float) v.getWidth()31                 / ((View) v.getParent()).getWidth(), 1.0f,32                 (float) v.getHeight() / ((View) v.getParent()).getHeight(),33                 1.0f, v.getX() + v.getWidth() / 2, v.getY() + v.getHeight() / 2);34         sa.setDuration(2000);35         AlphaAnimation aa = new AlphaAnimation(0.2f, 1);36         aa.setDuration(2000);37         animSet.addAnimation(sa);38         animSet.addAnimation(aa);39         mView.startAnimation(animSet);40         mView.setVisibility(View.VISIBLE);41     }42 43     private void hideView(View v) {44         AnimationSet animSet = new AnimationSet(true);45         ScaleAnimation sa = new ScaleAnimation(1, (float) v.getWidth()46                 / ((View) v.getParent()).getWidth(), 1, (float) v.getHeight()47                 / ((View) v.getParent()).getHeight(), v.getX() + v.getWidth()48                 / 2, v.getY() + v.getHeight() / 2);49         sa.setDuration(2000);50         AlphaAnimation aa = new AlphaAnimation(1f, 0f);51         aa.setDuration(2000);52         animSet.addAnimation(sa);53         animSet.addAnimation(aa);54         mView.startAnimation(animSet);55         mView.setVisibility(View.GONE);56     }57 }

 有一點需要說明一下：(float) v.getWidth()    / ((View) v.getParent()).getWidth()

• v.getWidth()  和 ((View) v.getParent()).getWidth()都是int類型，為了不讓得到的結果為0，這裡用float轉換了一下分子
• v.getWidth() 在彈齣動畫中代表的是動畫起始時視圖的大小，在隱藏動畫中代表的是動畫結束時視圖的大小
• ((View) v.getParent()).getWidth()在彈齣動畫中代表的是動畫結束時的視圖的大小，在隱藏動畫中代表的是動畫開始時視圖的大小
• 這個比值的結果是動畫變化前後的寬度的比值