Android动画全面剖析-Frame动画_安卓手机 frame分析-CSDN博客

本文链接：https://blog.csdn.net/qq_29078329/article/details/75670046

从本节起，我将对Android动画做一个全面的总结，包括Frame动画、Tween动画、Property动画的基本用法和高级用法、各种动画的使用场景、Activity切换动画、ViewPager切换动画、LayoutAnimation等，每种动画都有相应的代码实现。下面，我们开始第一节，Frame动画。

老规矩，先上图，看看Frame动画的实现效果。

一、基本用法

Frame动画通过组合多张图片，每张图片设置播放时长，多张图连续播放，从而形成动画效果。系统给我们提供了”animation-list” 节点用于配置帧动画，存放在res/anim下。使用帧动画，只需两步即可完成。

第一步，在animation-list节点中配置item项

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/on_the_way_01"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/on_the_way_02"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/on_the_way_03"
        android:duration="100"></item>
</animation-list>

每个item都是一帧，drawable属性指定了该帧要播放的图片，duration指定了该帧的播放时长，以毫秒为单位。oneshot代表是否只播放一次，false代表循环播放，true代表只播放一次。

第二步，将xml文件设置为ImageView的背景，然后获取背景转换为AnimationDrawable对象进行播放动画

imageView.setImageResource(R.drawable.frame_on_the_way);
AnimationDrawable onTheWay = (AnimationDrawable) imageView.getDrawable();
onTheWay.start();

二、实例场景，京东送货动画、网络加载动画、支付成功动画

京东送货Frame动画xml：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/on_the_way_01"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/on_the_way_02"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/on_the_way_03"
        android:duration="100"></item>
</animation-list>

网络加载动画xml：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/page_loading_01"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_02"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_03"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_04"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_05"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_06"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_07"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_08"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_09"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_10"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_11"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_12"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_13"
        android:duration="100"></item>
    <item
        android:drawable="@drawable/page_loading_14"
        android:duration="100"></item>
</animation-list>

支付成功动画xml：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/alipay_msp_success1"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success2"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success3"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success4"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success5"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success6"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success7"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success8"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success9"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success10"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success11"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success12"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success13"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success14"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success15"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success16"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success17"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success18"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success19"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success20"
        android:duration="100" />
    <item
        android:drawable="@drawable/alipay_msp_success21"
        android:duration="100" />
</animation-list>

Java代码：

package com.example.liuliu.xi.cityofanimation.activity;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

import com.example.liuliu.xi.cityofanimation.R;

public class FrameAnimationActivity extends AppCompatActivity {
    private ImageView mFrame1;
    private ImageView mFrame2;
    private ImageView mFrame3;
    private ImageView mFrame4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame_animation);
        mFrame1 = (ImageView) findViewById(R.id.activity_frame_frame1);
        mFrame2 = (ImageView) findViewById(R.id.activity_frame_frame2);
        mFrame3 = (ImageView) findViewById(R.id.activity_frame_frame3);
        mFrame4 = (ImageView) findViewById(R.id.activity_frame_frame4);
        startFrameAnimate();
    }

    private void startFrameAnimate() {
        mFrame1.setImageResource(R.drawable.frame_on_the_way);
        AnimationDrawable onTheWay = (AnimationDrawable) mFrame1.getDrawable();
        onTheWay.start();
        mFrame2.setImageResource(R.drawable.frame_page_loading);
        AnimationDrawable pageLoading = (AnimationDrawable) mFrame2.getDrawable();
        pageLoading.start();
        mFrame3.setImageResource(R.drawable.frame_alipay_success);
        AnimationDrawable alipaySuccess = (AnimationDrawable) mFrame3.getDrawable();
        alipaySuccess.start();
        mFrame4.setImageResource(R.drawable.frame_loading);
        AnimationDrawable loading = (AnimationDrawable) mFrame4.getDrawable();
        loading.start();
    }

    @Override
    public void finish() {
        super.finish();
        //activity退出时，过渡动画
        overridePendingTransition(0, R.anim.zoomout);
    }
}

三、AnimationDrawable 常用API

void start() - 开始播放动画

void stop() - 停止播放动画

addFrame(Drawable frame, int duration) - 添加一帧，并设置该帧显示的持续时间

void setOneShot(boolean flag) - false为循环播放，true为仅播放一次

boolean isRunning() - 是否正在播放

四、Frame动画分析

逐帧动画使用简单，实际开发中使用的频率还是比较高的。但是由于逐帧动画要加载大量的图片，必然占用不小的内存，当加载的图片较多、图片像素数较多时，容易卡顿、严重的话可造成oom，因此逐帧动画只能实现比较小的动画效果，如果复杂而且帧数比较多的动画不建议使用逐帧动画。

源码地址：https://github.com/xiyy/CityOfAnimation

下一节，将讲述Tween动画，有兴趣的朋友，欢迎关注！