Android动画之View Animation--alphatranslatescalerotate

Posted jia-huan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android动画之View Animation--alphatranslatescalerotate相关的知识,希望对你有一定的参考价值。

本章内容

其实就是把 TranslateAnimation(偏移动画),AlphaAnimaton(透明渐变动画),ScaleAnimation(缩放动画),RotateAnimation(旋转动画),这四个动画做一次总结,当然也包括了AnimationSet,代码写的多了,会越来越忽略基础代码的编写,不总结一下,总感觉会忘掉。


通用属性

android:duration            动画执行的时间(毫秒)

android:fillAfter           如果设置为true,控件动画结束时,将保持动画最后时的状态

android:fillEnabledandroid:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态(一般android:fillAfterandroid:fillEnabled一起用)

android:fillBefore          如果设置为true,控件动画结束时,还原到开始动画前的状态

android:repeatCount         动画重复次数

android:repeatMode          重复类型,有reverserestart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。

还有一个 android:interpolator 名为插值器的属性,这个效果挺多的,而且用到的也挺多,不放在基础的动画总结里面,也不太适合放在里面。

AlphaAnimation

AlphaAnimation应该是最简单动画了,它只有两个自带属性

android:fromAlpha           动画开始的透明度

android:toAlpha             动画结束时的透明度

0f表示完全透明,1f表示完全不透明

效果:

这里写图片描述


XML实现AlphaAnimaton:

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:fillAfter="true"
    android:fillEnabled="true"
    android:fromAlpha="0"
    android:repeatCount="3"
    android:toAlpha="1">
</alpha>

动画执行代码:

private ImageView activity_alpha_animation_imageview;
private Animation alphaAnimation;

alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);       activity_alpha_animation_imageview.startAnimation(alphaAnimation)

代码生成AlphaAnimation

activity_alpha_animation_imageview.startAnimation(getAlphaAnimation(0.3f, 1f, 3000));
....
private AlphaAnimation getAlphaAnimation(float fromAlpha, float toAlpha, long duration) {
        AlphaAnimation aa = new AlphaAnimation(fromAlpha, toAlpha);
        aa.setDuration(duration);
        aa.setFillAfter(true);
        aa.setFillEnabled(true);
        aa.setRepeatCount(2);
        aa.setRepeatMode(Animation.REVERSE);
        return aa;
    }


TranslateAnimation

自带属性:

android:fromXDelta              起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义通过代码一览无余。

android:fromYDelta              起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;

android:toXDelta                结束点X轴坐标

android:toYDelta                结束点Y轴坐标



XML实现的动画:

这里写图片描述

XML(加载动画的代码直接看AlphaAnimation就可以了):

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillBefore="true"
    android:fromXDelta="60%p"
    android:fromYDelta="-60"
    android:toXDelta="-60%"
    android:toYDelta="60%"></translate>

这里我让动画结束后保持在动画前的位置,先看x轴方向的位置来解析 p和%,同样都是 60的数值,但是开始的位置对于结束的位置而言距初始位置距离更远,这是因为 p 代表的是屏幕宽度的60%,表示为 60%p,而单纯的60%计算的控件本身宽度的60%。再看Y轴方向的动画,-60的值代表的是,在距离初始位置Y轴-60px的位置开始动画,位移到距离初始位置Y轴控件60%高度的位置。(注意,不管是什么参数,它们对应的值都是相对于控件初始位置的)

TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta) 创建动画
效果图:

这里写图片描述

直接看代码:

 activity_alpha_animation_imageview.startAnimation(getTranslateAnimation(image_width, -image_width, -image_height, image_height, 1000l));
 .....
 private TranslateAnimation getTranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta, long duration) {
        TranslateAnimation ta = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta);
        ta.setFillAfter(true);
        ta.setFillEnabled(true);
        ta.setDuration(duration);
        return ta;
    }

这里 image_width 和 image_height,分别是控件的宽和高。同样的,这个API中的参数也是相对于控件初始位置作位移。


TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,int fromYType, float fromYValue, int toYType, float toYValue) 创建动画

这个方法参数比较多,而且参数的类型也会比较多,这里带着效果看代码:

这里写图片描述

activity_alpha_animation_imageview.startAnimation(getTranslateAnimation(500l, -70, 0.7f, -0.5f, 0.5f));
....
private TranslateAnimation getTranslateAnimation(long durationMillis, float fromXValue, float toXValue,
                                                     float fromYValue, float toYValue) {
        TranslateAnimation ta = new TranslateAnimation(
                Animation.ABSOLUTE, fromXValue, Animation.RELATIVE_TO_SELF, toXValue,
                Animation.RELATIVE_TO_PARENT, fromYValue,
                Animation.RELATIVE_TO_SELF, toYValue);
        ta.setDuration(durationMillis);
        ta.setFillAfter(true);
        ta.setFillEnabled(true);
        return ta;
    }

TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue) 这个API看着参数很多,但是你只需要关注 int fromXType、 int toXType、int fromYType、int toYType 这4个参数就OK了,而这4个参数代表的其实是一个意思:位移的类型
我在代码中把会用到的几种类型掺杂在一个动画里,这里的位置距离同样的都是按照控件初始位置来计算的:

Animation.ABSOLUTE      

绝对位置,在这个类型后,你的值必须是一个px的值,
如代码中 int fromXType, float fromXValue 这两个参数对应的是 Animation.ABSOLUTE, -70,
它的意思是距离初始位置X轴方向 -70px 的位置开始动画。

Animation.RELATIVE_TO_PARENT

相对父控件,在其后的值只能是一个百分比的值,demo里的父控件的宽高就是屏幕的宽高,
代码中 int fromYType, float fromYValue 的值为 Animation.RELATIVE_TO_PARENT, -0.5f,
也就是Y轴方向上的起始位置是距离初始位置 -50% 屏幕高度开始的

Animation.RELATIVE_TO_SELF

相对自己,在其后也是一个百分比的值,不过它的计算是以动画控件本身的宽高为基础的,
demo中, int toYType, float toYValue 的值为 Animation.RELATIVE_TO_SELF,0.5f,
即是说Y轴方向的结束位置是距离初始位置 50% 自身高度的位置。
(其实从动画中就可以看出,同样是 50% 的值,但是 Animation.RELATIVE_TO_PARENTAnimation.RELATIVE_TO_SELF 的位移距离要大得多,这其实就是因为计算基础值不同)


ScaleAnimation

自带属性:

android:fromXScale
起始的X方向上相对自身的缩放比例,

android:toXScale
结尾的X方向上相对自身的缩放比例

android:fromYScale
起始的Y方向上相对自身的缩放比例

android:toYScale
结尾的Y方向上相对自身的缩放比例

android:pivotX
缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
(在TranslateAnimation中已经详细展示过3种不同类型值的意义)

android:pivotY
缩放起点Y轴坐标,取值及意义跟android:pivotX一样



XML动画:

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.5"
    android:toXScale="1.4"
    android:fromYScale="0.0"
    android:toYScale="1.4"
    android:pivotX="150"
    android:pivotY="-50%p"
    android:duration="1000" />

android:pivotX=”150” android:pivotY=”-50%p” 定义了动画的起始点,即X轴方向从距 初始位置 150px处,Y轴方向距 初始位置 50% 屏幕高 处,开始动画出。如果你想要的动画起始点是基于本身的,那么将 android:pivotX、android:pivotY设置成 百分比 就OK了,多试试不同的参数就明白了。


ScaleAnimation(fromX, toX, fromY, toY) 创建动画
这个API非常简单,从 from to 就可以看出,它的意思是从 a 比例 伸缩到 b比例,并且以控件左上角为起始点。
效果图:

这里写图片描述

activity_animation_imageview.startAnimation(getScaleAnimation(0.2f, 1.2f, 0.5f, 1.5f, 1000l));
.....
private ScaleAnimation getScaleAnimation(float fromX, float toX, float fromY, float toY, long duration) {
        ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY);
        sa.setDuration(duration);
        return sa;
    }



ScaleAnimation(fromX, toX, fromY, toY, pivotX, pivotY) 创建动画

正如上一个API所见,默认是控件的左上角,如果我想自己订制一个点呢?那么这个API中提供了 pivotX, pivotY 这两个参数,可以自己将 起始点控制住,需要注意的是这两个参数需要你填坐标点,不是百分比 也不是 p,而且这个坐标点的值是相对于 控件左上角而言的,比如你给值 0,0,在这里可不是屏幕的左上角而是控件的左上角,再比如你想要让控件从右下角伸缩,那么你给的参数 就得是 imageView_width, imageView_height。
给个imageView_width, imageView_height 这种情况的效果看下:

这里写图片描述

activity_animation_imageview.startAnimation(getScaleAnimation(0.0f, 1.2f, 0.0f, 1.5f, imageView_width, imageView_height, 1000l));
.....
private ScaleAnimation getScaleAnimation(float fromX, float toX, float fromY, float toY,
                                             float pivotX, float pivotY, long duration) {
        ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY, pivotX, pivotY);
        sa.setDuration(duration);
        return sa;
    }



ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue) 创建动画

这个方法看着是不是和 TranslateAnimation 的某个构造方法很相似,不过这里就要注意的参数就少的多了 pivotXType 和 pivotYType,连类型都是一样的,动画的起始点的值 也是相对于控件初始状态下左上角为基础计算的

 private ScaleAnimation getScaleAnimation(float fromX, float toX, float fromY, float toY,
                                             int pivotXType, float pivotXValue, int pivotYType, float pivotYValue, long duration) {
        ScaleAnimation sa = new ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue);
        sa.setDuration(duration);
        return sa;
    }

先看个简单的 Animation.ABSOLUTE :

这里写图片描述

 activity_animation_imageview.startAnimation(getScaleAnimation(0.0f, 1.2f, 0.0f, 1.5f, Animation.ABSOLUTE, -100, Animation.ABSOLUTE, -100, 1000l));

这里 -100, -100 就是相对于左上角而言的。

再看个复杂的,混合着 Animation.RELATIVE_TO_SELF 和 Animation.RELATIVE_TO_PARENT:

这里写图片描述

activity_animation_imageview.startAnimation(getScaleAnimation(0.0f, 1.2f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_PARENT, -0.5f, 1000l));

上述代码中 X轴方向 偏移控件本身宽度的50%,而Y轴方向 偏移屏幕高度的50%,这就是动画的起始点。

RotateAnimation

自带属性:

android:fromDegrees
开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数

android:toDegrees
结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数

android:pivotX
缩放起点X轴坐标,可以是数值、百分数、百分数p
如果不太明白这三个值得含义可以看看 TranslateAnimation 部分,哪里讲的比较清楚

android:pivotY
缩放起点Y轴坐标,可以是数值、百分数、百分数p



XML动画

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true"
    android:fromDegrees="0"
    android:pivotX="50%p"
    android:pivotY="50%"
    android:toDegrees="720">
</rotate>

这里我定义的旋转中心 android:pivotX=”50%p”和android:pivotY=”50%” 代表着相对于控件左上角 X轴方向 以父宽即屏幕宽的一半位移,Y轴方向以 控件本身高度的一半位移,那么这个点就是 旋转的中心了


RotateAnimation(fromDegrees, toDegrees) 创建动画

activity_animation_imageview.startAnimation(getRotateAnimation(0, 360, 2000l));
.....
private RotateAnimation getRotateAnimation(float fromDegrees, float toDegrees, long duraton) {
        RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees);
        ra.setDuration(duraton);
        return ra;
    }

效果:

这里写图片描述

可以看出这个API默认控件左上角为旋转中心


RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY) 创建动画

activity_animation_imageview.startAnimation(getRotateAnimation(0, 360, 100f, 0.5f, 2000l));
.....
 private RotateAnimation getRotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY, long duraton) {
        RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY);
        ra.setDuration(duraton);
        return ra;
    }

这里写图片描述

此处的 float pivotX, float pivotY 是以控件左上角为原点,值为坐标的参数


RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue) 创建动画

同样的这里的 pivotXType 和 pivotYType 决定了跟在后面的值是以什么为基础计算的,但是不管 pivotXType, pivotXValue, pivotYType, pivotYValue 他们的取值怎么样,都是以 控件左上角为原点,位移对应距离,最终的点就是 旋转中心(其实在前面的 TranslateAnimation 和 ScaleAnimation 中也是一样的,不管类型、取值如何都死以控件左上角为原点去计算位移距离的)

private RotateAnimation getRotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
                                               int pivotYType, float pivotYValue, long duraton) {
        RotateAnimation ra = new RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue);
        ra.setDuration(duraton);
        return ra;
    }

Animation.ABSOLUTE 为例:

这里写图片描述

activity_animation_imageview.startAnimation(getRotateAnimation(0,360, Animation.ABSOLUTE, 200f, Animation.ABSOLUTE, 200f, 2000l))



Animation.RELATIVE_TO_PARENT & Animation.RELATIVE_TO_SELF

这里写图片描述

activity_animation_imageview.startAnimation(getRotateAnimation(0, 360, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, 2000l));

可以看出,旋转中心是以控件左上角为中心,X轴方向位移屏幕的50%,Y轴方向位移控件高度的50%。

AnimationSet

效果图:
这里写图片描述
XML实现:

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

    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="1440" />

    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="80%p"
        android:toYDelta="150%" />

</set>  
private Animation animation;
private ImageView activity_animation_imageview;
.....
animation = AnimationUtils.loadAnimation(this, R.anim.set);
activity_animation_imageview.startAnimation(animation);

纯代码实现:

 private AnimationSet getAnimationSet() {
        AlphaAnimation aa = new AlphaAnimation(0f, 1f);
        RotateAnimation ra = new RotateAnimation(0f, 1440f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        ScaleAnimation sa = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        TranslateAnimation ta = new TranslateAnimation(Animation.ABSOLUTE, 0f, Animation.RELATIVE_TO_PARENT, 0.8f, Animation.ABSOLUTE, 0f, Animation.RELATIVE_TO_SELF, 1.5f);
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(aa);
        set.addAnimation(ra);
        set.addAnimation(sa);
        set.addAnimation(ta);
        set.setDuration(3000l);
        set.setFillAfter(true);
        set.setFillEnabled(true);
        return set;
    }

至此,终于把基础动画都看完,断断续续写了两天,还掺杂着CSDN的BUG,默默吐槽中….顺便附上源码:
http://download.csdn.net/detail/cjh_android/9531161

以上是关于Android动画之View Animation--alphatranslatescalerotate的主要内容,如果未能解决你的问题,请参考以下文章

Android动画Animation

android中的动画之变化动画事例1

Android 自定义view之悬浮动画

android 动画 ——视图动画(View Animation)

Android工具类篇 动画工具类

Android界面实现View Animation 使用介绍