Android动画解析（一）

• view动画有四种类型，分别是AlphaAnimation(透明度动画)、ScaleAnimation（缩放动画）、TranslateAnimation（平移动画）、RotateAnimation（旋转动画）。

1.概述

• view动画使用的场景不多可以做了解使用。因为view动画的一个特性就是做了平移或者缩放动画之后，view的真实位置没有随动画而改变。

• 使用方式有两种。一种是xml方式，一种是直接在代码中创建。使用xml的方式需要在res-anim（如果没有anim文件夹，请手动新建）下新建一个xml文件。一种是直接在代码里创建对应的动画对象。

2.AlphaAnimation

（1）xml方式

在res-anim下新建 alpha_anim.xml文件（名称自己随意），有三个属性，duration、 fromAlpha、 toAlpha。其中duration是动画通用属性，为动画执行的周期，默认值为0，单位毫秒， fromAlpha:动画开始透明度 toAlpha:动画结束时的透明度。取值范围都为0.0f-1.0f,0.0f是全透明，1.0f为不透明。

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!--保留动画执行后的view状态--!>
    <alpha
        android:duration="2000"  动画执行周期 单位毫秒
        android:fromAlpha="1.0"  动画开始透明度 float
        android:toAlpha="0.1"    动画结束透明度 float
    />
    
</set>
复制代码

接着使用Animationutils加载动画文件，配置属性，startAnimation开始动画。（ps:animationView是做动画的view）

Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim); 加载动画xml文件
animationView.startAnimation(animation); 开始动画
复制代码

(2) 代码方式

我们创建一个从完全透明到完全显示的动画。使用这个构造方法public AlphaAnimation(float fromAlpha, float toAlpha)。setDuration(long durationMillis)方法设置动画周期。

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
alphaAnimation.setDuration(5000);
alphaAnimation.setFillAfter(true);
animationView.startAnimation(alphaAnimation);
复制代码

3.RotateAnimation

（1）xml方式

<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
    android:fromDegrees="360" 动画开始角度
    android:toDegrees="180" 动画结束角度
    android:pivotX="50%"    旋转中心点X坐标
    android:pivotY="50%"   旋转中心点Y坐标
    android:duration="5000" 周期
    />
</set>
复制代码

• [1] 关于旋转角度的理解，正数是顺时针旋转，负数是逆时针。那傻瓜点理解view最终旋转方向就可以简单理解为:animDegrees =toDegrees-fromDegrees,animDegrees为正数是顺时针，负数则是逆时针。
• [2] pivotX和pivotY取值。有三种写法分别是‘50’，‘50%’，‘50p%’。参考的坐标系均为当前动画的view。以pivotX为例，pivotY同pivotX。 ‘50’是x的坐标值是5px。‘50%’是取当前动画view的宽度的50%作为x的坐标值。‘50%p’是取当前动画view的父view的宽度的50%作为x方向的坐标值。

(2) 代码方式

• RotateAnimation有四个构造方法。其中public RotateAnimation(Context context, AttributeSet attrs)这个构造方法不做研究，有兴趣的可以查看源码。这里以6个参数的构造方法距离。因为另外两个构造方法也是调用的这个构造方法。

RotateAnimation rotateAnimation = new RotateAnimation(0,360f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 rotateAnimation.setDuration(5000);
 rotateAnimation.setFillAfter(true);
 animationView.startAnimation(rotateAnimation);
  
复制代码

• public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,int pivotYType, float pivotYValue)。使用另外两个构造方法时，其中pivotXType和pivotYType的默认值是Animation.ABSOLUTE，pivotXValue和pivotYValue的默认值是0.0f。重点说一下pivotXType和pivotYType这两个参数。以pivotXType举例，pivotYType同pivotYType。

(3) pivotXType/pivotYType

• 取值为三个， 分别是Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT，这三者的坐标系都是view的坐标系，即当前view的左上角为原点（0，0）。以下举例都是以当前view的中心点为起点。

• (1) 取值为 Animation.ABSOLUTE时，pivotXValue取值是具体的坐标值。例如，要做动画的view宽高分别是100px，100px，pivotXValue和pivotYValue，分别取值为50px，50px.

• (2) 取值为 Animation.RELATIVE_TO_SELF时，pivotXValue取值是0.0-1.0f,该数值是当前view的宽度的倍数。例如，要做动画的view宽高分别是100、100(没用，看看就好)，pivotXValue和pivotYValue，分别取值为0.5f，0.5f。

• (3) 取值为 Animation.RELATIVE_TO_PARENT时，pivotXValue取值是0.0-1.0f,该数值是当前view的宽度的倍数。例如，要做动画的view宽高分别是100、100，父view的的宽高分别是500、500。view在父控件中居中，那么pivotXValue和pivotYValue，分别取值为0.1f，0.1f。

4.ScaleAnimation

(1) xml方式 废话不多说，直接上代码。

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:duration="5000" 周期
        android:fromXScale="1.0" X轴方向上的开始大小 
        android:fromYScale="1.0" Y轴方向上的开始大小 
        android:pivotX="50%" 缩放中心点X坐标
        android:pivotY="50%" 缩放中心点Y坐标
        android:toXScale="0.1" X轴方向上的结束大小 
        android:toYScale="0.1" Y轴方向上的结束大小 
        />
</set>
复制代码

说下fromXScale、fromYScale、toXScale、toYScale、pivotX、pivotY四个属性的取值请参考RotateAnimation的pivotX和pivotY取值讲解。例如把一个view以view中心为缩放中心，从原来大小放大2倍。fromXScale取值是1.0或者100%，fromYScale取值是1.0或者100%，toXScale取值是2.0或者200%，toYScale的取值是2.0或者200%。至于pivotX和pivotY属性请参考RotateAnimation相关部分。

(2)代码方式 同样以放大2倍为示例。使用8个参数的构造方法，通过参数名就能一目了然。

public ScaleAnimation(float fromX, float toX, float fromY, float toY,
    int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
    
复制代码

ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
 scaleAnimation.setDuration(5000);
 scaleAnimation.setFillAfter(true);
 animationView.startAnimation(scaleAnimation);
复制代码

5.TranslateAnimation

• (1)xml方式

fromXDelta X轴上的开始坐标, fromYDelta Y轴上的结束坐标, toXDelta X轴上的开始坐标, toYDelta Y轴上的结束坐标。 以上四个属性的取值请参考RotateAnimation的pivotX和pivotY讲解部分。

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
   android:fromXDelta="0"
   android:fromYDelta="0"
   android:toXDelta="100"
   android:toYDelta="100"
   android:duration="5000"
    />
</set>

复制代码

• (2)代码方式 使用8个参数的构造方法举例。

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)

复制代码

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f,Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f);
translateAnimation.setDuration(5000);
translateAnimation.setFillAfter(true);
animationView.startAnimation(translateAnimation);

复制代码

6.动画可以配合一起使用。

• (1) xml方式 在set标签下，加入你想要的动画类型。例如：

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="5000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        />

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="10%p"
        android:pivotY="10%p"
        android:duration="5000"
        />

    <scale
        android:duration="5000"
        android:fromXScale="100%"
        android:fromYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="100%p"
        android:toYScale="100%p"
        />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100"
        android:duration="5000"
        />
</set>

复制代码

• (2）代码方式

使用AnimationSet这个类。构造方法为 public AnimationSet(boolean shareInterpolator)，参数表示是否使用共享的时间插值器。

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
alphaAnimation.setDuration(5000);
alphaAnimation.setFillAfter(true);

TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f,
Animation.RELATIVE_TO_SELF,0.0f,Animation.RELATIVE_TO_SELF,1.0f);
translateAnimation.setDuration(5000);
translateAnimation.setFillAfter(true);

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);
animationSet.setDuration(5000);
animationSet.setFillAfter(true);
animationView.startAnimation(animationSet);

复制代码

7.简单介绍下动画的一些属性或者方法。

• [1] repeatMode和repeatCount。repeatMode是重复方式，有两个固定值，xml文件里是restart、reverse。restart是动画重头开始执行，reverse是动画相反着执行,都很好理解。需要注意的一个地方就是在使用AnimationSet或者在xml文件定义多个动画执行的时候，需要单独给每个动画设置这两个属性，给AnimationSet或者xml里set标签设置这两个属性是不生效的！！

• [2] 时间插值器 (Interpolator)

关于插值器这块内容可以参考 HenCoder Android 自定义 View 1-6：属性动画 Property Animation（上手篇） 。

• [3] setAnimationListener为动画设置监听

animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //动画开始
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            //动画重复

            }
        });
复制代码

8.一些使用场景举例

• （1）用于activity跳转(dialog、popupwindow同理)

我们做一个OneActivity从顶部出去，TwoActicity从底部进入，关闭TwoActivity从底部出去，OneActivity从顶部进来的动画。分别创建四个动画文件，top_out.xml、top_in.xml、bottom_out.xml和bottom_in.xml。代码分别是

top_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="0%p"
        android:toYDelta="-100%p"/>
</set>
复制代码

top_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="-100%p"
        android:toYDelta="0%p"/>
</set>
复制代码

bottom_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="0%p"
        android:toYDelta="100%p"/>
</set>
复制代码

bottom_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromYDelta="100%p"
        android:toYDelta="0%p"/>
</set>
复制代码

然后创建两个activity,OneActivity和TwoActivity,代码分别是

public class OneActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
        Button button = findViewById(R.id.btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(OneActivity.this,TwoActivity.class);
                startActivity(intent);
                overridePendingTransition(R.anim.top_out,R.anim.bottom_in);
            }
        });
    }
}

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/btn"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="跳转TwoActivity"
        android:layout_width="match_parent"
        android:layout_height="50dp"/>

</android.support.constraint.ConstraintLayout>
复制代码

public class TwoActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_two);
    }

    @Override
    public void finish() {
        super.finish();
        overridePendingTransition(R.anim.bottom_out,R.anim.top_in);
    }
}

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:text="我是TwoActivity"/>

</android.support.constraint.ConstraintLayout>
复制代码

• （2）layoutanimation(ViewGroup加载内部view或者ViewGroup的动画)

有两个属性说下，animationOrder和delay。animationOrder:动画执行顺序。有三个值ORDER_NORMAL、ORDER_REVERSE、ORDER_RANDOM，默认值是有三个值ORDER_NORMAL，分别是顺序，倒序，随机。delay:动画的延迟，float类型，是你所有设置动画的duration的周期的倍数。内部计算公式为child animation delay = child index * delay * animation duration。

首先在res-anim创建一个动画文件，然后在创建一个layoutanimation的动画文件，在ViewGroup的属性设置android:layoutAnimation="@anim/right_layout_animation"，最后正常打开ViewGroup就可以显示动画啦。需要注意的是这个动画只能在layout文件里定义的view或者ViewGroup有效果。如果在代码里使用addview这个方法添加的view或者ViewGroup都不会生效。即使给ViewGroup设置android:animateLayoutChanges="true",只会使用系统默认的动画，自己设置的动画不会生效！！代码如下

right_in_alpha.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="5000"
        android:fromXDelta="100%p"
        android:toXDelta="0%p"/>
    <alpha
        android:duration="5000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0"/>
</set>
复制代码

right_layout_animation.xml
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/right_in_alpha"
    android:animationOrder="normal"
    android:delay="0.5">

</layoutAnimation>
复制代码