YY項目之幀動畫（一）

因爲項目中須要實現一個小遊戲，根據音樂節奏打擊節奏點，打擊時須要有一個效果動畫。

實現：利用framelayout的浮動特性，使用2層relativelayout，第一層視圖層，第二層，動畫層

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    >

    <RelativeLayout
        android:id="@+id/rl_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/iv_click"
            android:layout_width="@dimen/x220"
            android:layout_height="@dimen/x220"
            android:layout_above="@+id/iv_center"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="@dimen/x10"
            android:clickable="true"
            android:longClickable="true"
            fresco:placeholderImage="@mipmap/bit_click"/>

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/iv_click"
            android:layout_toStartOf="@+id/iv_click"
            android:src="@mipmap/bit_vertical"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_toEndOf="@+id/iv_click"
            android:layout_toRightOf="@+id/iv_click"
            android:src="@mipmap/bit_vertical"/>


        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/simple_background"
            android:layout_width="@dimen/x262"
            android:layout_height="match_parent"
            android:layout_above="@id/iv_center"
            android:layout_centerHorizontal="true"
            android:scaleType="fitXY"
            android:src="@mipmap/bit_background"/>

        <com.facebook.drawee.view.SimpleDraweeView
            android:layout_width="match_parent"
            android:layout_height="@dimen/x30"
            android:layout_above="@id/iv_center"
            android:layout_marginBottom="@dimen/_x15"
            android:background="@mipmap/bit_horizonnal"
            android:scaleType="fitXY"/>

        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/iv_center"
            android:layout_width="@dimen/x262"
            android:layout_height="@dimen/y150"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@mipmap/bit_frame"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/iv_anim"
            android:layout_width="@dimen/x240"
            android:layout_height="@dimen/x240"
            android:layout_above="@+id/iv_center_"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="@dimen/_x10"/>


        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/simple_background_"
            android:layout_width="@dimen/x262"
            android:layout_height="match_parent"
            android:layout_above="@+id/iv_center_"
            android:layout_centerHorizontal="true"
            android:scaleType="fitXY"/>

        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/iv_center_"
            android:layout_width="@dimen/x262"
            android:layout_height="@dimen/y150"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"/>

    </RelativeLayout>

</FrameLayout>

當點擊第一層的iv_click的時候，覆蓋其上方的圖片執行幀動畫。

幀動畫實現方式：

1 將想要顯示的一系列圖片放在一個drawable文件夾下的一個xml文件中，以下：

<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@android:color/transparent"
        android:duration="50"/>

    <item
        android:drawable="@mipmap/click_0"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/click_1"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/click_2"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/click_3"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/click_4"
        android:duration="50"/>
    <item
        android:drawable="@mipmap/click_5"
        android:duration="50"/>

    <item
        android:drawable="@mipmap/click_6"
        android:duration="50"/>

    <item
        android:drawable="@android:color/transparent"
        android:duration="50"/>


</animation-list>

代碼中，設置iv_click的點擊事件，執行動畫便可，代碼樣板：

// 屬性

private AnimationDrawable animationDrawable = null;  

/**經過ImageView對象拿到背景顯示的AnimationDrawable**/  

animationDrawable = (AnimationDrawable) imageView.getBackground(); 

/**播放動畫**/  

// click方法中的執行代碼塊

if(!animationDrawable.isRunning()) {  

    animationDrawable.start();  

 }

可是有個問題：動畫執行一次以後再次start無效，研究源碼得知，在最後一個frame執行完成以後，並無初始化執行狀態，因此再次start的時候，須要調用stop，以下所示：

/**
 * 從新啓動動畫
 * 首先得中止幀動畫，而後才能從新執行幀動畫，不然沒有效果
 *
 * @param drawable
 */
private void restartAnimation(AnimationDrawable drawable) {
    if (drawable.isRunning() && drawable != null) {
        drawable.stop();
    }
    drawable.start();
}