教你實現別人家的動畫

經常上github的同學都知道Yalantis公司,像神一樣的存在 它家經常出產一些酷炫的動畫 大家可以去看下
今天我們來看看他家的這個動畫
https://github.com/Yalantis/Side-Menu.Android

是不是很酷炫 ok 我們來分析下

• 首先這裏有2個動畫 顯示動畫和隱藏動畫，很明顯2個動畫都是子項動畫的集合，一個動畫包含了多個動畫在裏面
• 顯示的時候 每個菜單子項是沿的Y軸由0度旋轉90度
• 隱藏的時候 其實和顯示相反 變成每個菜單項是由90旋轉到0度

分析完了 其實沒那麼複雜 那我們怎麼解決呢
翻轉動畫
android已經給我們提供好了rotationY這個屬性動畫 一看明瞭

ObjectAnimator anim= ObjectAnimator.ofFloat(target, "rotationY", 0f, 90f);

動畫集合
屬性動畫裏面也已經有了動畫集合這個東東 我們就用AnimatorSet
注意觀察上面的效果 動畫是一個接一個播放的 這個很重要

開始寫佈局 很簡單

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    //菜單項
    <LinearLayout
        android:id="@+id/ll_anim"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/blue"
            android:visibility="invisible" />

    </LinearLayout>
//按鈕
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="40dp"
        android:gravity="center">

        <Button
            android:id="@+id/btn_anim_show"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="show" />

        <Button
            android:id="@+id/btn_anim_hidden"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="hidden" />

    </LinearLayout>

</LinearLayout>

右邊是多個button組成的菜單列表

我們已經知道了每個菜單子項都是一個動畫 所以我們要給每個button生成一個動畫

//顯示動畫
    private ObjectAnimator createItemVisAnim(final View target, int index) {
        target.setPivotX(0);
        target.setPivotY(target.getHeight() / 2);
        ObjectAnimator invisToVis = ObjectAnimator.ofFloat(target, "rotationY", 90f, 0f);
        invisToVis.setDuration(MAX_DURATION-per_duration* index);
        invisToVis.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                target.setVisibility(View.VISIBLE);
            }
        });
        return invisToVis;
    }

上面代碼是創建顯示單個菜單子項動畫 我們需要一個顯示動畫集合

 private void initAnim(ViewGroup parent) {
        per_duration=MAX_DURATION/parent.getChildCount();
        ArrayList<Animator> visAnimList = new ArrayList<Animator>();
        for (int i = 0; i < parent.getChildCount(); i++) {
            ObjectAnimator itemAnim = createItemVisAnim(parent.getChildAt(i), i);
            visAnimList.add(itemAnim);
        }
        visAnimSet = new AnimatorSet();
        visAnimSet.playSequentially(visAnimList);
     }

我們遍歷了菜單容器裏面的每個button也就是菜單 ，每個菜單都創建一個動畫，然後放在了動畫集合裏面，並讓它們順序執行 。是不是很簡單。隱藏動畫和顯示動畫是一樣的，修改旋轉角度就可以了

//隱藏動畫
    private ObjectAnimator createItemInvisAnim(final View target, int index) {
        target.setPivotX(0);
        target.setPivotY(target.getHeight() / 2);
        ObjectAnimator visToInvis = ObjectAnimator.ofFloat(target, "rotationY", 0f, 90f);
        visToInvis.setDuration(per_duration+per_duration* index);
        return visToInvis;
    }

最後看一下我們的效果

效果有一些差別，主要是時間控制和顏色設計 大家可以根據自己要求調整
好吧 第一次寫文章 感覺還是有點難度 看來以後要鍛鍊多寫寫了