Android开发总结之动画(帧动画+补间动画)
一、概述
动画的概念
动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画、漫画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。
动画的英文有很多表述,如animation、cartoon、animated cartoon、cameracature。其中较正式的 “Animation” 一词源自于拉丁文字根anima,意思为“灵魂”,动词animate是“赋予生命”的意思,引申为使某物活起来的意思。所以动画可以定义为使用绘画的手法,创造生命运动的艺术。
动画技术较规范的定义是采用逐帧拍摄对象并连续播放而形成运动的影像技术。不论拍摄对象是什么,只要它的拍摄方式是采用的逐格方式,观看时连续播放形成了活动影像,它就是动画。Android系统中的动画
在Android系统中,动画可分为三类,分别为帧动画(Frame Animation),补间动画(Tweened Animation),属性动画。本章主要讲述帧动画和补间动画。
二、动画的实现
- 帧动画
帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。其表现出来的样式类似于我们常见到的GIF图。而帧动画所呈现的结果也依赖于每一“帧”,大家先看效果图:
这个奔跑的京东小人以及跳跃的鱼,其实是一张张不同的图片很快的切换而形成的动画效果。看我的资源文件:
这么多图片资源的切换,内存开销~~~
1.1 我们来看看帧动画的实现,首先上代码:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"><item
android:drawable="@mipmap/a_0"android:duration="100" /><item
android:drawable="@mipmap/a_1"android:duration="100" /><item
android:drawable="@mipmap/a_2"android:duration="100" />
</animation-list>
这是在res/drawable
目录下建立一个的animation-list
标签的动画文件,每个item里面有一张图,多张图组合起来就是我们的动画了。而android:duration
则是表示每张图呈现的时间长短。还有一个android:oneshot
属性,代表是否只展示一遍,true的话该动画只会执行一遍,false则会循环播放动画。
1.2 Activity里面的代码:
public class FrameActivity extends AppCompatActivity {private SimpleDraweeView mImgvOne;private ImageView mImgvTwo;private AnimationDrawable animationDrawableOne;private AnimationDrawable animationDrawableTwo;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_frame);mImgvOne = (SimpleDraweeView) findViewById(R.id.imgv_one);mImgvTwo = (ImageView) findViewById(R.id.imgv_two);setAnimation();}private void setAnimation() {//Fresco的动画 和ImageView用法一样mImgvOne.setImageResource(R.drawable.fram_one);animationDrawableOne = (AnimationDrawable) mImgvOne.getDrawable();animationDrawableOne.start();//ImageView的动画mImgvTwo.setImageResource(R.drawable.fram_two);animationDrawableTwo = (AnimationDrawable) mImgvTwo.getDrawable();animationDrawableTwo.start();}
}
java代码很简单,导入动画开始动画,三行代码就可。大家可以看到我的mImgvOne
是一个SimpleDraweeView
,因为现在很多人使用Fresco,我只是想证明在使用动画时SimpleDraweeView
的用法和ImageView
一样,大家不必担心用了Fresco就没法玩动画了。而且基于Fresco的强大基因,想要实现帧动画?人家Fresco是支持gif图的,直接往里面放一个gif图,比我们设置帧动画简单多了。
下面我们再看看AnimationDrawable
这个类,我们在执行帧动画时要依靠AnimationDrawable
的start
方法,先上源码分析一下:
public class AnimationDrawable extends DrawableContainer implements Runnable, Animatable {public AnimationDrawable() {throw new RuntimeException("Stub!");}public boolean setVisible(boolean visible, boolean restart) {throw new RuntimeException("Stub!");}public void start() {throw new RuntimeException("Stub!");}public void stop() {throw new RuntimeException("Stub!");}public boolean isRunning() {throw new RuntimeException("Stub!");}public void run() {throw new RuntimeException("Stub!");}public void unscheduleSelf(Runnable what) {throw new RuntimeException("Stub!");}public int getNumberOfFrames() {throw new RuntimeException("Stub!");}public Drawable getFrame(int index) {throw new RuntimeException("Stub!");}public int getDuration(int i) {throw new RuntimeException("Stub!");}public boolean isOneShot() {throw new RuntimeException("Stub!");}public void setOneShot(boolean oneShot) {throw new RuntimeException("Stub!");}public void addFrame(Drawable frame, int duration) {throw new RuntimeException("Stub!");}public void inflate(Resources r, XmlPullParser parser, AttributeSet attrs, Theme theme) throws XmlPullParserException, IOException {throw new RuntimeException("Stub!");}public Drawable mutate() {throw new RuntimeException("Stub!");}protected void setConstantState(DrawableContainerState state) {throw new RuntimeException("Stub!");}
}
可以看到AnimationDrawable
继承了DrawableContainer
,而DrawableContainer
其实就是Drawable
的一个子类,这也是我们animationDrawableTwo = (AnimationDrawable) mImgvTwo.getDrawable();
把Drawable
强转成AnimationDrawable
的原因了。所以AnimationDrawable
也是个Drawable
罢了。再看它所实现的接口Runnable, Animatable
,表明它是一个可执行命令,并且自己支持动画。源码不难,下面简略介绍一下它的相关方法:
方法 | 作用 |
---|---|
boolean setVisible(boolean visible, boolean restart) | visible表示AnimationDrawable是否可见,false则暂停当前动画运行。restart的值true表示当AnimationDrawable设为Visible时,从第一帧开始播放动画,false表示当AnimationDrawable设为Visible时,从最近的帧开始执行动画。 |
void start() | 顾名思义,开始动画执行。 |
void stop() | 与上面方法相反,停止动画执行。 |
boolean isRunning() | 当前动画是否在执行。 |
void unscheduleSelf(Runnable what) | 取消当前动画上计划执行的一个Runnable,一般这个Runnable都是用于绘制下一帧的。 |
int getNumberOfFrames() | 获取帧数(图片数) |
Drawable getFrame(int index) | 获取指定帧 |
int getDuration(int i) | 获取指定帧的展示时长 |
boolean isOneShot() | 是否循环,true则不循环,false则循环 |
void setOneShot(boolean oneShot) | 设置是否循环,true or false |
void addFrame(Drawable frame, int duration) | 增加一帧图片 |
源码解析完了,我们也看到了AnimationDrawable
的一些方法。下面我们再看看不通过xml文件,直接在代码中执行帧动画的方法。先上代码:
animationDrawableOne = new AnimationDrawable();animationDrawableOne.addFrame(getResources().getDrawable(R.mipmap.a_0),100);animationDrawableOne.addFrame(getResources().getDrawable(R.mipmap.a_1),100);animationDrawableOne.addFrame(getResources().getDrawable(R.mipmap.a_2),100);animationDrawableOne.setOneShot(false);mImgvOne.setBackground(animationDrawableOne);animationDrawableOne.start();
同样,使用代码依旧可以做出帧动画的效果,所以大家是使用xml
还是代码创建动画,看大家喜好咯。
2. 补间动画(Tween)
补间动画指的是做flash动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。也就是说在使用补间动画时,我们开发者指定了动画开始、结束的关键帧,中间的变化是计算机自动帮助我们补齐的。
补间动画有四种基本形式,分别是Alpha(透明度),Translate(位移),Scale(缩放),Rotate(旋转)。当然还可以是多种动画效果的组合,例如alpha+translate、alpha+rotate,甚至四种形式组合在一起的动画。同样,和帧动画一样,补间动画的可以以xml的方式实现,也可以以代码的方式实现。
2.1 补间动画的使用
属性解释:
JAVA方法 | xml属性 | 解释 |
---|---|---|
setDetachWallpaper(boolean) | android:detachWallpaper | 是否在壁纸上运行 |
setDuration(long) | android:duration | 设置动画持续时间,单位为毫秒 |
setFillAfter(boolean) | android:fillAfter | 控件动画结束时控件是否保持动画最后状态 |
setFillBefore(boolean) | android:fillBefore | 控件动画结束时控件是否还原到开始动画前的状态 |
setFillEnable(boolean) | android:fillEnable(boolean) | 与android:fillBefore效果相同 |
setInterpolator(boolean) | android:interpolator | 设置插值器,有一些动画效果,如从快到慢,从慢到快,也可以自定义) |
setRepeatCount(int) | android:repeatCount | 重复次数 |
setRepeatMode(int) | android:repeatMode | 重复类型:reverse倒序回放、restart从头播放 |
setStartOffset(long) | android:startOffset | 调用start函数后等待开行运行的时间,单位为毫秒 |
setZadjustment(int) | android:zAdjustment | 表示被设置动画的内容运行时在Z轴的位置(top/bottom/normal),默认为normal |
Alpha | ||
AlphaAnimation(float fromAlpha, *float toAlpha) | android:fromAlpha | 起始透明度 |
AlphaAnimation(*float fromAlpha, float toAlpha) | android:toAlpha | 结束透明度 |
Rotate | ||
RotateAnimation(float fromDegrees, *float toDegrees, *float pivotX, *float pivotY) | android:fromDegress | 旋转开始角度,正代表顺时针度数,负代表逆时针度数 |
RotateAnimation(*float fromDegrees, float toDegrees, *float pivotX, *float pivotY) | android:toDegress | 旋转结束角度(同上) |
RotateAnimation(*float fromDegrees, *float toDegrees, float pivotX, *float pivotY) | android:pivotX | 缩放起点X坐标(数值、百分数、百分数p,譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点) |
RotateAnimation(*float fromDegrees, *float toDegrees, *float pivotX, float pivotY) | android:pivotY | 缩放起点Y坐标(同上) |
Scale | ||
ScaleAnimation(float fromX,* float toX, *float fromY, *float toY, *float pivotX, *float pivotY) | android:fromXScale | 初始X轴缩放比例,1.0表示无变化 |
ScaleAnimation(*float fromX, float toX, *float fromY, *float toY, *float pivotX, *float pivotY) | android:toXScale | 结束X轴缩放比例 |
ScaleAnimation(*float fromX, *float toX, float fromY, *float toY, *float pivotX, *float pivotY) | androd:fromYScale | 初始Y轴缩放比例 |
ScaleAnimation(f*loat fromX, *float toX, *float fromY, float toY, *float pivotX, *float pivotY) | android:toYScale | 结束Y轴缩放比例 |
ScaleAnimation(*float fromX, *float toX, *float fromY, *float toY, float pivotX, *float pivotY) | android:pivotX | 缩放起点X轴坐标(同上) |
ScaleAnimation(*float fromX, *float toX, *float fromY, *float toY, *float pivotX, float pivotY) | android:pivotY | 缩放起点Y轴坐标(同上) |
Translate | ||
TranslateAnimation(float fromXDelta, *float toXDelta, *float fromYDelta, *float toYDelta) | android:fromXDelta | 平移起始点X轴坐标 |
TranslateAnimation(*float fromXDelta, float toXDelta, *float fromYDelta, *float toYDelta) | android:toXDelta | 平移结束点X轴坐标 |
TranslateAnimation(*float fromXDelta, *float toXDelta, float fromYDelta, *float toYDelta) | android:fromYDelta | 平移起始点Y轴坐标 |
TranslateAnimation(*float fromXDelta, *float toXDelta, *float fromYDelta, float toYDelta) | android:toYDelta | 平移结束点Y轴坐标 |
注:*为忽略该属性,例如
JAVA方法 | xml属性 | 解释 |
---|---|---|
AlphaAnimation(float fromAlpha, *float toAlpha) | android:fromAlpha | 起始透明度 |
AlphaAnimation(*float fromAlpha, float toAlpha) | android:toAlpha | 结束透明度 |
第一行意为只解释float fromAlpha属性,第二行意为只解释float toAlpha属性。
实现Alpha效果,首先,在res目录下新建一个anim文件夹用来存储动画文件,然后新建一个Animation resource file的xml文件,我的代码里命名其为alpha_one,项目地址在文末,大家可以下载参考一下。上面已经总结了各种属性,所以我们直接看代码。先是xml文件:
<alpha xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1000"android:fromAlpha="1.0"android:toAlpha="0.0"android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
然后Activity中代码:
animation = AnimationUtils.loadAnimation(this, R.anim.alpha_one);mImgvTween.startAnimation(animation);
使用AnimationUtils装载动画配置文件。两行代码,即可实现如下效果:
不清楚anim文件夹建在哪里的同学请看我的目录结构:
我们再看看不通过xml文件,纯代码实现补间动画的方法。
AlphaAnimation anim = new AlphaAnimation(0.0f, 1.0f);anim.setDuration(3000);mImgvTween.startAnimation(anim);
如果要实现其它旋转、缩放、位移等效果,使用不同的Animation例如 RotateAnimation、 ScaleAnimation、TranslateAnimation,根据传入不同的参数实现我们想要的效果。当然也可以使用xml文件的方式,代码很简单,大家可以看我传到github上的代码。
动画组合:
我们可以使用动画组合把多个动画效果结合到一起展示。如果我们要实现一个缩放和透明度同时变化的效果,像这样:
和其它效果一样,我们仍然有xml文件和纯java代码实现的两种实现方法。如果使用xml方式的话,按照之前的步骤,在Animation resource file创建个节点为set
的xml文件即可。先上xml实现的代码:
<set xmlns:android="http://schemas.android.com/apk/res/android"><alpha
android:duration="2000"android:fromAlpha="0.0"android:interpolator="@android:anim/accelerate_decelerate_interpolator"android:toAlpha="1.0" /><scale
android:duration="2000"android:fromXScale="0.0"android:fromYScale="0.0"android:pivotX="50%p"android:pivotY="50%p"android:toXScale="1.0"android:toYScale="1.0" />
</set>
Activity中的代码:
animation = AnimationUtils.loadAnimation(this, R.anim.set_one);mImgvTween.startAnimation(animation);
从这里可以看出,我们若使用xml方式实现补间动画,无论要实现哪一种动画效果或是组合效果,其java代码是相同的,只是xml文件中的节点不同而已。
我们再看看纯代码的动画组合效果实现,上代码:
AnimationSet animationSet = new AnimationSet(this,null);AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);alphaAnimation.setDuration(2000);animationSet.addAnimation(alphaAnimation);ScaleAnimation scaleAnimation = new ScaleAnimation(0.0f,1.0f,0.0f,1.0f,Animation.RELATIVE_TO_PARENT,0.5f,Animation.RELATIVE_TO_PARENT,0.5f);scaleAnimation.setDuration(2000);animationSet.addAnimation(scaleAnimation);mImgvTween.startAnimation(animationSet);
这种方式最终效果和xml方式完全一样。所以到底用哪种方法,也是个人喜好咯。
三、总结
动画的可玩性还是很高的,我们可以用帧动画实现下拉刷新的刷新头动图效果(如京东,美团),也可以用补间动画实现Dialog进出场动画效果。通过不同的动画组合,我们可以大大提升我们app的美观程度。
github项目地址:https://github.com/tangxuesong6/animation
Android开发总结之动画(帧动画+补间动画)相关推荐
- Android动画学习记录一(Android动画种类、补间动画和帧动画)
Android动画学习记录一(动画种类.补间动画和帧动画) 动画种类.补间动画和帧动画 Android动画学习记录一(动画种类.补间动画和帧动画) 一.动画种类 二.View动画 2.1 补间动画 补 ...
- 形状补间动画和动作补间动画区别一览表
形状补间动画和动作补间动画区别一览表 项目 形状补间动画 动作补间动画 概念 在一个关键帧中绘制一个形状,然后在另外一个关键帧更改或绘制另一个形状,FLASH据二者间形状创建的动画 在一个关键帧中设置 ...
- Android动画学习之补间动画和逐帧动画,移动互联网app开发
| fromXScale | 指定动画开始时X轴上的缩放系数 | 值为1.0表示不再变化 | | fromYScale | 指定动画开始时Y轴上的缩放系数 | 值为1.0表示不再变化 | | toXS ...
- Android动画学习之补间动画
补间动画简介 补间动画指的是做FLASH动画时,在两个关键帧中间需要做"补间动画",才能实现图画的运动:插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的. 补间动画分 ...
- Android实现蝴蝶动画,蝴蝶飞舞- (补间动画+逐帧动画)
AnimationDrawable animationDrawable; //逐帧动画 //移动蝴蝶位置的定时器 Timer tmrTranslate; TimerTask timerTask; Im ...
- Android之帧动画与补间动画的使用
前言 在日常开发中,我们有时候需要一些好看的动画效果,这时可以充分利用Android提供的这几种动画来实现, Android提供了3种类型的动画: 补间动画:补间动画可以应用于View,让你可以定义一 ...
- Android逐帧动画和补间动画
本篇博客来看一下Android中的逐帧动画和补间动画. 一.逐帧动画 逐帧动画也叫Drawable Animation. 在Android中实现逐帧动画,就是由设计师给出一系列状态不断变化的图片, 开 ...
- Android动画攻略—帧动画、补间动画、属性动画
前言 动画时Android开发中使用频率比较高的功能. 对Android提供的补间动画,帧动画以及属性动画做出归纳总结. 目录 1. 帧动画 帧动画总体实现比较简单,其实现本身是实现一个图片集的连续播 ...
- Android动画之帧动画和补间动画
Android系统提供三种动画:帧动画.补间动画和属性动画.这里先分析总结帧动画和补间动画. FrameAnimation 帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建帧动画可以用 x ...
最新文章
- 使用Python,OpenCV和Scikit-Image检测低对比度图像
- Distinct Subsequences
- Python Elasticsearch 插入数据
- java调用c dll,指针参数和结构体参数搞定
- 对于一个字符串,请设计一个高效算法,找到第一次重复出现的字符
- jboss eap 7_使用JBoss EAP 7的HTTP / 2
- SSL 1461——最大连续数列的和
- R语言列表(list)与向量(numeric)的转换
- (转)Spring的bean管理(注解方式)
- python把10进制数字转16进制并设置字符串宽度右对齐,前面填充0
- 【深度学习】深度学习的四大组件
- 94. autoload(2)
- Ubuntu双网卡绑定
- 音视频基础概念与流程
- redis中内存碎片处理
- centos 7.6安装WeADMIN ITOSS步骤
- 【初赛】初赛提纲¿ 错题集
- ECS Windows服务器通过ie下载提示当前安全设置不允许下载该文件
- Android so加固的简单脱壳
- 二十年间的失败软件和系统