Android动画系列(一)

3.0以前,android支持两种动画模式,补间动画(tween animation),帧动画(frame animation),在android3.0中又引入了一个新的动画系统:属性动画(property animation)。 这三种动画模式在SDK中被称为view animation,drawable animation,property animation。

Tween animation(补间动画)

一、 分类

  • 透明度补间动画(alpha)
  • 缩放补间动画(scale)
  • 旋转补间动画(rotate)
  • 移动补间动画(translate)

二、詳述

在xml形式下的代码结构

xml代码结构.png

(一) scale标签

自有属性
  • android:fromXScale
    x轴方向上起始的值相对于自身的缩放比例,取值为浮点型,1.0表示没有变化,大约1.0表示放大,小于1.0表示缩小
  • android:toXScale
    x轴方向上结束的值相对于自身大小的缩放比例,取值浮点型
  • android:fromYScale
    起始的Y方向上相对自身的缩放比例,浮点值,1.0表示没有变化,大约1.0表示放大,小于1.0表示缩小
  • android:toYScale
    结尾的Y方向上相对自身的缩放比例,浮点值;
  • android:pivotX
    缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。即:按照View的父容器百分比计算
  • android:pivotY
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    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"

    >

</scale>

MainActivity中的代码

  • 这里是xml形式下的代码:

     //第一:补间动画的类Animation ,加载xml布局的工具类AnimationUtils
                Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
                animation.setFillAfter(false);
                //调用View里设置animation的方法
                tv.startAnimation(animation);


  • 动态代码的写法:
scaleAnim = new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);  
scaleAnim.setDuration(700);  
tv.startAnimation(scaleAnim); 
动态代码的构造函数.png

这里主要录制pivotX=50%p的情况下的gif图,主要看的是起点位置是在当前view的左上角,沿x轴跟y轴的方向上加上父布局宽度跟高度的50%

GIF.gif

改图是光放文档的截图:具体详情参考如下链接Tween Animation

scale标签.png

alpha——调节透明度

自有属性
alpha.png
  • android:fromAlpha 动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
  • android:toAlpha 动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
alpha.gif

alpha

<?xml version="1.0" encoding="utf-8"?>  
<alpha xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromAlpha="1.0"  
    android:toAlpha="0.1"  
    android:duration="3000"  
    android:fillBefore="true">  
</alpha>

MainActivity中

  • xml形式的代码
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
                animation.setFillAfter(false);
//                //调用View里设置animation的方法
                tv.startAnimation(animation);
  • 动态代码形式

                AlphaAnimation alphaAnim = new AlphaAnimation(1.0f,0.1f);
                alphaAnim.setDuration(2000);
                tv.startAnimation(alphaAnim);

rotate——旋转

自有属性
rotate.png
  • android:fromDegrees
    开始旋转的角度位置,正值代表顺时针方向度
    数,负值代码逆时针方向度数
  • android:toDegrees
    结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
  • android:pivotX
    缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
  • android:pivotY
    缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p

rotate

<?xml version="1.0" encoding="utf-8"?>  
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromDegrees="0"  
    android:toDegrees="720"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="2000"  
>  
      
</rotate> 
  • xml 形式下的代码
   Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
                animation.setFillAfter(true);
//                //调用View里设置animation的方法
                tv.startAnimation(animation);
  • 动态代码
RotateAnimation rotateAnim = new RotateAnimation(0, -650, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                rotateAnim.setDuration(2000);
                rotateAnim.setFillAfter(true);
                tv.startAnimation(animation);

translate——位移

自有属性
translate.png
  • android:fromXDelta
    起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
  • android:fromYDelta
    起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;
  • android:toXDelta
    结束点X轴坐标
  • android:toYDelta
    结束点Y轴坐标

rotate

<?xml version="1.0" encoding="utf-8"?>  
<translate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:fromXDelta="0"   
    android:toXDelta="80"  
    android:fromYDelta="0"  
    android:toYDelta="80"  
    android:duration="2000"  
>  
</translate>  

MainActivity 代码

  • xml下的形式代碼
   Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
                animation.setFillAfter(true);
//                //调用View里设置animation的方法
                tv.startAnimation(animation);
  • 动态代码
TranslateAnimation translateAnim = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 80,   
        Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 80);  
translateAnim.setDuration(2000);  
translateAnim.setFillBefore(true);

set集合

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <!-- 按照需求分时间段 -->


    <!-- 第一段: 位移(右下) 1000ms -->
    <translate
        android:duration="1000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="120%"
        android:toYDelta="100%" />

    <!-- 第二段:缩放(放大) +旋转(顺时针1周) 1500ms -->
    <!-- 通过startOffSet分割时间段:延时多少时间以后进行动画的播放 -->
    <scale
        android:duration="1500"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="170%"
        android:pivotY="150%"
        android:startOffset="1000"
        android:toXScale="1.5"
        android:toYScale="1.5" />
    <!-- 中心是原来的中心点,在原来的位置上加上位移的位置 -->
    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="170%"
        android:pivotY="150%"
        android:startOffset="1000"
        android:toDegrees="360" />

    <!-- 第三段:位移(向下) 1000ms -->
    <translate
        android:duration="1000"
        android:fromYDelta="0%"
        android:startOffset="2500"
        android:toYDelta="400%" />
    <!-- 第四段:缩放(缩小)+透明度(降低) 2000ms -->
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:startOffset="3500"
        android:toAlpha="0.0" />
    
    <!-- 注意中心点的位置 -->
    <scale
        android:duration="2000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="170%"
        android:pivotY="550%"
        android:startOffset="3500"
        android:toXScale="0.2"
        android:toYScale="0.2" />

</set>

MainActivity中的代码

  • xml 形式
   Animation animations2 = AnimationUtils.loadAnimation(this, R.anim.myset);
                animations2.setFillAfter(true);
//                //调用View里设置animation的方法
                tv.startAnimation(animations2);
  • 动态代码
             AlphaAnimation alphaAnim1 = new AlphaAnimation(1.0f,0.1f);
                alphaAnim1.setStartOffset(1000);
                ScaleAnimation scaleAnim1 = new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
                RotateAnimation rotateAnim4 = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

                AnimationSet setAnim=new AnimationSet(true);
                setAnim.addAnimation(alphaAnim1);
                setAnim.addAnimation(scaleAnim1);
                setAnim.addAnimation(rotateAnim4);

                setAnim.setDuration(3000);
                setAnim.setFillAfter(true);
                tv.startAnimation(setAnim);;  

从Animation类继承的属性

  • android:duration
    动画持续时间,以毫秒为单位
  • android:fillAfter
    如果设置为true,控件动画结束时,将保持动画最后时的状态
  • android:fillBefore
    如果设置为true,控件动画结束时,还原到开始动画前的状态
    * android:fillEnabled
    与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
  • android:repeatCount
    重复次数
  • android:repeatMode
    重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。
    android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面会单独列出一单讲解。
Paste_Image.png
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,302评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,563评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,433评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,628评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,467评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,354评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,777评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,419评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,725评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,768评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,543评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,387评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,794评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,032评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,305评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,741评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,946评论 2 336

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,143评论 25 707
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,666评论 0 10
  • Animation Animation类是所有动画(scale、alpha、translate、rotate)的基...
    四月一号阅读 1,896评论 0 10
  • 今天是坚持了早起打卡的第二姑父天,5:30起床,看见打卡里面好多人都已经起床了,打卡时间都是5:00左右,感叹,她...
    烨苏v璃铭阅读 187评论 0 0
  • 这半个月的雨下的,大地已经是块吸饱水的海绵了,我倒是还挺喜欢下雨,毕竟比起天晴,下雨天倒是难得的 都是手机拍的,打...
    琪实阅读 422评论 0 0