Android动画解析（一）-----逐帧动画和补间动画

来源：互联网发布：农村淘宝怎么解绑编辑：程序博客网时间：2024/06/08 12:26

今天项目又用到了动画，发现之前掌握的那些又遗忘了不少，趁着有时间，再重新捋顺一边。

Android中的动画分为逐帧动画，补间动画，属性动画三种.

逐帧动画（Frame Animation）

逐帧动画：就像GIF图片一样，通过一系列的Drawable依次显示来模拟动画效果。

使用方式：

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="true">    <item android:drawable="@drawable/pic1" android:duration="150" />    <item android:drawable="@drawable/pic2" android:duration="150" />    <item android:drawable="@drawable/pic3" android:duration="150" /></animation-list><!--XML文件以<animation-list>为根元素，以<item>表示要轮换显示的图片，oneshot属性，用于设置播放模式（是单次播放还是循环播放）duration属性表示各项显示的时间。XML文件要放在/res/drawable/目录下-->

调用方法：

 AnimationDrawable animationDrawable = (AnimationDrawable) loadingImage.getDrawable(); animationDrawable.start();//开始动画 animationDrawable.stop();//结束动画

补间动画（Tween Animation）

补间动画：给出两个关键帧，通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变。
补间动画是使用Animation类创建的，下面的列表说明了四种可用的动画类型：

动画类型简介 AlphaAnimation 可以改变View的透明度。(透明度渐变动画) ScaleAnimation 允许缩放选中的View。（缩放动画） RotateAnimation 可以在XY平面上旋转选中的View。（旋转动画） TranslateAnimation 可以在屏幕上移动选中的View。（平移动画）

当View设置补件动画后，动画只是移动了内容，View本身其实还在原地，所以点击事件也还是在原地，如果想让点击事件跟着移动，最简单的是使用属性动画。

TranslateAnimation（平移动画）

java代码写法

TranslateAnimation animation = new TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)；// fromXDelta 属性为动画起始时 X坐标上的位置    toXDelta   属性为动画结束时 X坐标上的位置// fromYDelta 属性为动画起始时 Y坐标上的位置    toYDelta   属性为动画结束时 Y坐标上的位置//  没有指定fromXType toXType fromYType toYType 时候， 默认是以自己为相对参照物       ...View.startAnimation(animation);

XML文件写法

通过配置XML文件来实现平移动画，文件需要放在res\anim目录中，在动画文件中通过<translate>标签设置移动效果。首先在res\anim目录下建一个动画文件

translate_tween.xml,该文件的内容如下：

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"      android:fromXDelta="0"    android:fromYDelta="0"    android:interpolator="@android:anim/accelerate_interpolator"       android:toXDelta="60"    android:toYDelta="60" ></translate><!-- android:interpolator     动画差值器--><!-- android:duration        动画持续时间，以毫秒为单位 --><!-- android:fillAfter       如果设置为true，控件动画结束时，将保持动画最后时的状态--><!-- android:fillBefore      如果设置为true,控件动画结束时，还原到开始动画前的状态--><!-- android:fillEnabled     与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态--><!-- android:repeatCount     重复次数--><!-- android:repeatMode      重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。-->

// 在代码中这样调用Animation animation=AnimationUtils.loadAnimation(this, R.anim.translate_tween);View.startAnimation(animation);或者用这种方式//View.setAnimation(animation);//animation.start();

TranslateAnimation特有属性

 * android:fromXDelta="0%"   动画开始执行时X轴方向控件的起始位置，                    * 当value加%时(例如80%),意思是相对于控件的原始位置往右的80%控件宽度的位置                      * 又例如value为-20%时，意思是相对于控件的原始位置往左的20%控件宽度的位置。                    * 当Value不加%时(例如80)，表示相对于控件的原始位置往右80个像素(px)的位置,                    * 又如当Value为-20时，即往左20个像素。  * android:toXDelta="100%"动画结束执行时X轴方向控件的结束位置，Value可以加%，也可以不加%，原理同上  * android:fromYDelta="0%"动画开始执行时Y轴方向控件的起始位置，Value可以加%，也可以不加%，原理同上  * android:toYDelta="100%"动画结束执行时Y轴方向控件的结束位置，Value可以加%，也可以不加%，原理同上

AlphaAnimation（透明度渐变动画）

Java代码写法

 AlphaAnimation mAlphaAnimation = new AlphaAnimation(float fromAlpha, float toAlpha); //fromAlpha:设置动画开始时控件的透明度  //toAlpha:设置动画结束时的控件的透明度   //两个值取值都为0~1之间，0.0为透明，控件不显示，1.0为不透明，控件全部显示   ...  View.startAnimation(mAlphaAnimation);

XML写法

同样文件需要放在res\anim目录中，在动画文件中通过<alpha>标签设置渐变效果。首先在res\anim目录下建一个动画文件
alpha_tween.xml,该文件的内容如下：

<alpha xmlns:android="http://schemas.android.com/apk/res/android"          android:fromAlpha= "0.0"          android:toAlpha= "1.0"          >  </alpha>  <!-- android:interpolator     动画差值器--><!-- android:duration        动画持续时间，以毫秒为单位 --><!-- android:fillAfter       如果设置为true，控件动画结束时，将保持动画最后时的状态--><!-- android:fillBefore      如果设置为true,控件动画结束时，还原到开始动画前的状态--><!-- android:fillEnabled     与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态--><!-- android:repeatCount     重复次数--><!-- android:repeatMode      重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。-->

// 在代码中这样调用Animation animation=AnimationUtils.loadAnimation(this, R.anim.alpha_tween);View.startAnimation(animation);或者用这种方式//View.setAnimation(animation);//animation.start();

AlphaAnimation特有属性

android:fromAlpha:动画开始时的透明度，变化范围为0.0-1.0,0.0表示完全透明，1.0表示完全不透明android:toAlpha：动画结束是的透明度，变化范围和意义同上。

RotateAnimation(旋转动画)

Java代码写法

RotateAnimation mRotateAnimation =  new RotateAnimation(float fromDegrees, float toDegrees,               int pivotXType, float pivotXValue, int pivotYType, float pivotYValue);// android:fromDegrees ：动画开始时旋转的角度位置，float类型，正值代表顺时针方向度数，负值代码逆时针方向度数//android:toDegrees ： 动画结束时旋转到的角度位置，float类型，正值代表顺时针方向度数，负值代码逆时针方向度数//android:pivotXType： 确定动画在X轴的中心位置类型。与下面的pivotXValue结合，确定X轴上旋转中心。(取值见下表)//android:pivotXValue  ：旋转点X轴坐标值，float类型，可以是数值、百分数、百分数p三种样式，比如50、50%、50%p                        //当为数值时，表示在当前View的左上角，即原点处加上50px，做为旋转点X坐标,                        //如果是50%;表示在当前控件的左上角加上自己宽度的50%做为旋转点X坐标;                        //如果是50%p，那么就是表示在当前控件的左上角加上父控件宽度的50%做为旋转点X坐标。//android:pivotYType： 确定动画在Y轴的中心位置类型。取值及意义跟android:pivotXType一样。//android:pivotYValue：旋转点Y轴坐标值，取值及意义跟android:pivotX一样。...View.startAnimation(mRotateAnimation);

pivotXType值效果 Animation.ABSOLUTE 默认值，围绕设置动画控件的左上角旋转与pivotXValue = 0,pivotYVaule = 0效果相同 Animation.RELATIVE_TO_PARENT 设置动画控件的左上角为坐标原点(0，0)，动画旋转轴的坐标为(parent.getWidth*pivotXValue,parent.getHeight*pivotYValue)[parent为view的父控件]负数向左(X轴)/上(Y轴)偏移，正数向右(X轴)/下(Y轴)偏移; Animation.RELATIVE_TO_SELF 设置动画控件的左上角为坐标原点(0，0)，动画旋转轴的坐标为(view.getWidth*pivotXValue,view.getHeight*pivotYValue)负数向左(X轴)/上(Y轴)偏移，正数向右(X轴)/下(Y轴)偏移;

XML文件写法

在res\anim目录下建一个动画文件rotate_tween.xml,该文件的内容如下：

    <?xml version="1.0" encoding= "utf-8"?>      <rotate xmlns:android="http://schemas.android.com/apk/res/android"               android:fromDegrees= "0"               android:toDegrees= "360"               android:pivotX= "50%"               android:pivotY= "50%"               >      </rotate>  <!-- android:interpolator=     动画差值器--><!-- android:duration        动画持续时间，以毫秒为单位 --><!-- android:fillAfter       如果设置为true，控件动画结束时，将保持动画最后时的状态--><!-- android:fillBefore      如果设置为true,控件动画结束时，还原到开始动画前的状态--><!-- android:fillEnabled     与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态--><!-- android:repeatCount     重复次数--><!-- android:repeatMode      重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。-->

// 在代码中这样调用Animation animation=AnimationUtils.loadAnimation(this, R.anim.rotate_tween);View.startAnimation(animation);或者用这种方式//View.setAnimation(animation);//animation.start();

RotateAnimation特有属性

android:fromDegrees：动画开始时旋转的角度位置，float类型，正值代表顺时针方向度数，负值代码逆时针方向度数android:toDegrees: 动画结束时旋转到的角度位置，float类型，正值代表顺时针方向度数，负值代码逆时针方向度数android:pivotX:旋转点X轴坐标，float类型，可以是数值、百分数、百分数p三种样式，比如50、50%、50%p，当为数值时，表示在当前View的左上角，即原点处加上50px，做为旋转点X坐标,如果是50%;表示在当前控件的左上角加上自己宽度的50%做为旋转点X坐标;如果是50%p，那么就是表示在当前控件的左上角加上父控件宽度的50%做为旋转点X坐标。android:pivotY:旋转点Y轴坐标，取值及意义跟android:pivotX一样。

ScaleAnimation(缩放动画)

Java代码写法

ScaleAnimation mScaleAnimation = ScaleAnimation(float fromX, float toX, float fromY,          float toY,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue);// float fromX 动画起始时 X坐标上的伸缩尺寸 比如1.0代表自身无变化，0.5代表起始时缩小一倍，2.0代表放大一倍// float toX 动画结束时 X坐标上的伸缩尺寸   // float fromY 动画起始时Y坐标上的伸缩尺寸   // float toY 动画结束时Y坐标上的伸缩尺寸   //android:pivotXType： 确定动画在X轴的中心位置类型。与下面的pivotXValue结合，确定X轴上缩放中心点。。(取值见下表)// float pivotXValue 动画相对于物件的X坐标的开始位置   // int pivotYType 动画在Y轴相对于物件位置类型   // float pivotYValue 动画相对于物件的Y坐标的开始位置   ...View.startAnimation(mScaleAnimation);

pivotXType值效果 Animation.ABSOLUTE 默认值，设置动画控件从左上角缩放，与pivotXValue = 0,pivotYVaule = 0效果相同 Animation.RELATIVE_TO_PARENT 设置动画控件的左上角为坐标原点(0，0)，动画缩放点的坐标为(parent.getWidth*pivotXValue,parent.getHeight*pivotYValue)【parent为view的父控件】负数向左(X轴)/上(Y轴)偏移，正数向右(X轴)/下(Y轴)偏移; Animation.RELATIVE_TO_SELF 设置动画控件的左上角为坐标原点(0，0)，动画所放点的坐标为(view.getWidth*pivotXValue,view.getHeight*pivotYValue)负数向左(X轴)/上(Y轴)偏移，正数向右(X轴)/下(Y轴)偏移;

XML文件写法

<?xml version="1.0" encoding= "utf-8"?>   <scale xmlns:android="http://schemas.android.com/apk/res/android"         android:fromXScale= "2.0"         android:toXScale= "1.0"         android:fromYScale= "2.0"         android:toYScale= "1.0"         android:pivotX= "50%"         android:pivotY= "50%"         >  </scale> <!-- android:interpolator=     动画差值器--><!-- android:duration        动画持续时间，以毫秒为单位 --><!-- android:fillAfter       如果设置为true，控件动画结束时，将保持动画最后时的状态--><!-- android:fillBefore      如果设置为true,控件动画结束时，还原到开始动画前的状态--><!-- android:fillEnabled     与android:fillBefore 效果相同，都是在动画结束时，将控件还原到初始化状态--><!-- android:repeatCount     重复次数--><!-- android:repeatMode      重复类型，有reverse和restart两个值，reverse表示倒序回放，restart表示重新放一遍，必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型，即回放时的动作。-->

// 在代码中这样调用Animation animation=AnimationUtils.loadAnimation(this, R.anim.rotate_tween);View.startAnimation(animation);或者用这种方式//View.setAnimation(animation);//animation.start();

ScaleAnimation特有属性

android:fromXScale起始的X方向上相对自身的缩放比例,类型float，比如1.0代表自身无变化，0.5代表起始时缩小一倍，2.0代表放大一倍android:toXScale:结尾的X方向上相对自身的缩放比例,类型floatandroid:fromYScale:起始的Y方向上相对自身的缩放比例,类型floatandroid:toYScale:结尾的Y方向上相对自身的缩放比例,类型floatandroid:pivotX: 缩放起点X轴坐标，可以是数值、百分数、百分数p ,具体意义roate中已经演示android:pivotY:缩放起点Y轴坐标，取值及意义与pivotX一样

补间动画设置动画监听事件

mAnimation.setAnimationListener(new AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {                //在动画开始时执行处理            }            @Override            public void onAnimationRepeat(Animation animation) {                //在动画重复时执行处理            }            @Override            public void onAnimationEnd(Animation animation) {                //在动画完成后执行处理            }        });

AnimationSet

AnimationSet 可以让许多个动画在同一时间开始(也就是动画的叠加)
注意 : AnimationSet 和 AnimatorSet 注意区分区别，这里只做AnimationSet讲解。下篇博客讲解AnimatorSet

Java 代码写法

    //创建动画，参数表示他的子动画是否共用一个插值器        AnimationSet animationSet = new AnimationSet(true);        //添加动画（可以添加多个，每个动画都可以单独设置属性）        animationSet.addAnimation(new AlphaAnimation(1.0f, 0.0f));        animationSet.addAnimation(new TranslateAnimation(0,120 , 0, -300));        //设置插值器        animationSet.setInterpolator(new LinearInterpolator());        //设置动画持续时长        animationSet.setDuration(3000);        //设置动画结束之后是否保持动画的目标状态        animationSet.setFillAfter(true);        //设置动画结束之后是否保持动画开始时的状态        animationSet.setFillBefore(false);        //设置重复模式        animationSet.setRepeatMode(Animation.REVERSE);        //设置重复次数        animationSet.setRepeatCount(Animation.INFINITE);        //设置动画延时时间        animationSet.setStartOffset(2000);        //取消动画        animationSet.cancel();        //释放资源        animationSet.reset();        //开始动画        mIvImg.startAnimation(animationSet);

XML文件写法

文件目录：res/anim/animation_set.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:interpolator="@android:anim/linear_interpolator"    android:shareInterpolator="true">    <alpha        android:duration="2000"        android:fillAfter="true"        android:fillBefore="false"        android:fromAlpha="1.0"        android:repeatCount="-1"        android:repeatMode="reverse"        android:toAlpha="0.0"/>    <rotate        android:duration="2000"        android:fillAfter="true"        android:fillBefore="false"        android:fromDegrees="0"        android:pivotX="50%"        android:pivotY="50%"        android:repeatCount="-1"        android:repeatMode="reverse"        android:toDegrees="360"/>    <set        android:interpolator="@android:anim/bounce_interpolator"        android:shareInterpolator="true"        android:startOffset="1000">        <scale            android:duration="2000"            android:fillAfter="true"            android:fillBefore="false"            android:fromXScale="1.0"            android:fromYScale="1.0"            android:pivotX="50%"            android:pivotY="50%"            android:repeatCount="-1"            android:repeatMode="reverse"            android:toXScale="2.0"            android:toYScale="2.0"/>        <translate            android:duration="2000"            android:fillAfter="true"            android:fillBefore="false"            android:fromXDelta="0"            android:fromYDelta="0"            android:repeatCount="-1"            android:repeatMode="reverse"            android:toXDelta="200%"            android:toYDelta="200%"/>    </set></set>

Java代码中调用   AnimationSet animationSet = (AnimationSet)                  AnimationUtils.loadAnimation(XmlViewAnimationActivity.this, R.anim.animation_set); View.startAnimation(animationSet);

差值器效果

AccelerateDecelerateInterpolator============动画开始与结束的地方速率改变比较慢，在中间的时候加速。AccelerateInterpolator===================动画开始的地方速率改变比较慢，然后开始加速。AnticipateInterpolator ==================开始的时候向后然后向前甩。AnticipateOvershootInterpolator=============开始的时候向后然后向前甩一定值后返回最后的值。BounceInterpolator=====================动画结束的时候弹起。CycleInterpolator======================动画循环播放特定的次数，速率改变沿着正弦曲线。DecelerateInterpolator===================在动画开始的地方快然后慢。LinearInterpolator======================以常量速率改变。OvershootInterpolator====================向前甩一定值后再回到原来位置。PathInterpolator========================新增的，就是可以定义路径坐标，然后可以按照路径坐标来跑动；注意其坐标并不是 XY，而是单方向，也就是我可以从0~1，然后弹回0.5 然后又弹到0.7 有到0.3，直到最后时间结束。

阅读全文

0 0