一桐磁、效果分析
效果圖1
效果圖2
布局：
- DrawerLayout+Fragment
重點：
- 側(cè)邊欄的數(shù)據(jù)結(jié)構(gòu)（名稱+資源文件）
- 側(cè)邊欄的動畫效果（點擊ActionBar中的home按鈕捺宗，顯示側(cè)邊欄時的旋轉(zhuǎn)效果）
二镀娶、自定義DrawerLayout側(cè)邊欄
DrawLayout需要注意兩點：
- DrawerLayout最好是跟布局
- DrawerLayout中的子布局先后順序要注意，抽屜布局要放在最后麻诀，因為DrawerLayout布局和RelativeLayout布局類似初家，后寫的布局會覆蓋前面的布局。
三坷牛、側(cè)邊欄結(jié)構(gòu)設(shè)計
Interface:
public interface Resourceble {
public int getImageRes(); //圖片資源文件罕偎，引用時放在項目的drawable文件夾下
public String getName(); //每個資源文件對應(yīng)的名稱
}
數(shù)據(jù)模型類：
public class SlideMenuItem implements Resourceble {
private String name;
private int imageRes;
public SlideMenuItem(String name, int imageRes) {
this.name = name;
this.imageRes = imageRes;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getImageRes() {
return imageRes;
}
public void setImageRes(int imageRes) {
this.imageRes = imageRes;
}
}
四、側(cè)邊欄動畫設(shè)計
側(cè)邊欄的每一個Item都是SlideMenuItem實例京闰。每個SlideMenuItem的動畫效果是沿著Y軸旋轉(zhuǎn)90度（顯示是逆時針90°颜及，隱藏是順時針90°），為了動畫的平滑效果忙干，用到了加速插值器器予。
- 自定義Animation
FlipAnimation類，extends Animation捐迫。重寫了initialize(),applyTransformation()方法乾翔。動畫的平移，旋轉(zhuǎn)施戴，透明度變化都在applyTransformation中實現(xiàn)反浓。注意代碼中注釋的角度計算，是重點赞哗。每個Item都是圍繞Y軸做了旋轉(zhuǎn)操作雷则，度數(shù)都是90度。關(guān)鍵在于：
1 如何做到顯示和隱藏的角度計算肪笋？
2 如何平滑顯示和隱藏月劈？
3 每一個Item的動畫效果延遲是如何實現(xiàn)的？
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
//interpolatedTime范圍固定0-1藤乙。
//顯示：mToDegrees為90猜揪， mFromDegrees為0，變化范圍是-90度--->0度
//隱藏：mToDegrees為0坛梁， mFromDegrees為90而姐，變化范圍是0度--->-90度
float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
顯示抽屜菜單，代碼可見划咐，平滑動畫的出現(xiàn)是因為使用了加速插值器rotation.setInterpolator(new AccelerateInterpolator());
private void animateView(int position) {
final View view = viewList.get(position);
view.setVisibility(View.VISIBLE);
FlipAnimation rotation =
new FlipAnimation(90, 0, 0.0f, view.getHeight() / 2.0f);
rotation.setDuration(ANIMATION_DURATION); //175ms
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
view.clearAnimation();
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
view.startAnimation(rotation);
}
每一個Item動畫交替出現(xiàn)是用了Handler延遲調(diào)用拴念，最后的Fragment的圖片切換效果是用了一個開源的庫RevealFrameLayout
for (int i = 0; i < size; i++) {
略...
new Handler().postDelayed(new Runnable() {
public void run() {
if (position < viewList.size()) {
animateView((int) position);
}
if (position == viewList.size() - 1) { //最后一個Item
screenShotable.takeScreenShot(); //調(diào)用接口的方式來改變Fragment中的圖片（這個其實也是點擊之后才發(fā)生的效果）
setViewsClickable(true);
}
}
}, (long) delay);
}
