Android三种常用动画分享(2)--补间动画
Animations
一、Animations介绍
Animations是一个实现android UI界面动画效果的API，Animations提供了一系列的动画效果，可以进行旋转、缩放、淡入淡出等，这些效果可以应用在绝大多数的控件中。
Tweened Animations：该类Animations提供了旋转、移动、伸展和淡出等效果。Alpha——淡入淡出，Scale——缩放效果，Rotate——旋转，Translate——移动效果。
和帧动画一样使用也有2种方式，xml和代码设置。
Android的animation由四种类型组成：alpha、scale、translate、rotate
XML配置文件中
Java Code代码中
安卓中对于多种动画效果同时执行也考虑到了，那就是AnimationSet（AnimationSet是Animation的子类），只要将Animation种类放入到AnimationSet中然后执行AnimationSet即可。
一.代码中实现动画(代码中有详细的注释)
Animations的通用方法
１、setDuration(long durationMills) 设置动画持续时间（单位：毫秒）
２、setFillAfter(Boolean fillAfter) 如果fillAfter的值为true,则动画执行后，控件将停留在执行结束的状态
３、setFillBefore(Boolean fillBefore) 如果fillBefore的值为true，则动画执行后，控件将回到动画执行之前的状态
４、setStartOffSet(long startOffSet) 设置动画执行之前的等待时间
５、setRepeatCount(int repeatCount) 设置动画重复执行的次数
6、setInterpolator(Interpolator interpolator) 设置动画插入器
Interpolator的具体使用方法
Interpolator定义了动画变化的速率，在Animations框架当中定义了一下几种Interpolator
? AccelerateDecelerateInterpolator：在动画开始与结束的地方速率改变比较慢，在中间的时候速率快。
? AccelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始加速
? CycleInterpolator：动画循环播放特定的次数，速率改变沿着正弦曲线
? DecelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始减速
? LinearInterpolator：动画以均匀的速率改变
分为以下几种情况：
1、在set标签中
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"/>
2、如果在一个set标签中包含多个动画效果，如果想让这些动画效果共享一个Interpolator。
android:shareInterpolator="true"
3、如果不想共享一个interpolator，则设置android:shareInterpolator="true"，并且需要在每一个动画效果处添加interpolator。
<alpha
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="500"/>
4、如果是在代码上设置共享一个interpolator，则可以在AnimationSet设置interpolator。
AnimationSet animationSet = newAnimationSet(true);
animationSet.setInterpolator(new AccelerateInterpolator());
5、如果不设置共享一个interpolator则可以在每一个Animation对象上面设置interpolator。
AnimationSet animationSet = newAnimationSet(false);
alphaAnimation.setInterpolator(new AccelerateInterpolator());
rotateAnimation.setInterpolator(new DecelerateInterpolator());
下边是代码
AnimationByCode.java
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.widget.SearchViewCompat.OnCloseListenerCompat;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.Interpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationByCode extends Activity {
private Button rotateButton, scaleButton, alphaButton, translateButton,
animationSetButton,animationByXMLButton;
private ImageView image = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rotateButton = (Button) findViewById(R.id.rotateButton);
scaleButton = (Button) findViewById(R.id.scaleButton);
alphaButton = (Button) findViewById(R.id.alphaButton);
translateButton = (Button) findViewById(R.id.translateButton);
animationSetButton = (Button) findViewById(R.id.animationSet);
animationByXMLButton = (Button) findViewById(R.id.animationByXML);
image = (ImageView) findViewById(R.id.image);
rotateButton.setOnClickListener(new RotateButtonListener());
scaleButton.setOnClickListener(new ScaleButtonListener());
alphaButton.setOnClickListener(new AlphaButtonListener());
translateButton.setOnClickListener(new TranslateButtonListener());
animationByXMLButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(AnimationByCode.this, AnimationByXML.class);
startActivity(intent);
}
});
animationSetButton.setOnClickListener(new AnimationSetButtonListener());
}
/**
* 旋转动画
*
* @author Administrator
*/
private class RotateButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
AnimationSet animationSet = new AnimationSet(true);
// 参数1：从哪个旋转角度开始(顺时针为正数、逆时针为负数)
// 参数2：转到什么角度
// 后4个参数用于设置围绕着旋转的圆的圆心在哪里
// 参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、RELATIVE_TO<span style="white-space:pre"> </span>_PARENT相对于父控件的坐标
// 参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
// 参数5：确定y轴坐标的类型
// 参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为y轴
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//设置动画插入器
//AccelerateDecelerateInterpolator：动画开始与结束的地方速率改变慢，在中间时候速率快。
//AccelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始加速
//CycleInterpolator：动画循环播放特定的次数，速率改变沿着正弦曲线
//DecelerateInterpolator：在动画开始的地方速率改变比较慢，然后开始减速
//LinearInterpolator：动画以均匀的速率改变
rotateAnimation.setInterpolator(new AccelerateInterpolator());
rotateAnimation.setDuration(1000);// 动画执行时间
rotateAnimation.setFillAfter(true);// 动画执行后停留在执行完毕的位置
animationSet.addAnimation(rotateAnimation);
image.startAnimation(rotateAnimation);
}
}
/**
* 缩放动画
*
* @author Administrator
*/
private class ScaleButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
AnimationSet animationSet = new AnimationSet(true);
// 参数1：x轴的初始值
// 参数2：x轴收缩后的值
// 参数3：y轴的初始值
// 参数4：y轴收缩后的值
// 参数5：确定x轴坐标的类型
// 参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
// 参数7：确定y轴坐标的类型
// 参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
ScaleAnimation scaleAnimation = new ScaleAnimation(0, 0.1f, 0,
0.1f, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(1000);
animationSet.addAnimation(scaleAnimation);
image.startAnimation(scaleAnimation);
}
}
/**
* 淡入淡出动画
*
* @author Administrator
*/
private class AlphaButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
// 创建一个AnimationSet对象，参数为Boolean型，
// true表示使用Animation的interpolator，false则是使用自己的
AnimationSet animationSet = new AnimationSet(true);
// 创建一个AlphaAnimation对象，参数从完全的透明度，到完全的不透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
// 设置动画执行的时间
alphaAnimation.setDuration(500);
// 将alphaAnimation对象添加到AnimationSet当中
animationSet.addAnimation(alphaAnimation);
// 使用ImageView的startAnimation方法执行动画
image.startAnimation(alphaAnimation);
}
}
/**
* 位移动画动画
*
* @author Administrator
*/
private class TranslateButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
AnimationSet animationSet = new AnimationSet(true);
// 参数1～2：x轴的开始位置
// 参数3～4：y轴的开始位置
// 参数5～6：x轴的结束位置
// 参数7～8：x轴的结束位置
TranslateAnimation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f);
translateAnimation.setDuration(1000);
animationSet.addAnimation(translateAnimation);
image.startAnimation(translateAnimation);
}
}
/**
* 执行多种动画集合
* @author Administrator
*
*/
private class AnimationSetButtonListener implements OnClickListener{
@Override
public void onClick(View v) {
//定义动画集合
AnimationSet animationSet = new AnimationSet(true);
//定义旋转动画
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//rotateAnimation.setFillAfter(true);// 动画执行后停留在执行完毕的位置
TranslateAnimation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF,
0.5f, Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 0.5f);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.setDuration(1000);
animationSet.setFillAfter(true);
image.startAnimation(animationSet);
}
}
}
二.XML文件中设置动画
在xml中使用Animations步骤
1.在res文件夹下建立一个anim文件夹；
2.创建xml文件，并首先加入set标签，更改标签：
3.在该标签当中加入rotate，alpha，scale或者translate标签如下；
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="500"/>
</set>
4.在代码当中使用AnimationUtils当中装载xml文件，并生成Animation对象。因为Animation是AnimationSet的子类，所以向上转型，用Animation对象接收。
<span style="white-space:pre"> </span>// 使用AnimationUtils装载动画配置文件 <span style="white-space:pre"> </span>Animation anim_rotate = AnimationUtils.loadAnimation( <span style="white-space:pre"> </span>AnimationByXML.this, R.anim.anim_rotate); <span style="white-space:pre"> </span>// 启动动画 <span style="white-space:pre"> </span>image.startAnimation(anim_rotate);
看下具体代码实现(代码中有各个属性详细的注释)：
1.淡入淡出动画XML==》anim_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!--
透明度控制动画效果 alpha
浮点型值：
fromAlpha 属性为动画起始时透明度
toAlpha 属性为动画结束时透明度
说明:
0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之间的float数据类型的数字
长整型值：
duration 属性为动画持续时间
说明:
时间以毫秒为单位
-->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="500"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<!--
rotate 旋转动画效果
属性：interpolator 指定一个动画的插入器
在我试验过程中，使用android.res.anim中的资源时候发现
有三种动画插入器:
accelerate_decelerate_interpolator 加速-减速 动画插入器
accelerate_interpolator 加速-动画插入器
decelerate_interpolator 减速- 动画插入器
其他的属于特定的动画效果
浮点数型值:
fromDegrees 属性为动画起始时物件的角度
toDegrees 属性为动画结束时物件旋转的角度 可以大于360度
说明:
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数from——to正数:顺时针旋转)
(负数from——to负数:逆时针旋转)
(正数from——to正数:顺时针旋转)
(正数from——to负数:逆时针旋转)
pivotX 属性为动画相对于物件的X坐标的开始位置
pivotY 属性为动画相对于物件的Y坐标的开始位置
说明:以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置
长整型值：
duration 属性为动画持续时间
说明:时间以毫秒为单位
-->
<rotate
android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:duration="1000"/>
</set>
3.缩放动画XML==》anim_scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator" >
<!--
尺寸伸缩动画效果 scale
属性：interpolator 指定一个动画的插入器
在我试验过程中，使用android.res.anim中的资源时候发现
有三种动画插入器:
accelerate_decelerate_interpolator 加速-减速 动画插入器
accelerate_interpolator 加速-动画插入器
decelerate_interpolator 减速- 动画插入器
其他的属于特定的动画效果
浮点型值：
fromXScale 属性为动画起始时 X坐标上的伸缩尺寸
toXScale 属性为动画结束时 X坐标上的伸缩尺寸
fromYScale 属性为动画起始时Y坐标上的伸缩尺寸
toYScale 属性为动画结束时Y坐标上的伸缩尺寸
说明:
以上四种属性值
0.0表示收缩到没有
1.0表示正常无伸缩
值小于1.0表示收缩
值大于1.0表示放大
pivotX 属性为动画相对于物件的X坐标的开始位置
pivotY 属性为动画相对于物件的Y坐标的开始位置
说明:
以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置
长整型值：duration 属性为动画持续时间
说明:时间以毫秒为单位
布尔型值:fillAfter 属性 当设置为true ，该动画转化在动画结束后被应用
-->
<scale
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="true"
android:duration="1000"/>
</set>
4.位移动画XML==》anim_translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator" >
<!--
fromXDelta 始x轴坐标
toXDelta 止x轴坐标
fromYDelta 始y轴坐标
toYDelta 止y轴坐标
interpolator 动画插入器
accelerate_decelerate_interpolator 加速-减速 动画插入器
accelerate_interpolator 加速-动画插入器
decelerate_interpolator 减速- 动画插入器
-->
<translate
android:fromXDelta="0%"
android:toXDelta="100%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:duration="2000"/>
</set>
5.执行动画集合的XML==》anim_set.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<!-- fromAlpha和toAlpha是起始透明度和结束时透明度 -->
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="500"
android:duration="500"/>
<translate
android:fromXDelta="0%"
android:toXDelta="100%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="2000"/>
</set>
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.widget.SearchViewCompat.OnCloseListenerCompat;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class AnimationByXML extends Activity {
private Button rotateButton, scaleButton, alphaButton, translateButton,
animationSetButton, animationByXMLButton;
private ImageView image = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rotateButton = (Button) findViewById(R.id.rotateButton);
scaleButton = (Button) findViewById(R.id.scaleButton);
alphaButton = (Button) findViewById(R.id.alphaButton);
translateButton = (Button) findViewById(R.id.translateButton);
animationSetButton = (Button) findViewById(R.id.animationSet);
animationByXMLButton = (Button) findViewById(R.id.animationByXML);
image = (ImageView) findViewById(R.id.image);
rotateButton.setOnClickListener(new RotateButtonListener());
scaleButton.setOnClickListener(new ScaleButtonListener());
alphaButton.setOnClickListener(new AlphaButtonListener());
translateButton.setOnClickListener(new TranslateButtonListener());
animationSetButton.setOnClickListener(new AnimationSetButtonListener());
}
/**
* 旋转动画
*
* @author Administrator
*/
private class RotateButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
// 使用AnimationUtils装载动画配置文件
Animation anim_rotate = AnimationUtils.loadAnimation(
AnimationByXML.this, R.anim.anim_rotate);
// 启动动画
image.startAnimation(anim_rotate);
}
}
/**
* 缩放动画
*
* @author Administrator
*/
private class ScaleButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
// 使用AnimationUtils装载动画配置文件
Animation anim_scale = AnimationUtils.loadAnimation(
AnimationByXML.this, R.anim.anim_scale);
// 启动动画
image.startAnimation(anim_scale);
}
}
/**
* 淡入淡出动画
*
* @author Administrator
*/
private class AlphaButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
// 使用AnimationUtils装载动画配置文件
Animation anim_alpha = AnimationUtils.loadAnimation(
AnimationByXML.this, R.anim.anim_alpha);
// 启动动画
image.startAnimation(anim_alpha);
}
}
/**
* 位移动画动画
*
* @author Administrator
*/
private class TranslateButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
Animation anim_translate = AnimationUtils.loadAnimation(
AnimationByXML.this, R.anim.anim_translate);
image.startAnimation(anim_translate);
}
}
/**
* 执行多种动画集合
*
* @author Administrator
*
*/
private class AnimationSetButtonListener implements OnClickListener {
@Override
public void onClick(View v) {
// 使用AnimationUtils装载动画配置文件
Animation animation = AnimationUtils.loadAnimation(
AnimationByXML.this, R.anim.anim_set);
// 启动动画
image.startAnimation(animation);
}
}
}
效果图：
