Android View Animation

概述

可译为视图动画,分为

  • 缩放动画
  • 平移动画
  • 渐变动画
  • 旋转动画

Android系统中定义了一个抽象类Animation来定义这种视图动画,它的具体子类如下表:

动画名称 对应的子类 xml中标签 描述
缩放动画 ScaleAnimation < scale /> S
平移动画 TranslateAnimaiton < translate /> T
渐变动画 AlphaAnimation < alpha /> A
旋转动画 RoateAnimation < roate /> R
动画集合 AnimationSet < set /> 是用来存放上面四种动画的集合,容器的概念而已

这类动画也被称作是补间动画(Tween Animation),取他们首字母这样样记忆呢 STAR 动画如何?(哈哈别闹,我自称), “明星” 动画是Android提供最早的动画框架,只能这几种效果或者他们的组合效果(明星独唱或者组合喽),使用起来也是非常方便简单,可以代码实现也可以在XML中定义使用。

那么这些视图动画有哪些通用属性,这里列举了父类Animaiton常用属性:

xml中属性 对应的方法 描述
android:duration setDuration(long) 指定动画持续时间,单位毫秒
android:fillAfter setFillAfter(boolean) 设置为true时,指动画结束时界面会停留在动画播放完时的界面,默认false
android:fillBefore setFillBefore(boolean) 指动画结束时画面停留在此动画的第一帧
android:fillEnabled setFillEnabled(boolean) 该方法用于使能填充效果。当该方法设置为true时,将执行setFillBefore和setFillAfter方法,否则将忽略setFillBefore和setFillAfter方法
android:interpolator setInterpolator(Interpolator) 指定动画的插值器类型,比如常见类型有
accelerate_interpolator 加速-动画插入器;
decelerate_interpolator 减速- 动画插入器;
accelerate_decelerate_interpolator 加速-减速 动画插入器
android:repeatCount setRepeatCount(int) 指定动画的重复次数
android:repeatMode setRepeatMode(int) 定义动画的重复模式,该类中指定了两个常量值
RESTART 值为1,表示重新开始
REVERSE 值为2,表示play backward
android:startOffset setStartOffset(long) 动画之间的时间间隔,从上次动画停多少时间开始执行下个动画
android:zAdjustment setZAdjustment(int) 定义动画的Z Order的改变,有三个常量值:
ZORDER_NORMAL 值为0,保持Z Order不变
ZORDER_TOP 值为1,保持在最上层
ZORDER_BOTTOM值为-1,保持在最下层

使用

文件存放位置:

res/anim/filename.xml

资源引用:

In Java: R.anim.filename
In XML: @[package:]anim/filename

XML中实现通常做法是:

  1. 对应目录下定义一个动画文件(在Android studio中直接new --> android resources file,然后选择对应的root标签和目录即可,会自动创建anim文件夹)
  2. 在资源文件中添加标签等具体的动画属性值
  3. 在代码中使用AnimationUtils来加载定义好的动画文件,会返回一个Animation对象,然后将其附在view控件上即可

Animation animation = AnimationUtils.loadAnimation(this, R.anim.scal);
imageView.startAnimation(animation);

代码实现通常做法:

  1. 创建一个AnimationSet对象,并设置相关属性,比如插值器等,后续会具体讲解
  2. 创建你想要的某一种或多种动画对象,包括动画执行时间等
  3. 然后将这些对象添加到这个AnimationSet对象中
  4. 使用控件对象开始执行这个动画集合

AnimationSet animationSet = new AnimationSet(true);
比如创建一个缩放动画ScaleAnimation scale;
animationSet.addAnimation(scale);
imageView.startAnimation(animationSet);

AnimationSet


这个类对应的标签是< set/>,相当于一个容器,来存放其他四种动画或者是子容器的(动画集合嵌套动画集合)

<set xmlns:android="http://schemas.android.com/apk/res/android"

    // 指定一个差值器,如果是调用系统内置差值器,包名即为android
    android:interpolator="@[package:]anim/interpolator_resource"

    // **独有属性** 如果是true 表示它的所有子元素标签都共用这个差值器
    android:shareInterpolator=["true" | "false"] >
</set>

ScaleAnimation


<scale

    //动画起始时x轴伸缩尺寸,取值float型,1.0表示不变
    android:fromXScale="float"

    //动画结束时x轴伸缩尺寸,取值float型,1.0表示不变
    android:toXScale="float"

    //动画起始时Y轴伸缩尺寸,取值float型,1.0表示不变
    android:fromYScale="float"

    //动画结束时Y轴伸缩尺寸,取值float型,1.0表示不变
    android:toYScale="float"

    //缩放的中心点,x轴点位置
    android:pivotX="float"
    //缩放的中心点,Y轴点位置
    android:pivotY="float" />

值得注意的是,这里的缩放的轴心位置pivotX pivotY在xml中依然有三种形式的取值:

  • 50% 自身的百分比
  • 50%p 父容器的百分比
  • 50 具体的数值

它们都是相当于在view的(x,y)坐标上加上 轴点的值 确定的位置,比如android:pivotX="50%" 那么就表示这个轴点的x位置是 它自身的x坐标加上 它自身宽度的一半

privotX = 50%

DEMO
首先定义一个布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.smart.myapplication.animation.ViewAnimationAct">


    <LinearLayout
        android:layout_width="300dp"
        android:background="#00ffff"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:layout_height="200dp">

        <ImageView
            android:id="@+id/imageView"
            android:scaleType="center"
            android:layout_gravity="center"
            android:src="@drawable/girl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <Button
        android:id="@+id/start_anim"
        android:layout_alignParentBottom="true"
        android:text="缩放"
        android:layout_width="wrap_content"
        android:background="#2efe4f"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        />

</RelativeLayout>

xml动画文件:

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

    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="1.5"
        android:toYScale="1.5" />
 
</set>  

然后在代码中使用这个动画文件:
public class ViewAnimationAct extends AppCompatActivity {

    private ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_animation);
        imageView = (ImageView) findViewById(R.id.imageView);
        final Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);

        findViewById(R.id.start_anim).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.startAnimation(animation);
            }
        });
    }
}

直接看效果(录屏反应慢,实际动画时间就两秒)

缩放动画

TranslateAnimation


xml中标签中独有属性:

<translate
    android:fromXDelta="float|percent" // 动画开始的点离当前View的 X坐标上的差值 
    android:toXDelta="float|percent" // 动画结束的点离当前View的 X坐标上的差值 
    android:fromYDelta="float|percent" // 动画开始的点离当前View的 Y坐标上的差值 
    android:toYDelta="float|percent" // 动画结束的点离当前View的 Y坐标上的差值 
 />  

这四个属性值支持三种形式的参数:

  • view自身宽或者高的百分比,范围是-100% -- 100%

    • x方向的差值(xDelta)就是取得view自身的width 然后作以百分比作为差值
    • y方向的差值(yDelta)就是取得view自身的height 然后作以百分比作为差值
  • view父View的宽或者高的百分比,范围是 -100%p -- 100%p

    • x方向的差值(xDelta)就是取得view的父控件的width 然后作以百分比作为差值
    • y方向的差值(yDelta)就是取得view的父控件的height 然后作以百分比作为差值
  • 具体位置的像素值 比如 50

**都是以view的(x,y)坐标变换,相当于给他一个transitionX,transitionY
**

DEMO:

页面布局文件(后续的布局和activity中代码实现类似,不在贴出):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.smart.myapplication.animation.ViewAnimationAct">

        <ImageView
            android:id="@+id/imageView"
            android:scaleType="center"
            android:src="@drawable/girl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

</RelativeLayout>

对应的xml中动画文件:

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

    <translate
        android:duration="2000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toXDelta="80%"
        android:toYDelta="80%" />
</set>

对应的效果

平移动画

AlphaAnimation


是一种改变透明度的动画,渐进渐出,默认的透明度都是1表示不透明。对应< alpha/>标签,两个独有属性:

<alpha
    android:fromAlpha="float" // 从一个透明度
    android:toAlpha="float"  // 变化到另一个透明度 
/>

这两个属性值的取值:透明度范围为0.0(完全不可见) --- 1.0(不透明)

DEMO
动画文件:

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

    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:toAlpha="0" />
</set>

对应的效果:

渐变动画

RoateAnimation


旋转动画,给定一个轴心和旋转的角度,组成一个旋转的动画效果。对应的标签是< roate/>

<rotate
    // 旋转的开始角度
    android:fromDegrees="float"

    // 旋转结束的角度
    android:toDegrees="float"

    // 旋转的轴心,x位置
    android:pivotX="float"

    // 旋转的轴心,y位置
    android:pivotY="float" />

需要说明的是:

  • 旋转的起始角度可以有正负,并且支持任意角度旋转,比如从0到720,那么会旋转两周
  • privotX 和 privotY 和缩放动画轴心取值一样,也有三种形式,其实定义的就是圆心的位置

DEMO
动画文件:

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

    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</set>

对应的效果

旋转动画

上述列举了每一种动画独有的属性,但是别忘了他们共有的属性定义,比如动画执行完停留的位置控制,重复播放动画,多个动画组合时提供不同的时间偏移等等

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

推荐阅读更多精彩内容