Animation动画之View Animation(补间动画)

Animation动画之View Animation(补间动画)

效果图

Alpha淡入淡出                            Scale缩放         

Rotate旋转         Translate移动

Animation动画分类

View Animation: 视图动画在古老的Android版本系统中就已经提供了，只能被用来设置View的动画。

Drawable Animation: 这种动画(也叫Frame动画、帧动画)其实可以划分到视图动画的类别，专门用来一个一个的显示Drawable的resources，就像放幻灯片一样。

Property Animation: 属性动画只对Android 3.0(API 11)以上版本的Android系统才有效，这种动画可以设置给任何Object，包括那些还没有渲染到屏幕上的对象。这种动画是可扩展的，可以让你自定义任何类型和属性的动画。 

一.View Animation(视图动画)使用详解

1.视图动画概述:视图动画，也叫Tween(补间)动画可以在一个视图容器内执行一系列简单变换(位置、大小、旋转、透明度)。譬如，如果你有一个TextView对象，您可以移动、旋转、缩放、透明度设置其文本，当然，如果它有一个背景图像，背景图像会随着文本变化。补间动画通过XML或Android代码定义，建议使用XML文件定义，因为它更具可读性、可重用性。如下是视图动画相关的类继承关系: 

Animation属性详解

2.代码演示详解

activity_main

<?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:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.chenxiaoyang.aninmatin.MainActivity">    <ImageView        android:id="@+id/image_view"        android:layout_width="200dp"        android:layout_height="260dp"        android:layout_centerInParent="true"        android:background="@drawable/cxy"/>    <Button        android:id="@+id/Alpha"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="Alpha淡入淡出"        android:textAllCaps="false"/>    <Button        android:id="@+id/Rotate"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:text="Rotate旋转"        android:textAllCaps="false"/>    <Button        android:id="@+id/Translate"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:text="Translate移动"        android:textAllCaps="false"/>    <Button        android:id="@+id/Scale"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentLeft="true"        android:text="Scale缩放"        android:textAllCaps="false"/></RelativeLayout>

MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private ImageView mImageView;    private Button mButtonAlpha, mButtonScale,mButtonRotate,mButtonTranslate;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mImageView = (ImageView) findViewById(R.id.image_view);        mButtonAlpha = (Button) findViewById(R.id.Alpha);        mButtonAlpha.setOnClickListener(this);        mButtonScale = (Button) findViewById(R.id.Scale);        mButtonScale.setOnClickListener(this);        mButtonRotate = (Button) findViewById(R.id.Rotate);        mButtonRotate.setOnClickListener(this);        mButtonTranslate = (Button) findViewById(R.id.Translate);        mButtonTranslate.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.Alpha:                //创建一个AnimationSet对象，参数为Boolean型                //true表示使用Animation的interpolator，false则是使用自己的                AnimationSet animationSet1=new AnimationSet(true);                //创建一个AlphaAnimation对象，参数从完全的透明度，到完全的不透明                AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);                //设置动画执行的时间                alphaAnimation.setDuration(5000);                //将alphaAnimation对象添加到AnimationSet当中                animationSet1.addAnimation(alphaAnimation);                //使用ImageView的startAnimation方法执行动画                mImageView.startAnimation(animationSet1);                break;            case R.id.Scale:                AnimationSet animationSet2 = 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);                animationSet2.addAnimation(scaleAnimation);                mImageView.startAnimation(animationSet2);                break;            case R.id.Rotate:                AnimationSet animationSet3 = new AnimationSet(true);                //参数1：从哪个旋转角度开始                //参数2：转到什么角度                //后4个参数用于设置围绕着旋转的圆的圆心在哪里                //参数3：确定x轴坐标的类型，有ABSOLUT绝对坐标、RELATIVE_TO_SELF相对于自身坐标、                //RELATIVE_TO_PARENT相对于父控件的坐标                //参数4：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴                //参数5：确定y轴坐标的类型                //参数6：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴                RotateAnimation rotateAnimation = new RotateAnimation(                        0, 360,                        Animation.RELATIVE_TO_SELF,0.5f,                        Animation.RELATIVE_TO_SELF,0.5f);                rotateAnimation.setDuration(5000);                animationSet3.addAnimation(rotateAnimation);                mImageView.startAnimation(animationSet3);                break;            case R.id.Translate:                AnimationSet animationSet4 = new AnimationSet(true);                //参数1～2：x轴的开始位置                //参数3～4：y轴的开始位置                //参数5～6：x轴的结束位置                //参数7～8：x轴的结束位置                TranslateAnimation translateAnimation=new TranslateAnimation(                        Animation.RELATIVE_TO_SELF,1f,                        Animation.RELATIVE_TO_SELF,0f,                        Animation.RELATIVE_TO_SELF,1f,                        Animation.RELATIVE_TO_SELF,0f);                translateAnimation.setDuration(5000);                animationSet4.addAnimation(translateAnimation);                mImageView.startAnimation(animationSet4);                break;        }    }}

Tween Animations的通用方法

　　１.setDuration(long durationMills)
　　设置动画持续时间（单位：毫秒）
　　２.setFillAfter(Boolean fillAfter)
　　如果fillAfter的值为true,则动画执行后，控件将停留在执行结束的状态
　　３.setFillBefore(Boolean fillBefore)

      如果fillBefore的值为true，则动画执行后，控件将回到动画执行之前的状态
　　４.setStartOffSet(long startOffSet)
　　设置动画执行之前的等待时间
　　５.setRepeatCount(int repeatCount)
　　设置动画重复执行的次数

在代码中使用Animations可以很方便的调试、运行，但是代码的可重用性差，重复代码多。同样可以在xml文件中配置Animations，这样做可维护性变高了，只不过不容易进行调试。

一.在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:duration="500"        android:fromAlpha="1.0"        android:startOffset="500"        android:toAlpha="0.0"/></set>

4.在代码当中使用AnimationUtils当中装载xml文件，并生成Animation对象。因为Animation是AnimationSet的子类，所以向上转型，用Animation对象接收。

Animation animation = AnimationUtils.loadAnimation(        Animation1Activity.this, R.anim.alpha);// 启动动画image.startAnimation(animation);

二.具体实现

1.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">    <!-- fromAlpha和toAlpha是起始透明度和结束时透明度 -->    <alpha        android:fromAlpha="1.0"        android:toAlpha="0.0"        android:startOffset="500"        android:duration="500"/></set>

2.rotate.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_interpolator">    <!--       fromDegrees:开始的角度       toDegrees：结束的角度，+表示是正的       pivotX：用于设置旋转时的x轴坐标       例           1)当值为"50"，表示使用绝对位置定位           2)当值为"50%"，表示使用相对于控件本身定位           3)当值为"50%p"，表示使用相对于控件的父控件定位        pivotY：用于设置旋转时的y轴坐标      -->    <rotate        android:duration="1000"        android:fromDegrees="0"        android:pivotX="50%"        android:pivotY="50%"        android:toDegrees="+360"/></set>

3.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">    <!--                x轴的初始值                x轴收缩后的值                y轴的初始值                y轴收缩后的值                确定x轴坐标的类型                x轴的值，0.5f表明是以自身这个控件的一半长度为x轴                确定y轴坐标的类型                y轴的值，0.5f表明是以自身这个控件的一半长度为x轴    -->    <scale        android:duration="1000"        android:fromXScale="1.0"        android:fromYScale="1.0"        android:pivotX="50%"        android:pivotY="50%"        android:toXScale="0.0"        android:toYScale="0.0"/></set>

4.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">    <!--         开始x轴坐标         终止x轴坐标         开始y轴坐标         终止y轴坐标    -->    <translate        android:duration="2000"        android:fromXDelta="0%"        android:fromYDelta="0%"        android:toXDelta="100%"        android:toYDelta="100%"/></set>