Android中的动画

补间动画

Android中的补间动画即View动画有四种,分别为AlphaAnimation透明渐变动画、RotateAnimation旋转动画、ScaleAnimation缩放动画、TranslateAnimation位移动画。

使用View动画可以在代码中直接设置,也可以在xml中进行设置。

设置View动画

首先我们在布局中有一个ImageView图像,然后设置4个Button,点击的时候执行相应的动画。

AlphaAnimation透明渐变动画

在代码中设置动画,代码如下:

    //1.0意味着着完全不透明 0.0意味着完全透明
    AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);
    aa.setDuration(2000); //设置动画执行的时间
    aa.setRepeatCount(1); //设置重复的次数
    aa.setRepeatMode(Animation.REVERSE);//设置动画执行的模式
    //imageView开始执行动画 
    imageView.startAnimation(aa);

透明渐变动画很简单,只需要设置透明度就可以了。

RotateAnimation旋转动画

旋转动画有多个构造方法,我们选取其中参数最多的构造方法:

RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
        int pivotYType, float pivotYValue)

其中的各种参数的意义如下:

fromDegrees : 从哪个角度开始旋转,一般为0
toDegrees    : 结束的时候角度为多少,如转一圈则为360
pivotXType    : 在X轴上动画相对于谁旋转,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己旋转Animation.RELATIVE_TO_SELF
pivotXValue    : 在X轴上动画旋转的中心点
pivotYType    : 在Y轴上动画相对于谁旋转,同pivotXType
pivotYValue    : 在Y轴上动画旋转的中心点

示例:

    RotateAnimation rotate = new RotateAnimation(0, 360, // 从0度开始旋转,到360度结束
            Animation.RELATIVE_TO_SELF, 0.5f,     // X轴指定相对于自己还是相对于父控件旋转,0.5f则是以自己宽度的二分之一为旋转点
            Animation.RELATIVE_TO_SELF, 0.5f);    // Y轴指定相对于自己还是相对于父控件旋转,0.5f则是以自己高度的二分之一为旋转点
    rotate.setDuration(2000);
    imageView.startAnimation(rotate);

上面的代码执行时,会发现动画是以imageView的中心点旋转360度回到原点结束的。

ScaleAnimation缩放动画

缩放动画同样有多个参数的构造方法,如下:

ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数代表的意义:

fromX    : 动画的X轴从多大开始缩放,一般为1.0f,即动画原本大小开始缩放
toX        : 动画在X轴方向上要缩放到多大,如果小于1.0f,则动画在X轴上的距离会变小,大于1.0f会放大
fromY    : 动画的Y轴从多大开始缩放,其他同fromX
toY        : 动画在Y轴方向上要缩放到多大,其他同toX
pivotXType    : X轴指定相对于自己还是相对于父控件缩放,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己缩放Animation.RELATIVE_TO_SELF
pivotXValue    : 指定X轴方向上哪个位置为中心缩放
pivotYType    : Y轴同pivotXType
pivotYValue    : Y轴同pivotXValue

下面的示例为相对于自己从中心点放大:

    ScaleAnimation scale = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,     // 1.0f代表原本大小,2.0f代表放大一倍
            Animation.RELATIVE_TO_SELF, 0.5f, // X轴指定相对于自己还是相对于父控件放大,第二个则是以哪个位置为X轴的旋转点,此处为中心点放大
            Animation.RELATIVE_TO_SELF, 0.5f);
    scale.setDuration(2000);
    imageView.startAnimation(scale);

TranslateAnimation位移动画

TranslateAnimation位移动画也有多个参数,但是大多数参数都与上面几个动画雷同

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue)

参数意义:

fromXType    :在X轴上动画相对于谁移动,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己移动Animation.RELATIVE_TO_SELF
fromXValue    :在X轴上的起始时的移动距离,一般为0f,即原来位置
toXType        :在结束时X轴相对于谁移动,同fromXType
toXValue    :在结束时动画X轴所处的距离,若相对于父控件移动,一般不超多1.0f,否则会移动到屏幕外面
fromYType    :在Y轴上动画相对于谁移动,一般是相对于父控件Animation.RELATIVE_TO_PARENT,或者相对于自己移动Animation.RELATIVE_TO_SELF
fromYValue    :在Y轴上的起始时的移动距离,一般为0f,即原来位置
toYType        :在结束时Y轴相对于谁移动,同fromXType
toYValue    :在结束时动画Y轴所处的距离,若相对于父控件移动,一般不超多1.0f,否则会移动到屏幕外面

下面是相对于父控件,往右下角45度移动的示例:

    TranslateAnimation trans = new TranslateAnimation(
            Animation.RELATIVE_TO_PARENT, 0f,    // 起始时X轴相对于父控件移动
            Animation.RELATIVE_TO_PARENT, 0.2f,     // 结束时X轴也相对于父控件移动
            Animation.RELATIVE_TO_PARENT, 0,    // 起始时Y轴相对于父控件移动
            Animation.RELATIVE_TO_PARENT, 0.2f);    // 结束时Y轴相对于父控件移动
    trans.setDuration(2000);
    imageView.startAnimation(trans);

在xml中设置View动画

在xml中设置动画也比较简单。
首先在res资源目录下新建一个anim目录,然后创建一个xml文件,下面创建了一个TranslateAnimation位移动画的xml文件,代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <translate
        android:fromXDelta="0%p"    // 起始位置为原来的位置,后面带P代表相对于父控件移动,即代码布局中的Animation.RELATIVE_TO_PARENT
        android:toXDelta="0%p"
        android:fromYDelta="0%p"
        android:toYDelta="20%p"            
        android:fillAfter="true"
        android:duration="2000"
        xmlns:android="http://schemas.android.com/apk/res/android">
    
    </translate>

在xml中设置的参数基本与在代码设置的参数无异,在设置好xml之后,就是调用这个动画了,调用的方法如下:

    Animation translate = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
    //开始动画
    iv.startAnimation(translate);

只需要使用AnimationUtils这个类加载R.anim.translate动画,也就是刚才设置的xml文件的文件名

属性动画

上面的补间动画有个确定,就是不会改变运行动画的真实坐标,如使用TranslateAnimation的时候,ImageView在动画结束时停留在另一个位置,但是点击这个位置确实没有效果的,必须点击开始时的位置才起效。

而属性动画则是能够改变ImageView的真实坐标。

属性动画是使用ObjectAnimator这个类实现的,而使用这一个类就能够实现补间动画四个类的效果。

ObjectAnimator有个特点,就是我们无法使用new的方式创建出他的实例,而是使用ofFloat(Object target, String propertyName, float... values)这个静态方法获取的

ofFloat(Object target, String propertyName, float... values)
参数意义:
    target        :要执行动画的对象
    propertyName:属性的名字,即执行动画的对象要执行哪种动画(执行动画的对象的所拥有的方法)
    values        :执行动画的参数,是可变参数,意思是能够传入多个值

属性动画使用的方法很简单,代码如下:

        //创建属性动画
    /**
     * target 执行的目标  
     * propertyName 属性名字  The name of the property being animated.
     * float... values 可变参数 
     */
    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "translationX", 10, 50,20,100);
    oa.setDuration(2000);
    oa.start(); //开始动画

上面代码执行的时候将会对imageView进行在X轴上的位移,先移动到10,然后继续向右移动到50,在向左移动到20,最后移动到100的位置。

实现缩放效果,下面代码会将图片纵向缩放,也就是图片变扁了:

    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1,0,1);
    oa.setDuration(2000);
    oa.start();

实现旋转效果:

    // 按照中心点旋转
    // ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotation", 0, 180, 90, 360);
    // 按照X轴旋转
    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "rotationX", 0, 180, 90, 360);
    oa.setDuration(2000);
    oa.start();

实现透明效果:

    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1,0,1);
    oa.setDuration(2000);
    oa.start();

实现动画一起执行的效果

    AnimatorSet as = new AnimatorSet();
    ObjectAnimator oa = ObjectAnimator.ofFloat(imageView, "translationX", 10, 50, 20, 100);
    ObjectAnimator oa2 = ObjectAnimator.ofFloat(imageView, "scaleY", 0.1f, 2, 1, 2);
    ObjectAnimator oa3 = ObjectAnimator.ofFloat(imageView, "alpha", 0, 0.5f, 0, 1);
    ObjectAnimator oa4 = ObjectAnimator.ofFloat(imageView, "rotationY", 0, 180, 90, 360);
    as.setDuration(2000);//执行动画时长
    as.setTarget(iv);//iv执行动画
    //往集合中添加动画
    //动画逐个执行
    as.playSequentially(oa, oa2, oa3, oa4);
    //动画全部一起执行
    //as.playTogether(oa, oa2, oa3, oa4);
    as.start();

在XML中设置属性动画

在xml中使用属性动画要在res文件夹下新建一个animator文件夹,然后穿件一个xml文件,这里命名为oanimator.xml,代码如下:

    <?xml version="1.0" encoding="utf-8"?>
    <animator xmlns:android="http://schemas.android.com/apk/res/android" >
        <objectAnimator 
            android:propertyName="translationX"
            android:duration="2000"
            android:valueFrom="10"
            android:valueTo="100"
            ></objectAnimator>
    
    </animator>

在代码中调用这个它:

    ObjectAnimator oa = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.oanimator);
    //设置执行目标
    oa.setTarget(iv);
    oa.start();//开始执行

如此就能使用设置的这个动画了。

帧动画

动画中还有一个帧动画,帧动画是使用一系列的图片资源实现的。

实现帧动画非常简单,首先我们设置一个ImageView显示帧动画,然后在Activity绑定它。

然后放一系列的图片资源在drawable文件夹中,在创建一个xml文件,这里命名为my_anim.xml(可随意命名)。
然后在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/girl_1" android:duration="200" />
        <item android:drawable="@drawable/girl_2" android:duration="200" />
        <item android:drawable="@drawable/girl_3" android:duration="200" />
        <item android:drawable="@drawable/girl_4" android:duration="200" />
        <item android:drawable="@drawable/girl_5" android:duration="200" />
        <item android:drawable="@drawable/girl_5" android:duration="200" />
        <item android:drawable="@drawable/girl_5" android:duration="200" />
        <item android:drawable="@drawable/girl_5" android:duration="200" />
        <item android:drawable="@drawable/girl_6" android:duration="200" />
        <item android:drawable="@drawable/girl_7" android:duration="200" />
        <item android:drawable="@drawable/girl_8" android:duration="200" />
        <item android:drawable="@drawable/girl_9" android:duration="200" />
        <item android:drawable="@drawable/girl_10" android:duration="200" />
        <item android:drawable="@drawable/girl_11" android:duration="200" />
    </animation-list>

其中girl_1、girl_2···就是我们要加载的图片资源。

设置完之后就能在代码中直接调用:

    // [1]找到iv控件 用来显示动画效果
    ImageView rocketImage = (ImageView) findViewById(R.id.iv);
    // [2]设置背景资源
    rocketImage.setBackgroundResource(R.drawable.my_anim);
    // [3]获取AnimationDrawable 类型
    AnimationDrawable ad = (AnimationDrawable) rocketImage.getBackground();
    // [4]开始执行动画
    ad.start();

如此一来就能后执行帧动画了。

Android动画学习相关资源:
Android属性动画完全解析(上),初识属性动画的基本用法
Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法
Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法

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

推荐阅读更多精彩内容