天天看點

android 環形動畫,android動畫環形菜單效果

最近三天一直在搞一個叫環形菜單的,之後發現效果不好,又加了動畫效果,最後又加了分頁功能,感覺有點亂,現在在這裡整理記錄一下吧

整體的思路是:以中間主菜單為中心,在它周圍依次顯示你的菜單,可以是圓形,也可以是矩形,隻不過計算的公式不一而已,這裡難的是給它們賦予依次動畫效果。下面我們來詳細說說。

首先,貼上我們要實作的效果圖:

android 環形動畫,android動畫環形菜單效果

圖中你所看到的中間的那個視圖就是我們點選螢幕彈出來的環形菜單,可以看到,它是由兩個View疊加形成的,底層的是一個黑色透明背景,上層就是加載我們的xml布局檔案來的,當然你完全可以在xml布局檔案中定死幾個菜單圖示的位置,但是這樣:如果老總看着不爽,改成圓形的,加個動畫那就想死的心都有了,基本上要重新來過。是以,我們布局檔案中基本可以是空的,菜單圖示全部動态生成(當然,你也可以在布局檔案中聲明圖示而不指定其位置),那麼,我們在代碼中應該怎麼寫呢?

我們以中間那個關閉的圖示為中心,設定它在螢幕中心,然後以它為中心畫圓或矩形

如果是畫圓:

android 環形動畫,android動畫環形菜單效果

我們要求的是圖中A、B、C等點的坐标,學過數學的都知道圖中x = r*cosa,其中的角a是知道的,如果老總叫每頁顯示6個菜單圖示,那就a=360/6咯,畫矩形同理。

現在我們應該可以作出上圖所示效果,但會發現,太生硬,如果加點動畫效果就更好了,如那幾個圖示可以從中間的關閉圖示除慢慢的彈出來,翻頁時,先讓所有圖示縮回去,再彈出來,這樣我們的菜單就好看多了,現在我們來看看怎麼讓它有動畫效果。

3.0以前,android支援兩種動畫模式,tween animation、frame animation,在android3.0中又引入了一個新的動畫系統:property animation,而這裡我們用的就是property animation,屬性動畫。

屬性動畫中一定會用到的AnimationSet,這個東西看名字也看得出什麼意思,動畫集合,就是一組的動畫效果同時播放。它有個方法addAnimation,你在這個方法裡面可以增加漸變,平移等等效果,例如:

TranslateAnimation outTranAni = new TranslateAnimation(0, x, 0, y);

outTranAni.setFillAfter(true);

outTranAni.setDuration(duratime);

AnimationSet outSet = new AnimationSet(true);

outSet.addAnimation(outTranAni);

此時隻是隻有一個AnimationSet,前面說到是“是一組的動畫效果同時播放”,是以:

private List mOutAnimatinSets = new ArrayList();

for(...)

mOutAnimatinSets.add(outSet);

這樣我們就注冊了一組動畫集合,接下來我們播放它:

for(...)

layout.startAnimation(mOutAnimatinSets.get(i));

注意這裡:如果我們隻是這樣的話,會發現動畫效果一閃而過了。這裡AnimationSet.startAnimation時,其實它是有個監聽器的:

outSet.setAnimationListener(new AnimationListener() {

@Override

public void onAnimationEnd(Animation animation) {

if (layout != null) {

layout.clearAnimation();

layout.layout(left, top, right, bottom);

isEnd = false;

}

}

@Override

public void onAnimationRepeat(Animation animation) {

}

@Override

public void onAnimationStart(Animation animation) {

}

});

其中的layout.layout(left, top, right, bottom);就是确定動畫結束後停止的位置。

我的部落格其它文章清單

http://my.oschina.net/helu