从本节起,我将对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动画,有兴趣的朋友,欢迎关注!