Android View Animation

Animation -- View Animation

官方Api

帧动画

帧动画就是通常所说的Frame动画。Frame动画是一系列图片按照一定的顺序展示的过程。
帧动画的原理:在一定的时间段内切换多张有细微差异的图片从而达到动画的效果。

Frame动画可以被定义在XML文件中,也可以完全编码实现。
如果被定义在xml文件中,可放置在/res下的anim 或 drawable 目录中,文件名可以作为资源id在代码
中引用;
如果完全由编码实现,需要使用到AnimationDrawable对象。
需要注意的是,当我们在xml文件中定义帧动画时:
<animation-list>元素必须要作为根元素,它可以包含一个或多个<item>元素。
android:onshot如果定义为 true 的话,此动画只会执行一次,如果为 false 则一直循环。
<item>元素代表一帧动画,android:drawable指定此帧动画所对应的图片资源,android:duration代表此帧持续的时间,单位为毫秒。

例子:在 res/drawable 中 有5张类似的图片,图片名从ic_heart_0 ~ ic_heart_4,每张图片有些微差异。
定义一个名为heart_anim.xml的帧动画存放在res/drawable目录下,代码为:

<?xml version="1.0" encoding="utf-8"?>
<animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:onshot="true">
    
    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_0"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_1"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_2"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_3"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_4"/>

</animation-list>

定义好后,我们还需要讲动画设置给某个View,例如,将该动画设置为某个ImageView背景,代码如下:

<ImageView
    android:id="@+id/imageview_anim"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/heart_anim"/>

但是,此时动画并不会在 ImageView 显示时启动,还需要通过Java代码来启动该动画:

    ImageView mImageView = (ImageView)findViewById(R.id.imageview_anim);
    ((AnimationDrawable) mImageView.getBackground()).start();

这样,帧动画就会启动了。
通过Java代码方式构建帧动画:

AnimationDrawable anim = new AnimationDrawable();
for (int i = 0; i < 5; i++){
    int id = getResources().getIdentifier("ic_heart_" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    anim.addFrame(drawable, 300);
}
anim.setOneShot(false);
mImageView.setBackgroundDrawable(anim);
anim.start();

补间动画

tween动画是操作某个空间让其展现出旋转、渐变、移动、缩放的一种转换过程,这称为补间动画。
同样的,可以以XML形式定义动画,也可以编码实现。

若以XML形式定义一个动画,我们按照动画的定义语法完成XML,并放置于 /res/anim 目录下,文件名可以作为资源id倍引用;
若由编码方式实现,需要使用到Animation对象。

补间动画只能运用在View对象上,并且功能相对来说较为局限。因此,补间动画通常用于执行一些较为简单的动画。

下面是一个补间动画集合与补间动画的格式。该集合包含了多个动画,在执行该动画集合时,它们将一起执行。

<?xml version="1.0" encoding="utf-8"?>
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@[package:]anim/interpolator_resource"
    android:shareInterpolator=["true" | "false"] >
    
    <alpha
    android:fromAlpha="float"
    android:toAlpah="float"/>

    <scale
    android:fromXScale="float"
    android:toXScale="float"
    android:fromYScale="float"
    android:toYScale="float"
    android:pivotX="float"
    android:pivotY="float"/>

    <translate
    android:fromXDelta="float"
    android:toXDelta="float"
    android:fromYDelta="float"
    android:toYDelta="float" />/>

    <rotate
    android:fromDegrees="float"
    android:toDegrees="float"
    android:pivotX="float"
    android:pivotY="float"/>
</set>

xml 文件必须有一个根元素,可以是<alpha><scale><translate><rotate>中的任意一个,也可以是<set>来管理一个由前面几个元素组成的动画集合。

<set>是一个动画容器,管理多个动画的群组,与之对应的Java对象时AnimationSet
它有两个属性:

  • android:interpolator代表一个插值器资源,可以引用系统自带插值器资源,如下表。当然也可以使用自定义插值器资源,默认值是匀速插值器。
  • android:shareInterpolator代表<set>里面的多个动画是否要共享插值器,默认值是true。若设为false,那么<set>的插值器就不再起作用,需要在每个动画中加入插值器。
Interpolator 资源id 功能作用
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator 先加速再减速
AccelerateInterpolator @android:anim/accelerate_interpolator 加速
AnticipateInterpolator @android:anim/anticipate_interpolator 先回退一小步然后加速前进
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator 在上一个基础上超出终点一小步再退回终点
BounceInterpolator @android:anim/bounce_interpolator 最后阶段弹球效果
CycleInterpolator @android:anim/cycle_interpolator 周期运动
DecelerateInterpolator @android:anim/decelerate_interpolator 减速
LinearInterpolator @android:anim/linear_interpolator 匀速
OvershootInterpolator @android:anim/overshoot_interpolator 快速到达终点并超出一小步最后回到终点

<alpha> 是透明度的渐变动画,可以实现淡入、淡出的效果,与之对应的Java对象是 AlphaAnimation
android:fromAlpha 属性代表起始alpha值、浮点值,范围在 0.0 和 1.0 之间,分别代表透明和完全不透明;
android:toAlpha 属性代表结尾alpha值、浮点值,范围在 0.0 和 1.0 之间。

<scale> 是缩放动画,可以实现动态调整控件尺寸的效果,与之对应的Java对象是 ScaleAnimation
android:fromXScale 性代表起始的X方向上相对自身的缩放比例,浮点值,1.0代表自身无变化,0.5表示缩小1倍,2.0表示方法一倍;
android:toXScale 属性代表结尾的X方向上相对自身的缩放比例,浮点值;
android:fromYScale 属性代表起始的Y方向上相对自身的缩放比例,浮点值;
android:toYScale 属性代表结尾的Y方向上相对自身的缩放比例,浮点值。

android:pivotX 属性代表缩放的中轴点X坐标,浮点值;
android:pivotY 属性代表缩放的中轴点Y坐标,浮点值。
对于上面这两个属性,若想表示中轴点为图像的中心,可以把两个属性值定义为0.5或者50%。

<translate> 是位移动画,代表一个水平、垂直的位移,与之对应的Java对象是 TranslateAnimation
android:fromXDelta 属性代表起始X方向上的位置;
android:toXDelta 属性代表结尾X方向上的位置;
android:fromYDelta 属性代表起始Y方向上的位置;
android:toYDelta 属性代表结尾Y方向上的位置。
以上四个属性都支持三种表达方式:

  • 浮点数:相对自身原始位置的像素值
  • num%:相对自己的百分比
  • num%p:相对父类组件的百分比。

<rotate> 是旋转动画,与之对应的Java对象是 RotateAnimation
android:fromDegrees 属性代表起始角度,浮点值,单位:度;
android:toDegrees 属性代表结尾角度,浮点值,单位:度;
android:pivotX 属性代表旋转中心的X坐标值;
android:pivotY 属性代表旋转中心的Y坐标值。
以上两个属性有三种表达方式:

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,566评论 25 707
  • 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让全面说说Android的动画,所以今...
    未聞椛洺阅读 2,580评论 0 9
  • 概述 可译为视图动画,分为 缩放动画 平移动画 渐变动画 旋转动画 Android系统中定义了一个抽象类Anima...
    smart_dev阅读 2,682评论 1 21
  • 目录 黑暗中,一副躯体缓缓地移动着。他穿着一件披风,戴着一顶在黑暗中看不见颜色的帽子。 "先生,走吗?",一辆出租...
    故宫墙阅读 479评论 0 4
  • 2017年11月26日 星期日 学习时间:605天 学习方法:137累积方法 一、今日学习: 1、《易经》蛊卦第十...
    静清小舍阅读 270评论 0 0