android动画入门:View动画和帧动画

前言

Android 的动画可以分为三种:View 动画(view animation),帧动画(drawable animation)以及 属性动画(property animation)。属性动画是API11的新特性,不能再低版本中直接使用,但是我们可以通过兼容库来使用它。接下来,本文会主要讲解View动画和帧动画的使用,以及一些特殊的使用场景。


View 动画

View动画 即:补间动画(Tween Animation),通过对场景里的对象不断地做图像变换,从而产生动画效果,他是一种渐进式的动画,并且View动画支持自定义。
View动画包括四种动画效果:平移动画,缩放动画,旋转动画和透明度动画。

名称 标签 效果
平移动画 <translate> 移动 View
缩放动画 <scale> 放大或缩小 View
旋转动画 <rotate> 旋转 View
透明度动画 <alpha> 改变View的透明度

View 动画的使用,需要编写动画xml文件,存放的路径呢? 是在res/anim/ 文件夹下面。下面来看一下,xml文件的语法格式:

  • 平移动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="30"
android:toXDelta="-80"
android:fromYDelta="30"
android:toYDelta="300"
/>
<!-- translate 位置转移动画效果
        整型值:
            fromXDelta 属性为动画起始时 X坐标上的位置    
            toXDelta   属性为动画结束时 X坐标上的位置
            fromYDelta 属性为动画起始时 Y坐标上的位置
            toYDelta   属性为动画结束时 Y坐标上的位置
            注意:
                     没有指定fromXType toXType fromYType toYType 时候,
                     默认是以自己为相对参照物                
-->
</set>
  • 缩放动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <scale  
          android:interpolator=
                     "@android:anim/accelerate_decelerate_interpolator"
          android:fromXScale="0.0"
          android:toXScale="1.4"
          android:fromYScale="0.0"
          android:toYScale="1.4"
          android:pivotX="50%"
          android:pivotY="50%" />
</set>
<!-- 尺寸伸缩动画效果 scale
       属性: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方向坐标上的中点位置
-->
  • 旋转动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromDegrees="0" 
        android:toDegrees="+350"         
        android:pivotX="50%" 
        android:pivotY="50%" />
  <!-- rotate 旋转动画效果
       属性:interpolator 指定一个动画的插值器
             
       浮点数型值:
            fromDegrees 属性为动画起始时物件的角度    
            toDegrees   属性为动画结束时物件旋转的角度 可以大于360度   

            说明:
                     当角度为负数——表示逆时针旋转
                     当角度为正数——表示顺时针旋转              
                     (负数from——to正数:顺时针旋转)   
                     (负数from——to负数:逆时针旋转) 
                     (正数from——to正数:顺时针旋转) 
                     (正数from——to负数:逆时针旋转)       

            pivotX     属性为动画相对于物件的X坐标的开始位置
            pivotY     属性为动画相对于物件的Y坐标的开始位置

            说明:        以上两个属性值 从0%-100%中取值
                         50%为物件的X或Y方向坐标上的中点位置
-->
</set>
  • 透明度动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
/> 
<!-- 透明度控制动画效果 alpha
        浮点型值:
            fromAlpha 属性为动画起始时透明度
            toAlpha   属性为动画结束时透明度
            说明: 
                0.0表示完全透明
                1.0表示完全不透明
            以上值取0.0-1.0之间的float数据类型的数字
-->
</set>

除了以上各个View动画 特有的属性之外,他们还存在着许多共有的属性。

属性 描述
android:duration="long" 动画的持续时间,单位:毫秒
android:fillAfter=["true" , "false"] 动画结束时,是否保持动画的结束状态
android:fillBefore=["true" , "false"] 动画结束时,是否恢复至最开始的状态
android:fillEnabled =["true" , "false"] 同 android:fillBefore
android:interpolator ="@[package:]anim/interpolator_resource" 设置插值器
android:repeatCount="int" 动画的重复播放次数
android:repeatMode=["reverse" or "restart"] 重复类型,reverse:倒序回放,restart:从头播放
android:startOffset="long" 调用start函数之后等待开始运行的时间,单位为毫秒
android:zAdjustment = ["top","normal","bottom"] 动画运行在Z轴上的位置,默认值为normal

以上介绍都是各个View动画的单独使用 ,通常的应用场景中是需要我们 对各种View动画的结合使用,<set>标签表示一组动画的集合。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
         android:interpolator="@android:anim/accelerate_decelerate_interpolator"
         android:shareInterpolator="true">
  <alpha/>
  <scale/>
  <translate/>
  <rotate/>
<!-- 动画集合
       属性:interpolator 指定一个动画的插值器
            shareInterpolator 表示集合中的动画是否共享同一个插值器
-->
</set>

如何应用上面的动画呢?也很简单,如下所示。

// AnimationUtils.loadAnimation(Context context, int id);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.modal_in);
view.startAnimation(animation);

同时,通过Animation 的setAnimationListener 方法可以给View动画添加过程监听,接口如下:

public static interface AnimationListener {
        //动画开始        
        void onAnimationStart(Animator animation);
        //动画结束
        void onAnimationEnd(Animator animation);
        //动画重复
        void onAnimationRepeat(Animator animation);
    }


帧动画

帧动画是顺序播放一组预先定义好的图片,类似于电影播放。不同于View 动画,系统提供了另外一个雷AnimationDrawable 来使用帧动画。对于来说,使用起来比较简单,这里首先需要用到另一个 集合标签 <animation-list>.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/icon_refresh_0" android:duration="60"/>
    <item android:drawable="@drawable/icon_refresh_1" android:duration="60"/>
    <item android:drawable="@drawable/icon_refresh_2" android:duration="60"/>
</animation-list>

文件的存放路径:res/drawable/file_source.xml
然后将上述的 动画 作为View的背景并通过AnimationDrawable 来播放即可:

view.setBackgroundResource(R.drawable.file_source);
AnimationDrawable animationDrawable = (AnimationDrawable)view.getBackground();
animationDrawable.start();

帧动画使用比较简单,但是比较容易引起OOM,所以在使用帧动画时,应尽量避免使用过多尺寸的图片。


View 动画的特殊使用

View 动画除了单纯的用于 单个View 的动画形式, 还可以在一些其他的特殊的使用,例如:控制 ViewGroup 的子View 的出场效果,或者Activity的切换效果。

LayoutAnimation

用于设置 ViewGroup 子View 的显示动画效果。 下面就让我们通过一个例子来学习一下:

  1. 首先定义layoutAnimation 动画,它有三个属性:
  • android:animation 指定子元素所要显示的View动画效果
  • android:animationOrder 指定子元素的动画显示顺序 提供了三种模式:normal 正常顺序 random 随机播放 reverse 倒序
  • android:delay 指定子元素动画效果的延迟,比如说:view动画的 duration 设置为 500 ms,那么 delay 为 0.5 ,子元素之间将相差250ms 的依次播放动画。
// res/anim/anim_layout.xml
<layoutAnimation 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim_item"
    android:delay="0.5"
    android:animationOrder="normal">
</layoutAnimation>  
// res/anim/anim_item.xml 
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:shareInterpolator="true"
    android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.6f"
        android:toAlpha="1f" />
    <translate
        android:fromXDelta="100"
        android:toXDelta="0"
        />
</set>
  1. 为ViewGroup 设置android:layoutAnimation 属性,这一以ListView 为例:
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layoutAnimation="@anim/anim_layout"/>

这样就完成了 ViewGroup 动画的设置。当然,出了通过xml 指定之外,我们也可以通过代码来实现,这就需要用到一个类 LayoutAnimationController :

Animation animation = AnimationUtils.loadLayoutAnimation(this, R.anim.anim_item);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        listView.setLayoutAnimation(controller);

总结

通过 View 动画我们基本就可以实现一些比较实现一些比较绚丽的效果了,但在使用过程中还是需要注意一些问题的:

  • OOM问题 :这个问题主要针对 帧动画 ,我们要尽量避免使用太多和太大的图片,不然极容易出现OOM。
  • View 动画并不能改变 View的位置,即使视觉上改变了位置,但点击事件仍在 原位置生效。

动画其他:android动画入门:属性动画

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

推荐阅读更多精彩内容