彻底攻破Android Animation(二)

怀揣理想才能走的更远!
  • 东方来叨叨:
    • 你和行业顶尖人才的最大区别就是:"你从未在内心深处告诉自己:我一定要在这个行业出类拔萃,在这个行业里打造自己的人生事业!"
    • 怀揣理想才能走的更远!
    • 以下博客我不相信凡是看过的人会说:我不能写一个简单的基本动画。

Android动画可以分为两种,View Animation(视图动画)和Property Animation(属性动画),本文主要讲的是对View Animation的了解和使用。

  • 直接先看官方:

View Animation
There are two types of animations that you can do with the view animation framework:
Tween animation: Creates an animation by performing a series of transformations on a single image with an Animation

Frame animation: or creates an animation by showing a sequence of images in order with an AnimationDrawable

  • View Animation包括两种:
    • 补间动画(Tween Animation).
    • 帧动画 (Frame Animation).

一.Tween Animation

1.Animation 动画类型

名称 xml javaCode 描述
透明度动画 alph AlphaAnimation 渐变透明度动画效果
缩放动画 scale ScaleAnimation 渐变尺寸伸缩动画效果
平移动画 translate TranslateAnimation 画面转换位置移动动画效果
旋转动画 rotate RotateAnimation 画面转移旋转动画效果

2.在XML文件中定义动画

①新建 Android 项目
②在res目录中新建anim文件夹
③在anim目录中新建一个my_anim.xml(注意文件名小写)
④在 my_anim.xml 加入动画代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <alpha/>
  <scale/>
  <translate/>
  <rotate/>
</set>

3.Android动画解析--XML

3.1 alpha 渐变透明度动画效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    
</set>
    <!--
        浮点型值:
        fromAlpha 属性为动画起始时透明度
        toAlpha  属性为动画结束时透明度
        说明:
        0.0表示完全透明
        1.0表示完全不透明
        以上值取0.0-1.0之间的float数据类型的数字

        长整型值:
        duration 属性为动画持续时间
        说明:时间以毫秒为单位
    -->

3.2 scale 渐变尺寸伸缩动画效果

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

    <scale
        android:duration="1000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.4"
        android:toYScale="1.4"/>

</set>

    <!--
        属性:interpolator 指定一个动画的插入器

        浮点型值:
        fromXScale 属性为动画起始时 X坐标上的伸缩尺寸
        toXScale  属性为动画结束时 X坐标上的伸缩尺寸
        fromYScale 属性为动画起始时Y坐标上的伸缩尺寸
        toYScale  属性为动画结束时Y坐标上的伸缩尺寸
        说明:
        以上四种属性值
        0.0表示收缩到没有
        1.0表示正常无伸缩
        值小于1.0表示收缩
        值大于1.0表示放大

        pivotX   属性为动画相对于物件的X坐标的开始位置
        pivotY   属性为动画相对于物件的Y坐标的开始位置
        说明:
        以上两个属性值 从0%-100%中取值
        50%为物件的X或Y方向坐标上的中点位置

        长整型值:
        duration 属性为动画持续时间
        说明:  时间以毫秒为单位

        布尔型值:
        fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用
    -->

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

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

    <translate
        android:duration="2000"
        android:fromXDelta="30"
        android:fromYDelta="30"
        android:toXDelta="-80"
        android:toYDelta="300" />

</set>
    <!--
        translate 位置转移动画效果
        整型值:
        fromXDelta 属性为动画起始时 X坐标上的位置
        toXDelta  属性为动画结束时 X坐标上的位置
        fromYDelta 属性为动画起始时 Y坐标上的位置
        toYDelta  属性为动画结束时 Y坐标上的位置
        注意:
        有指定fromXType toXType fromYType toYType 时候,
        默认是以自己为相对参照物
        长整型值:
        duration 属性为动画持续时间
    -->

3.4 rotate 画面转移旋转动画效果

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

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+350"/>

</set>
    <!--
        rotate 旋转动画效果
        属性:interpolator 指定一个动画的插入器

        浮点数型值:
        fromDegrees 属性为动画起始时物件的角度
        toDegrees  属性为动画结束时物件旋转的角度 可以大于360度
        说明:
        当角度为负数——表示逆时针旋转
        当角度为正数——表示顺时针旋转
        (负数from——to正数:顺时针旋转)
        (负数from——to负数:逆时针旋转)
        (正数from——to正数:顺时针旋转)
        (正数from——to负数:逆时针旋转)

        pivotX   属性为动画相对于物件的X坐标的开始位置
        pivotY   属性为动画相对于物件的Y坐标的开始位置
        说明:
        以上两个属性值 从0%-100%中取值
        50%为物件的X或Y方向坐标上的中点位置

        长整型值:
        duration 属性为动画持续时间
        说明:    时间以毫秒为单位
    -->

4.如何使用XML中的动画效果

 public static Animation loadAnimation(Context context, int id) throws NotFoundException {
        throw new RuntimeException("Stub!");
    }
//使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件
Animation mAnimation= AnimationUtils.loadAnimation(this,R.anim.my_anim);

5.如何在java代码中实现动画效果

//在代码中定义 动画实例对象
private Animation myAnimation_Alpha;
private Animation myAnimation_Scale;
private Animation myAnimation_Translate;
private Animation myAnimation_Rotate;

        // 第一个参数fromAlpha为 动画开始时候透明度
        // 第二个参数toAlpha为 动画结束时候透明度
        //说明:0.0表示完全透明,1.0表示完全不透明
        myAnimation_Alpha = new AlphaAnimation(0.1f, 1.0f);


        //第一个参数fromX为动画起始时 X坐标上的伸缩尺寸
        //第二个参数toX为动画结束时 X坐标上的伸缩尺寸
        //第三个参数fromY为动画起始时Y坐标上的伸缩尺寸
        //第四个参数toY为动画结束时Y坐标上的伸缩尺寸
        /*说明:
          以上四种属性值
          0.0表示收缩到没有
          1.0表示正常无伸缩
          值小于1.0表示收缩
          值大于1.0表示放大
        */
        //第五个参数pivotXType为动画在X轴相对于物件位置类型
        //第六个参数pivotXValue为动画相对于物件的X坐标的开始位置
        //第七个参数pivotXType为动画在Y轴相对于物件位置类型
        //第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置
        myAnimation_Scale = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);


        //第一个参数fromXDelta为动画起始时 X坐标上的移动位置
        //第二个参数toXDelta为动画结束时 X坐标上的移动位置
        //第三个参数fromYDelta为动画起始时Y坐标上的移动位置
        //第四个参数toYDelta为动画结束时Y坐标上的移动位置
        myAnimation_Translate = new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);
        
        
        //第一个参数fromDegrees为动画起始时的旋转角度  
        //第二个参数toDegrees为动画旋转到的角度  
        //第三个参数pivotXType为动画在X轴相对于物件位置类型 
        //第四个参数pivotXValue为动画相对于物件的X坐标的开始位置
        //第五个参数pivotXType为动画在Y轴相对于物件位置类型  
        //第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置
        myAnimation_Rotate = new RotateAnimation(0.0f, +350.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

二.FrameAnimation

帧动画是顺序播放一组预先定义好的图片,类似于电影播放。

//res/drawable/loading_data.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/ysreader_loading_00000"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00003"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00006"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00009"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00012"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00015"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00012"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00009"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00006"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00003"
        android:duration="100" />
    <item
        android:drawable="@drawable/ysreader_loading_00000"
        android:duration="100" />
</animation-list>
 mLoadingView = (ImageView) findViewById(R.id.iv_loading);
 mLoadingView.setBackgroundResource(R.drawable.loading_data);
 AnimationDrawable aniDrawable = (AnimationDrawable) mLoadingView.getBackground();
 aniDrawable.start();
帧动画的使用比较容易引起OOM,所以在使用帧动画时应尽量使用尺寸较小的图片。

三.开发中的一些实际效果

三(1).关于Tween Animation,可以看这篇博客,内容丰富.Tween Animation的实际效果如下图所示:点击可查看代码

Tween Animation.gif

三(2).关于FrameAnimation,实际效果如下,这是去年初开发的一款阅读器项目当时用的加载loading。非常简单,就是按照我第二部分讲的。
FrameAnimation.gif

四.结语

基本动画使用很简单,我们要尽量一次掌握,这么简单的知识总不能在用的时候还找度娘吧。基本动画只是开始,既然彻底攻破,那就接着干!

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

推荐阅读更多精彩内容

  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,580评论 0 9
  • 3.0以前,android支持两种动画模式,tween animation,frame animation,在an...
    Ten_Minutes阅读 1,612评论 0 4
  • 最近工作比较清闲,所以想系统的复习和学习下自己比较短缺的知识,所以。。。 程序运行效果图: Android动画主要...
    小沈新手阅读 483评论 0 1
  • ――赠医大校X5护8学友 丁酉年元宵节前夕穾然接到老同学电话,邀请我加入友微信群,在群里我看到了当年由敬佩的他…还...
    筒书生阅读 193评论 0 0
  • 做完P2P整个项目,想说学习到的东西太多了。金融行业洞太深啦~~ 这个项目分理财和借贷两个方向,下面是我负责的理财...
    果子里里阅读 893评论 0 1