Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

一、概述

Android的animation由四种类型组成:alpha、scale、translate、rotate,对应android官方文档地址:《Animation Resources》

1、XML配置文件中

alpha渐变透明度动画效果

scale渐变尺寸伸缩动画效果

translate画面转换位置移动动画效果

rotate画面转移旋转动画效果

下面我们逐个讲讲每个标签的属性及用法。

2、动作文件存放位置

动作定义文件应该存放在res/anim文件夹下,访问时采用R.anim.XXX.xml的方式,位置如图:

二、scale标签——调节尺寸

1、自有属性

scale标签是缩放动画,可以实现动态调控件尺寸的效果,有下面几个属性:

android:fromXScale起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;

android:toXScale结尾的X方向上相对自身的缩放比例,浮点值;

android:fromYScale起始的Y方向上相对自身的缩放比例,浮点值,

android:toYScale结尾的Y方向上相对自身的缩放比例,浮点值;

android:pivotX缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。(具体意义,后面会举例演示)

android:pivotY缩放起点Y轴坐标,取值及意义跟android:pivotX一样。

下面看一个实例,当scale里的属性这样设置时,效果会怎样呢:

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50"

android:pivotY="50"

android:duration="700"/>

(1)、pivotX取值数值时(50)

这个控件,宽度和高度都是从0放大到1.4倍,起始点坐标在控件左上角(坐标原点),向x轴正方向和y轴正方向都加上50像素;

根据pivotX,pivotY的意义,控件的左上角即为控件的坐标原点,这里的起始点是在控件的原点的基础上向X轴和Y轴各加上50px,做为起始点,如下图中图二所示

图一                                                             图二

(2)、pivotX取值百分数时(50%)

下面再看看当pivotX、pivotY取百分数的时候,起始点又在哪里?

上面我们讲了,pivotX的值,当取50%时,表示在原点坐标的基础上加上的自己宽度的50%,看看效果:

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"

android:duration="700"/>

缩放位置大小仍然从0-1.4,只改变pivotX和pivotY;起始点位置如下图中图二所示:

图一                                                                 图二

(3)、pivotX取值50%p时

前面说过,当取值在百分数后面加上一个字母p,就表示,取值的基数是父控件,即在原点的基础上增加的值是父标签的百分值。

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%p"

android:pivotY="50%p"

android:duration="700"/>

效果图,及起始点坐标图如下所示:

2、从Animation类继承的属性

Animation类是所有动画(scale、alpha、translate、rotate)的基类,这里以scale标签为例,讲解一下,Animation类所具有的属性及意义。关于Animation类的官方文档位置为:《Animation》

android:duration动画持续时间,以毫秒为单位

android:fillAfter如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillBefore如果设置为true,控件动画结束时,还原到开始动画前的状态

android:fillEnabled与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态

android:repeatCount重复次数

android:repeatMode重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

android:interpolator设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面会单独列出一单讲解。

对于android:duration,就不再讲解了,就是动画的持续时长,以毫秒为单位,下面看看android:fillAfter和android:fillBefore

(1)android:fillAfter:保持动画结束的状态

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"

android:duration="700"

android:fillAfter="true"

/>

(2)android:fillBefore  还原初始化状态

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"

android:duration="700"

android:fillBefore="true"

/>

android:fillBefore="true"                                 android:fillEnable="true"

上面顺便列出了,当仅设定fillEanble为true时的效果,这两个的标签的效果完全相同。

(3)、android:repeatMode="restart /reverse"  设定回放类型

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"

android:duration="700"

android:fillBefore="true"

android:repeatCount="1"

android:repeatMode="restart"

/>

androidRepeatMode设为restart                       androidRepeatMode设为reverse

三、alpha标签——调节透明度

1、自身属性

android:fromAlpha动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明

android:toAlpha动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明

使用示例:

[html]view plaincopy

android:fromAlpha="1.0"

android:toAlpha="0.1"

android:duration="3000"

android:fillBefore="true">

2、从Animation类继承的属性

android:duration动画持续时间,以毫秒为单位

android:fillAfter如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillBefore如果设置为true,控件动画结束时,还原到开始动画前的状态

android:fillEnabled与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态

android:repeatCount重复次数

android:repeatMode重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

android:interpolator设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面会单独列出一单讲解。

与scale标签意义一样,就不再缀述。

四、rotate标签——旋转

1、自身属性

android:fromDegrees开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数

android:toDegrees结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数

android:pivotX缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲

android:pivotY缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

[html]view plaincopy

android:fromDegrees="0"

android:toDegrees="-650"

android:pivotX="50%"

android:pivotY="50%"

android:duration="3000"

android:fillAfter="true">

围绕自身从0度逆时针旋转650度                            围绕自身从0度顺时针旋转650度

android:fromDegrees="0"                                       android:fromDegrees="0"

android:toDegrees="-650"                                      android:toDegrees="650"

2、从Animation类继承的属性

android:duration动画持续时间,以毫秒为单位

android:fillAfter如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillBefore如果设置为true,控件动画结束时,还原到开始动画前的状态

android:fillEnabled与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态

android:repeatCount重复次数

android:repeatMode重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

android:interpolator设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面会单独列出一单讲解。

与scale标签意义一样,就不再缀述。

五、translate标签 —— 平移

1、自身属性

android:fromXDelta起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲

android:fromYDelta起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;

android:toXDelta结束点X轴坐标

android:toYDelta结束点Y轴坐标

[html]view plaincopy

android:fromXDelta="0"

android:toXDelta="-80"

android:fromYDelta="0"

android:toYDelta="-80"

android:duration="2000"

android:fillBefore="true">

2、从Animation类继承的属性

android:duration动画持续时间,以毫秒为单位

android:fillAfter如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillBefore如果设置为true,控件动画结束时,还原到开始动画前的状态

android:fillEnabled与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态

android:repeatCount重复次数

android:repeatMode重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

android:interpolator设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面会单独列出一单讲解。

与scale标签意义一样,就不再缀述。

六、set标签——定义动作合集

前面我们讲解了各个标签动画的意义及用法,但他们都是独立对控件起作用,假设我现在想上面的textView控件做一个动画——从小到大,旋转出场,而且透明度也要从0变成1,即下面的这个效果,该怎么办?

这就需要对指定的控件定义动作合集,Set标签就可以将几个不同的动作定义成一个组;

属性:

set标签自已是没有属性的,他的属性都是从Animation继承而来,但当它们用于Set标签时,就会对Set标签下的所有子控件都产生作用。

属性有:(从Animation类继承的属性)

android:duration动画持续时间,以毫秒为单位

android:fillAfter如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillBefore如果设置为true,控件动画结束时,还原到开始动画前的状态

android:fillEnabled与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态

android:repeatCount重复次数

android:repeatMode重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

android:interpolator设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面会单独列出一单讲解。

与scale标签意义一样,就不再缀述。

上面这个效果,所对应的XML代码为:

[html]view plaincopy

android:duration="3000"

android:fillAfter="true">

android:fromAlpha="0.0"

android:toAlpha="1.0"/>

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"/>

android:fromDegrees="0"

android:toDegrees="720"

android:pivotX="50%"

android:pivotY="50%"/>

七、实例——如何将动画XML文件应用于控件中

上面我仅仅是列出了每个标签及其属性的意义及应用之后的效果演示,但上面是如何将定义动画的xml应用到textView控件中的却迟迟没说,这一小节,就以scale动画为例,讲述如何将定义好的scle动作添加到指定控件中。

先看最终效果图:

1、新建工程、新建scale动画文件(scaleanim.xml)

新建一个工程,并且在res文件夹下,新建一个anim文件夹,然后再新建一个scaleanim.xml文件,结构如图所示:

scaleanim.xml的代码为:(从TextView中心点,从0放大到1.4倍,反复一次,最后还原到初始化状态)

[html]view plaincopy

android:fromXScale="0.0"

android:toXScale="1.4"

android:fromYScale="0.0"

android:toYScale="1.4"

android:pivotX="50%"

android:pivotY="50%"

android:duration="700"

android:fillBefore="true"

android:repeatCount="1"

android:repeatMode="restart"

/>

2、XML布局文件

[html]view plaincopy

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.harvic.animation_demo.MainActivity">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="10dip"

android:text="scale animation"/>

android:id="@+id/tv"

android:layout_width="100dip"

android:layout_height="200dip"

android:background="#ff00ff"

android:text="@string/hello_world"

android:layout_gravity="center_horizontal"/>

3、JAVA代码

[java]view plaincopy

publicclassMainActivityextendsActivity {

Button scaleBtn ;

Animation scaleAnimation;

TextView tv;

@Override

protectedvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);

scaleBtn = (Button)findViewById(R.id.btn_animation);

tv =(TextView)findViewById(R.id.tv);

scaleBtn.setOnClickListener(newView.OnClickListener() {

@Override

publicvoidonClick(View v) {

// TODO Auto-generated method stub

tv.startAnimation(scaleAnimation);

}

});

}

}

(1)通过scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);从XML文件中获取动画

(2)利用startAnimation将动画传递给指定控件显示。


http://blog.csdn.net/harvic880925/article/details/39996643

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,498评论 25 707
  • Animation Animation类是所有动画(scale、alpha、translate、rotate)的基...
    四月一号阅读 1,900评论 0 10
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,691评论 0 10
  • 思翼悄悄许,默默向苍穹。谒访唐诗岛,河汉宋词涌。 追星贤古圣,道德庄孟铭。佛偈甘露雨,觉发地青萌。
    真如自在阅读 224评论 4 6
  • 今天在朋友群里参与大家讨论,我们给孩子学英语的目的是什么?有的妈妈发言很棒,学习了。借此记录保留一下,希望自己能不...
    木木sani阅读 378评论 0 0