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

移动开发 2019-03-12 12:28:13 阅读次数: 0

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 布局文件属性命名空间 http://schemas.android.com/apk/res/android
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

猜你喜欢

转载自juejin.im/post/5c86e91ee51d453c887b6797
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022