阅读 404

Android Animation:这一次让你彻底了解 Android Frame Animation

1. 什么是 FrameAnimation?

通过一定顺序展示一系列的图像而形成的动画叫帧动画。

Creates an animation by showing a sequence of images in order with an AnimationDrawable

其实我们平时看的电影、电视剧都是由一帧一帧的画面组成的:

所以从某种意义上说,电影和电视剧也是帧动画,只不过电影、电视剧较长而且有声音。

2. FrameAnimation 的作用是什么?

从上面的定义可知,帧动画的主要作用是按照一定的顺序展示一系列图片。

3. 如何使用 FrameAnimation?

FrameAnimation 创建方式有两种:

  1. XML
  2. CODE

3.1 通过 XML 创建 FrameAnimation

3.1.1 语法
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>
复制代码
3.1.1.2. 属性详解
属性 含义 取值范围
xmlns:android 声明 XML 布局文件属性命名空间 schemas.android.com/apk/res/and…
android:oneshot 是否只播放一次 true 仅播放一次,false 一直循环播放(默认 false)
android:drawable FrameAnimation 中每一帧的图片 Drawable 资源
android:duration FrameAnimation 中每一帧图片持续时间 必须大于等于 0,否则程序将报错
3.1.1.3. 示例
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/people_001" android:duration="20" />
    <item android:drawable="@drawable/people_002" android:duration="20" />
    <item android:drawable="@drawable/people_003" android:duration="20" />
    <item android:drawable="@drawable/people_004" android:duration="20" />
    <item android:drawable="@drawable/people_005" android:duration="20" />
    <item android:drawable="@drawable/people_006" android:duration="20" />
    <item android:drawable="@drawable/people_007" android:duration="20" />
    <item android:drawable="@drawable/people_008" android:duration="20" />
    <item android:drawable="@drawable/people_009" android:duration="20" />
    <item android:drawable="@drawable/people_010" android:duration="20" />
    <item android:drawable="@drawable/people_011" android:duration="20" />
    <item android:drawable="@drawable/people_012" android:duration="20" />
    <item android:drawable="@drawable/people_013" android:duration="20" />
    <item android:drawable="@drawable/people_014" android:duration="20" />
    <item android:drawable="@drawable/people_015" android:duration="20" />
    <item android:drawable="@drawable/people_016" android:duration="20" />
    <item android:drawable="@drawable/people_018" android:duration="20" />
    <item android:drawable="@drawable/people_019" android:duration="20" />
    <item android:drawable="@drawable/people_020" android:duration="20" />
    <item android:drawable="@drawable/people_021" android:duration="20" />
    <item android:drawable="@drawable/people_022" android:duration="20" />
    <item android:drawable="@drawable/people_023" android:duration="20" />
    <item android:drawable="@drawable/people_024" android:duration="20" />
    <item android:drawable="@drawable/people_025" android:duration="20" />
    <item android:drawable="@drawable/people_026" android:duration="20" />
    <item android:drawable="@drawable/people_027" android:duration="20" />
    <item android:drawable="@drawable/people_028" android:duration="20" />
    <item android:drawable="@drawable/people_029" android:duration="20" />
    <item android:drawable="@drawable/people_030" android:duration="20" />
</animation-list>
复制代码

最终效果如下:

3.2 通过 CODE 创建 FrameAnimation

3.2.1 语法
AnimationDrawable drawable = new AnimationDrawable();
drawable.setOneShot(boolean oneShot);
drawable.addFrame(Drawable frame, int duration);
...
ImageView.setBackground(drawable);
drawable.start();
drawable.stop();
复制代码
3.2.2 示例
AnimationDrawable mAnimationDrawable = new AnimationDrawable();
mAnimationDrawable.setOneShot(false);
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_001),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_002),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_003),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_004),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_005),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_006),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_007),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_008),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_009),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_010),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_011),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_012),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_013),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_014),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_015),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_016),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_017),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_018),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_019),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_020),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_021),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_022),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_023),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_024),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_025),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_026),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_027),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_028),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_029),getResources().getInteger(R.integer.integer_twenty));
mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.people_030),getResources().getInteger(R.integer.integer_twenty));
mTarget.setBackground(mAnimationDrawable);
mAnimationDrawable.start();
复制代码

最终效果如下:

4. 应用实例

早些时候,很多软件的等待对话框都是通过 FrameAnimation + Dialog 实现的,最经典的例子当属大众点评,不过昨晚再去看的时候,发现大众点评早已“面目全非”,那我们自己动手写一个吧。

//1. 自定义 Dialog

//1.1 Dialog 布局文件
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_dialog_target"
    android:layout_width="@dimen/avatar_background_size_xx"
    android:layout_height="@dimen/avatar_background_size_xx"
    android:background="@drawable/people_walk" />
    
//1.2 Dialog 类
public class CustomDialog extends Dialog {


    public CustomDialog(Context context) {
        super(context, R.style.CustomDialog);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog_custom);
    }

}

//2. 应用自定义 Dialog

//2.1 Activity 布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tween_animation_root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:background="@color/white">

    <Button
        android:id="@+id/frame_animation_target"
        android:layout_width="@dimen/avatar_background_size_xx"
        android:layout_height="@dimen/avatar_background_size_xx"
        android:layout_centerInParent="true"
        android:background="@drawable/selector_button_common"
        android:text="@string/dialog"
        android:textSize="@dimen/medium_font" />

</RelativeLayout>

//2.2 Activity 类
public class FrameAnimationApplicationActivity extends AppCompatActivity implements View.OnClickListener, Dialog.OnShowListener, Dialog.OnDismissListener {

    private Button mTarget;
    private Dialog mDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame_animation_application);
        initView();
        initData();
    }

    private void initView(){
        mTarget = findViewById(R.id.frame_animation_target);
        mTarget.setOnClickListener(this);
    }

    private void initData(){

    }

    @Override
    public void onClick(View v) {
        showDialog();
    }

    private void showDialog(){
        mDialog = new CustomDialog(this);
        mDialog.setOnShowListener(this);
        mDialog.setOnDismissListener(this);
        mDialog.show();

    }

    @Override
    public void onDismiss(DialogInterface dialog) {
        ImageView target = mDialog.findViewById(R.id.custom_dialog_target);
        AnimationDrawable animationDrawable = (AnimationDrawable)target.getBackground();
        animationDrawable.stop();
        mTarget.setVisibility(View.VISIBLE);
    }

    @Override
    public void onShow(DialogInterface dialog) {
        ImageView target = mDialog.findViewById(R.id.custom_dialog_target);
        AnimationDrawable animationDrawable = (AnimationDrawable)target.getBackground();
        animationDrawable.start();
        mTarget.setVisibility(View.GONE);
    }
    
}
复制代码

最终效果如下:

我在这里只是抛砖引玉,FrameAnimation 的更多有意思的用法还要靠小伙伴发挥自己的想象力去想。

5. 参考文献

  1. Animation resources
  2. AnimationDrawable
关注下面的标签,发现更多相似文章
评论