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">
    
    <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">
    
    <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">
    
    <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">
    
    <translate
        android:duration="2000"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%"/>
set>