android 翻轉動畫實現

自己的前幾篇文章基本都是簡單的把動畫實現，能夠看看效果。這次帶來的翻轉動畫自然少不了的顯示動畫效果。

但這次多了實用性、可擴展性的考慮，把翻轉動畫不僅僅是針對個別iew的動畫效果，而是一個可以翻轉的layout，並實現接口flipable，具備一定的封裝性；方便在添加其它控件，具備一定的擴展性，在例子中，也示例性地改變翻轉內容，把layout中默認的textview 改為 由代碼填充的imageView。能夠在實際代碼中使用。

1. 翻轉動畫的基本實現：

首先，翻轉自然需要兩個界面，可以是view 也可以是layout ；

然後，使用android的屬性動畫，rotationX，創建兩個動畫，分別是為翻轉出現/翻轉消失。

        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(visibleLayout, "rotationX", 0f, 90f);
        ObjectAnimator invisToVis = ObjectAnimator.ofFloat(invisibleLayout, "rotationX",
                -90f, 0f);

接著，設置在一個動畫結束的時候讓另一個動畫播放，並調用播放，就可以看到效果了。

        visToInvis.addListener(new AnimatorListenerAdapter() {
            public void onAnimationEnd(Animator anim) {
                visibleLayout.setVisibility(View.GONE);
                invisToVis.start();
                invisibleLayout.setVisibility(View.VISIBLE);
            }
        });
        visToInvis.start();

最後，把這些放到一個函數裡，在點擊事件裡調用，就完成了。

2. 可翻轉layout的實現， FlipableLayout 的實現。

首先，設計接口Flipable

public interface Flipable {
    public void flip();
}

然後，設計布局文件flipable_relativelayout.xml，這裡面的textview是為了演示設置的默認布局。

然後，自定義layout，並添加構造函數，加載布局文件。

public class FlipableRelativeLayout extends RelativeLayout implements Flipable {
    private LinearLayout mFontLayout;
    private LinearLayout mBackLayout;

    public FlipableRelativeLayout(Context context) {
        super(context, null);
        inflate(getContext(), R.layout.flipable_relativelayout, this);
    }

    public FlipableRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        inflate(getContext(), R.layout.flipable_relativelayout, this);
    }

    public FlipableRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        inflate(getContext(), R.layout.flipable_relativelayout, this);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mFontLayout = (LinearLayout) findViewById(R.id.front);
        mBackLayout = (LinearLayout) findViewById(R.id.back);
    }

增加set方法，方便擴展

    protected void setFront(View v) {
        mFontLayout.removeAllViews();
        mFontLayout.addView(v);
        invalidate();
    }

    protected void setBack(View v) {
        mBackLayout.removeAllViews();
        mBackLayout.addView(v);
        invalidate();
    }

增加flip 方法，實現翻轉動畫。

    @Override
    public void flip() {
        // 上文中提到的實現
    }

3. 設計演示布局文件，multiple_flip_example.xml

引用剛剛寫好的FlipableRelativeLayout

初始化布局，

    private void initView() {
        setContentView(R.layout.multiple_flip_example);
        mFlipButton = (Button) findViewById(R.id.button_flip);
        mFlipButton.setOnClickListener(this);
        mChangeButton = (Button) findViewById(R.id.button_change);
        mChangeButton.setOnClickListener(this);
        mFlipLayout = (FlipableRelativeLayout) findViewById(R.id.flip);
    }

設置點擊事件，點擊flip button 是直接翻轉， 點擊change button ，修改翻轉內容，變為圖片。

    @Override
    public void onClick(View v) {
        animateClickView(v, new ClickAnimation() {
            @Override
            public void onClick(View v) {
                if (v == mFlipButton) {
                    mFlipLayout.flip();
                } else if (v == mChangeButton) {
                    ImageView front = new ImageView(getApplicationContext());
                    front.setImageResource(R.drawable.avatar);
                    front.setVisibility(View.VISIBLE);
                    ImageView back = new ImageView(getApplicationContext());
                    back.setImageResource(R.drawable.chobber);
                    back.setVisibility(View.VISIBLE);
                    mFlipLayout.setFront(front);
                    mFlipLayout.setBack(back);
                    mFlipLayout.flip();
                }

            }
        });
    }

animateClick 是使用前文中寫的點擊動畫，具體實現參見：《android 點擊效果動畫增強》http://blog.csdn.net/farmer_cc/article/details/18551657

private void animateClickView(final View v, final ClickAnimation callback)

ok，這樣就完成基本功能。趕緊運行看下效果吧。

http://v.youku.com/v_show/id_XNjY0NDA2MDI4.html

4. 實現多路依次翻轉

在上述功能實現的基礎上，繼續加工。實現多個翻轉組件的順序的翻轉動畫。

增加fliplayout 的getAnimator 方法，和createFlipAnimator方法。

    private Animator createFlipAnimator() {
        //創建過程如上文所示
        return mVisToInvis;
    }

    public Animator getFlipAnimator() {
        return createFlipAnimator();
    }

在example 中增加動畫列表

    private ArrayList mFlipList = new ArrayList();

並實現獲取所有布局flip動畫的方法， 通過遍歷布局中所有的child，並判斷是否是FlipableRelativeLayout ，加入到列表中。

    private void collectFlipAnim() {
        mFlipList.clear();
        traversalCollectFlip(mMainLayout);
    }

    private void traversalCollectFlip(ViewGroup parent){
        if(parent==null){
            return;
        }
        if(parent.getChildCount()==0 ){
            return;
        }
        for (int index = 0; index < parent.getChildCount(); index++) {
            if (parent.getChildAt(index) instanceof FlipableRelativeLayout) {
                mFlipList.add(((FlipableRelativeLayout) (parent.getChildAt(index))).getFlipAnimator());
                continue;
            }
            try{
                traversalCollectFlip((ViewGroup) parent.getChildAt(index));
            }catch(ClassCastException e){
                // not a ViewGroup, continue
            }
        }
    }

在點擊事件中調用即可。

    private void flipAll() {
        collectFlipAnim();
        AnimatorSet animSet = new AnimatorSet();
        animSet.playSequentially(mFlipList);
        animSet.start();
    }

完整版的多路翻轉動畫實現效果：

android 翻轉動畫完整版 http://v.youku.com/v_show/id_XNjY0NDgwODM2.html