Android 动画之View动画

简介

Android动画主要有三种类型:View动画、帧动画和属性动画。其中,帧动画也是View动画的一种,它通过顺序播放一系列图像而产生动画效果,只不过它和一般的平移、旋转等View动画在表现形式上略有不同。而属性动画是API11的新特性,在Android 3.0以下版本的手机中无法使用。下面主要介绍View动画。
View动画是一种作用于View对象的动画,它支持4种动画效果,分别为平移(translate)、旋转(rotate)、缩放(scale)和透明度(alpha)。这四种动画分别对应于Android中的TranslateAnimation、RotateAnimation、ScaleAnimation和AlphaAnimation这四个类。这几种动画均可以通过XML格式定义或通过Java代码动态创建。

实现原理

每次绘制视图时,View所在的ViewGroup中的drawChild函数会获取该view的Animation的Transformation值,然后调用canvas.concat(transformToApply.getMatrix())函数,通过内部的矩阵运算完成动画帧。如果动画没有完成,就继续调用invalidate()函数,启动下次绘制来驱动动画,从而完成整个动画的绘制。由此可见,View动画其实是一个矩阵运算的过程。

优缺点

优势:使用简单,兼容性好

缺陷:

  1. 不具备交互性,View动画作用的实际上是View的影像,而非真正改变了View的属性状态。也就是说,View动画结束后,即便使用setFillAfter(true)使得view保持在动画结束时的位置,view的真实位置依旧未发生变化,仍然处于最开始定义时的位置。因此,当view动画结束后,其响应位置仍然位于动画开始前的位置,这就使得其不具备交互性;
  2. View动画只能作用于View对象,且提供的动画种类有限;

View动画的使用

通过Java代码动态创建动画

步骤:
  1. 创建TranslateAnimation、RotateAnimation、ScaleAnimation或AlphaAnimation对象;
  2. 设置创建的动画对象的属性,如动画执行时间、延迟时间、起始位置、结束位置等;
  3. 通过View.startAnimation()方法开启动画;
    注:可以通过Animation.setAnimationListener()设置动画的监听器,监听动画的开始、结束和重复状态,并在必要的时候添加自己的操作;
示例:
  • 平移动画:
TranslateAnimation translate = new TranslateAnimation(0, 120, 0, 100);
translate.setFillAfter(true);
translate.setDuration(1000);
image.startAnimation(translate);
  • 旋转动画:

final RotateAnimation rotate1 = new RotateAnimation(0, 360); // 围绕自己的左上角向右旋转360度
final RotateAnimation rotate2 = new RotateAnimation(0, 90, Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f); // X轴坐标向右偏移0.5倍父控件宽度,Y轴坐标向下偏移0.5倍自身宽度,然后围绕该点向右旋转90度
rotate1.setDuration(1000); //设置动画时长
// 设置动画事件监听器
rotate1.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Toast.makeText(mContext, "Start rotate", Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationEnd(Animation animation) {
Toast.makeText(mContext, "End rotate", Toast.LENGTH_SHORT).show();
rotate2.setDuration(1000);
image.startAnimation(rotate2);
}
@Override
public void onAnimationRepeat(Animation animation) {
Toast.makeText(mContext, "Repeat rotate", Toast.LENGTH_SHORT).show();
}});
image.startAnimation(mAnimation); // 开始动画

+ 缩放动画:
```Java
ScaleAnimation scale = new ScaleAnimation(1, 1.5f, 1, 1.5f, Animation.RELATIVE_TO_PARENT, 0.5f, 
Animation.RELATIVE_TO_SELF, 0.5f);
scale.setFillAfter(true);
scale.setDuration(1000);
image.startAnimation(scale);
  • 透明度动画:

AlphaAnimation alpha = new AlphaAnimation(1, 0);
alpha.setDuration(1000);
alpha.setRepeatMode(Animation.REVERSE); //设置重复模式
alpha.setRepeatCount(5); //设置重复次数
image.startAnimation(alpha);

+ 动画集:
```Java
AnimationSet as = new AnimationSet(true);   // 动画集共享插值器
as.setDuration(3000);AlphaAnimation aa = new AlphaAnimation(0. 1);
aa.setDuration(1000);
as.addAnimation(aa);
TranslateAnimation ta = new TranslateAnimation(0, 100, 0, 100);
ta.setDuration(1000);
as.addAnimation(ta);
image.startAnimation(as);
属性解析:
  • 动画的原点默认为控件自身的左上角,向右为X轴正向,向下为Y轴正向
动画坐标系
  • 动画常见共有属性:
  • setInterpolator(Interpolator i):设置动画插值器(后面解释),即设置动画的加速模式,默认为线性插值器(匀速变化),还可以设置为AccelerateDecelerateInterpolator、AccelerateInterpolator等,或者自定义
  • setFillAfter(boolean fillAfter): 动画结束后是否保持在结束状态,true表示保持在结束时的状态,false表示返回开始前的状态
  • setFillBefore(boolean fillBefore):true表示动画结束时,画面停留在第一帧
  • setDuration(long durationMillis):动画持续时长,单位:毫秒
  • setRepeatCount(int repeatCount):动画重复次数,-1表示无限循环
  • setRepeatMode(int repeatMode):动画重复模式,为RESTART或REVERSE
  • setStartTime(long startTimeMillis):动画开始时间,以毫秒表示
  • setStartOffset(long startOffset):动画延迟时长,即延迟startOffset毫秒开始动画,当startOffset>0时,动画开始时间为startTimeMillis+startOffset
  • setZAdjustment(int zAdjustment):动画过程中Z轴方向的模式,默认为normal
  • 平移动画属性:
public TranslateAnimation(Context context, AttributeSet attrs);
public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, 
float toYDelta);
public TranslateAnimation(int fromXType, float fromXValue, int toXType, 
float toXValue, int fromYType, float fromYValue, int toYType, float toYValue);

如上为TranslateAnimation的三个构造方法,最终均为了设置第三个构造方法中的几个参数所对应的TranslateAnimation属性值,所以下面分别介绍这些属性的含义。

  • fromXTypefromXValue:这俩属性分别表示平移起点X轴方向的偏移类型和偏移量,fromXType有三种取值可选,分别为Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF 和 Animation.RELATIVE_TO_PARENT
    fromXType取值为Animation.ABSOLUTE时,表示X轴方向的平移起点绝对平移fromXValue个像素点,此时fromXValue为一个绝对像素值;
    fromXType取值为Animation.RELATIVE_TO_SELF时,表示X轴方向的平移起点相对自身平移fromXValue **** 控件宽度个像素点,此时fromXValue为一个百分比值,表示偏移量相对控件自身宽度的百分比;
    fromXType取值为Animation.RELATIVE_TO_PARENT 时,表示X轴方向的平移起点相对父控件平移
    fromXValue **** 父控件宽度个像素点,此时fromXValue为一个百分比值,表示偏移量相对父控件宽度的百分比;

  • fromYTypefromYValue:分别表示平移起点Y轴方向的偏移类型和偏移量,具体含义同fromXType 和 fromXValue;

  • toXType 和 toXValue、toYType 和 toYValue:则表示终点位置的偏移量,具体含义同起点偏移量;

  • 旋转动画属性:

public RotateAnimation(Context context, AttributeSet attrs)
public RotateAnimation(float fromDegrees, float toDegrees)
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, 
int pivotYType, float pivotYValue)

如上为RotateAnimation的四个构造方法,其目的均为了设置fromDegrees、toDegrees、pivotXType、pivotXValue、pivotYType、pivotYValue这几个属性值,下面对这几个属性分别进行介绍。

  • fromDegreestoDegrees:这两个属性分别表示旋转起始角度和终止角度;

  • pivotXType、pivotXValue、pivotYType、pivotYValue:这四个属性用于设置旋转中心点位置。
    pivotXType 和 pivotXValue分别表示旋转中心在X轴方向相对原点(即控件左上角)的偏移类型和偏移量,pivotXType有三个可选取值:Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF 和 Animation.RELATIVE_TO_PARENT,分别表示绝对偏移、相对自身偏移和相对父控件偏移,当取Animation.ABSOLUTE时,pivotXValue是一个绝对数值,否则pivotXValue是一个相对数值(取值为1表示100%)。
    pivotYType 和 pivotYValue:分别表示旋转中心在Y轴方向相对原点的偏移类型和偏移量,具体含义同pivotXType 和 pivotXValue。

    示例使用如下:

final RotateAnimation rotate2 = new RotateAnimation(0, 90, Animation.RELATIVE_TO_PARENT, 0.5f,      
Animation.RELATIVE_TO_SELF, 0.5f); 
// X轴坐标向右偏移0.5倍父控件宽度,Y轴坐标向下偏移0.5倍自身宽度,然后围绕该点向右旋转90度
  • 缩放动画属性:
public ScaleAnimation(Context context, AttributeSet attrs)
public ScaleAnimation(float fromX, float toX, float fromY, float toY)
public ScaleAnimation(float fromX, float toX, float fromY, float toY, 
float pivotX, float pivotY)
public ScaleAnimation(float fromX, float toX, float fromY, float toY,
int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)  

如上为ScaleAnimation的四个构造函数,最终均为了设置ScaleAnimation的如下几个属性:
fromX、toX、fromY、 toY、pivotXType、pivotXValue、pivotYType 和 pivotYValue。

  • fromXtoX:这两个属性分别表示水平方向上相对自身的起始缩放因子和终止缩放因子,1表示100%,即原始大小,因此水平方向缩放的总长度为(toX-fromX) * width

  • fromYtoY:这两个属性分别表示垂直方向上相对自身的起始缩放因子和终止缩放因子

  • pivotXType、pivotXValue、pivotYType 和 pivotYValue:这四个属性用于控制缩放中心坐标点位置。具体含义参见旋转动画属性说明部分。

    示例使用如下:

ScaleAnimation scale = new ScaleAnimation(1, 1.5f, 1, 1.5f, Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
// 表示以X坐标向右偏移0.5倍父控件宽度,Y坐标向下偏移0.5倍自身高度的点为缩放中心点
// 将控件的水平和垂直方向分别从当前宽高放大0.5倍
```

  • 透明度动画属性:
public AlphaAnimation(Context context, AttributeSet attrs)
public AlphaAnimation(float fromAlpha, float toAlpha)

如上为AlphaAnimation的两个构造方法,主要看第二个构造方法中的两个属性fromAlpha 和 toAlpha,这两个属性分别表示动画开始时的透明度和结束时的透明度,0.0表示完全透明,即不可见,1.0表示完全不透明。

示例使用如下:

AlphaAnimation alpha = new AlphaAnimation(1, 0);
// 表示将控件从不透明状态调整到完全透明状态
  • 动画集(AnimationSet)属性:
    动画集用于将一组一起播放的动画组合为一个动画。动画集从父类Animation中继承的一些属性的作用方式需要认真加以理解,因为不同属性的表现方式各异,有些属性只作用于动画集自身,有些属性会作用于动画集中的子动画,而有些属性又会被忽略。
    • duration, repeatMode, fillBefore, fillAfter: 当为AnimationSet设置了这几个属性的时候,这几个属性将会作用于该动画集中的所有子动画中
    • repeatCount, fillEnabled: 这两个属性在AnimationSet中不起作用,将会被忽略;
    • startOffset, shareInterpolator: 这两个属性将作用于AnimationSet自身

插值器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,580评论 0 9
  • Animation Animation类是所有动画(scale、alpha、translate、rotate)的基...
    四月一号阅读 1,868评论 0 10
  • 首先附上谷歌官方文档链接地址 一、帧动画(Frame animation) 先来看看谷歌的官方定义:An anim...
    Geeks_Liu阅读 1,927评论 1 3
  • 作业一:五个《琉璃瓦》中的比喻 1..霜浓月薄的银蓝的夜里,惟有一两家店铺点着强烈的电灯,晶亮 的玻璃窗里品字式堆...
    那冬阅读 240评论 2 0
  • 1、关闭客户端和服务端的UAC 系统 =》安全和维护 =》更改用户账户控制设置 =》从不通知 2、重启服务端和客户...
    南波阅读 3,527评论 0 0