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();
}