高级UI-属性动画

在3.0以前，动画效果主要为补间动画(TweenAnimation)和帧动画(FrameAnimation)，从3.0开始加入了属性动画，其本质就是不断地改变控件的属性，从而达到复杂的动画效果，其效果也优于之前的动画效果，而且真正的实现了View动画

补间动画(Tween Animation)

渐变动画支持四种类型：平移（Translate）、旋转（Rotate）、缩放（Scale）、不透明度（Alpha）
只是显示的位置变动，View的实际位置未改变，表现为View移动到其他地方，点击事件仍在原处才能响应
组合使用步骤较复杂
View Animation 也是指此动画

帧动画(Frame Animation)

用于生成连续的Gif效果图
DrawableAnimation也是指此动画

属性动画(Property Animation)

支持对所有View能更新的属性的动画(需要属性的setXxx()和getXxx())
更改的是View实际的属性，所以不会影响其在动画执行后所在位置的正常使用
Android 3.0（API11）及以后出现的功能，3.0之前的版本可使用github第三方开源库nineoldandroids.jar进行支持

错误重现

首先编辑anim动画

<?xml version="1.0" encoding="utf-8"?>

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

    android:duration="2000"

    android:fillAfter="true"

    android:fromXDelta="0"

    android:fromYDelta="0"

    android:toXDelta="300"

    android:toYDelta="500" />

意思是从(0,0)到(300,500)，在2000ms完成，完成以后不再复位

然后顺便贴出布局

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <ImageButton

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@mipmap/ic_launcher"

        android:onClick="startAnimation"/>

</android.support.constraint.ConstraintLayout

按下时执行动画

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

    public void startAnimation(View view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);

        view.startAnimation(animation);

    }

}

得到的效果如下

可以看到在执行完动画以后，再点击以前ImageButton所在的位置时，又开始了动画，也就是说View本身是没有变动的

属性动画使用

属性动画是真实改变了View的状态，将上面的错误重现使用属性动画，则没有刚才那样的情况发生了

public void startAnimation(View view) {

//	Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);

//	view.startAnimation(animation);

	view.setTranslationX(20);

}

一般会使用动画执行类去设置参数，然后执行

public void startAnimation(View view) {

	ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationX", 0F, 300F);

	animator.setDuration(2000);

	animator.start();

}

要实现多个动画同时执行，有三种常见方式，一种是使用动画监听，设置一个没有的动画属性

public void startAnimation(final View view) {

    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "", 0F, 200F);

    animator.setDuration(2000);

    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override

        public void onAnimationUpdate(ValueAnimator animation) {

            float value = (float) animation.getAnimatedValue();

            view.setAlpha(value/200);

            view.setScaleX(value/200);

            view.setScaleY(value/200);

        }

    });

    animator.start();

}

上述代码等价于

public void startAnimation(final View view) {

    ValueAnimator animator = ValueAnimator.ofFloat(0F,200F);

    animator.setDuration(2000);

    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override

        public void onAnimationUpdate(ValueAnimator animation) {

            float value = (float) animation.getAnimatedValue();

            view.setAlpha(value/200);

            view.setScaleX(value/200);

            view.setScaleY(value/200);

        }

    });

    animator.start();

}

另一种是使用PropertyValuesHolder使得多个动画可以同时执行

public void startAnimation(final View view) {

PropertyValuesHolder holderAlpha = PropertyValuesHolder.ofFloat("alpha",

            1F, 0.5F, 1F, 0.5F, 1F);

    PropertyValuesHolder holderScaleX = PropertyValuesHolder.ofFloat("scaleX",

            1F, 0.5F, 1F, 0.5F, 1F, 0.5F, 1F);

    PropertyValuesHolder holderScaleY = PropertyValuesHolder.ofFloat("scaleY",

            1F, 0.5F, 1F, 0.5F, 1F, 0.5F, 1F);

    PropertyValuesHolder holderTranslationX = PropertyValuesHolder.ofFloat("translationX",

            0F, 800F);

    PropertyValuesHolder holderTranslationY = PropertyValuesHolder.ofFloat("translationY",

            0F, 1200F);

    ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view, holderAlpha,

            holderScaleX, holderScaleY, holderTranslationX, holderTranslationY);

    animator.setDuration(5000);

    animator.start();

}

这种动画效果还是挺棒的

还有一个是使用动画集

AnimatorSet主要有三个执行方式，单个动画(play(anim))，多个动画同时(playTogether(anim1, anim2, anim3))和多个动画依次执行(playSequentially(anim1, anim2, anim3))

public void startAnimation(final View view) {

    ObjectAnimator animatorAlpha = ObjectAnimator.ofFloat(view, "alpha", 1f, 0.7f, 1f);

    ObjectAnimator animatorScaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.7f, 1f);

    ObjectAnimator animatorScaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.7f, 1f);

    AnimatorSet animatorSet = new AnimatorSet();

    animatorSet.setDuration(500);

    animatorSet.playSequentially(animatorAlpha, animatorScaleX, animatorScaleY);

    animatorSet.start();

}

实现一个y=x²效果

用windows画图工具做出的草图如下

分析：

要实现如图所示轨迹，那么在图像移动的中心位置形成一条二次函数，那么平移以后其抛物线的形状也不会变

所以选择图像左上角为轨迹点，那么与x轴的交点就为0和父控件宽度减去图像宽度，设为width

其最低点的位置为父控件高度减去图像高度，设为height

那么得到其关系式为：y=a(x-x₁)(x-x₂)，即为y = a * x(x - width)

height = a * (width / 2)(width / 2 - width) 得到 a = -(4 * height) / (width * width)

即y = (4 * height) / (width * width) * x * (width - x)

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    private LinearLayout linearLayout;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        linearLayout = (LinearLayout) findViewById(R.id.linear_layout);

    }

    public void startAnimation(final View view) {

        final float width = (float)(linearLayout.getWidth() - view.getWidth()) ;

        final float height = (float)(linearLayout.getHeight() - view.getHeight());

        final int durtime = 5000;

        Log.d(TAG, "startAnimation: width = " + width + ",height = " + height + ",viewH="+view.getHeight());

        ValueAnimator animator = new ValueAnimator();

        animator.setDuration(durtime);

        animator.setObjectValues(new PointF(0, 0));

        //估值器，定义计算规则

        animator.setEvaluator(new TypeEvaluator<PointF>() {

            @Override

            public PointF evaluate(float fraction, PointF startValue, PointF endValue) {

                PointF pointF = new PointF();

                //每个百分点x移动的距离

                pointF.x = width * fraction;

                pointF.y = ((4 * height) / (width * width)) * pointF.x * (width - pointF.x);

                return pointF;

            }

        });

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override

            public void onAnimationUpdate(ValueAnimator animation) {

                PointF pointF = (PointF) animation.getAnimatedValue();

                view.setX(pointF.x);

                view.setY(pointF.y);

            }

        });

        animator.start();

    }

}

实现效果如下图

常见的加速器

animator.setInterpolator(new AccelerateInterpolator(5));

animator.setInterpolator(new AccelerateDecelerateInterpolator());

animator.setInterpolator(new AnticipateInterpolator(8));

animator.setInterpolator(new OvershootInterpolator());

animator.setInterpolator(new CycleInterpolator(4));

animator.setInterpolator(new BounceInterpolator());

···

AnticipateInterpolator

CycleInterpolator

OvershootInterpolator

DecelerateInterpolator

AccelerateInterpolator

AnticipateOvershootInterpolator

BounceInterpolator

AccelerateDecelerateInterpolator

常用API

ObjectAnimator：对象动画执行类

PropertyValuesHolder: 属性存储器，为两个执行类提供更新多个属性的功能

AnimatorListener：动画执行监听，在动画开始、重复、结束、取消时进行回调

Keyframe：为PropertyValuesHolder提供多个关键帧的操作值

AnimatorSet：一组动画的执行集合类：设置执行的先后顺序，时间等

TimeInterpolator：时间插值，用于控制动画执行过程

ValueAnimator：值动画执行类，常配合AnimatorUpdateListener使用

AnimatorUpdateListener：动画更新监听

TypeEvaluator：类型估值，用于设置复杂的动画操作属性的值

translationX和translationY：这两个属性控制了View所处的位置，它们的值是由layout容器设置的，是相对于坐标原点（0，0左上角）的一个偏移量
rotation,rotationX和rotationY：控制View绕着轴点（pivotX和pivotY）旋转
scaleX和scaleY：控制View基于pivotX和pivotY的缩放
pivotX和pivotY：旋转的轴点和缩放的基准点，默认是View的中心点
x和y：描述了view在其父容器中的最终位置，是左上角左标和偏移量（translationX，translationY）的和
aplha：透明度，1是完全不透明，0是完全透明