YY项目之帧动画（一）

2019独角兽企业重金招聘Python工程师标准>>>

由于项目中需要实现一个小游戏，根据音乐节奏打击节奏点，打击时需要有一个效果动画。

实现：利用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();
}

转载于:https://my.oschina.net/zhangdengjiexuyu/blog/637425