Android中ValueAnimator的使用

写在前面的话

这个时代，新物种正在生长，新边疆正在延伸。做别人的小兵，还是做自己的将军，你选。

前言

• 今天给大家带来的是ValueAnimator的相关用法，下面先给大家看下效果图。

效果图

动画介绍

这里我们写了两个位移动画，分别是城市交换动画和日期位移动画，下面我们将通过代码详细介绍下两个动画的具体实现，从而理解valueAnimator的相关使用。

城市交换动画

• 左边城市：startCityTextView
• 右边城市：endCityTextView
• 首先获取startCityTextView和endCityTextView的x坐标，因为是水平方向的移动。
  
  1. startX：左边城市的横坐标
  2. endX：右边城市的横坐标

    private int startX;
    private int endX;

    private void getLocation() {
        int[] startLocation = new int[2];
        startCityTextView.getLocationOnScreen(startLocation);
        int[] endLocation = new int[2];
        endCityTextView.getLocationOnScreen(endLocation);
        startX = startLocation[0];
        endX = endLocation[0];
    }

左边城市动画

• 移动距离

final int moveX = endX - startX + endCityTextView.getWidth() - startCityTextView.getWidth();

• 动画代码

ValueAnimator startCityAnimation = ValueAnimator.ofInt(0, moveX).setDuration(500);
        startCityAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                startCityTextView.layout(startX + value, startCityTextView.getTop(), startX + value + startCityTextView.getWidth(), startCityTextView.getBottom());
            }
        });
        startCityAnimation.start();

右边城市动画

• 移动距离

int rightMoveX = endX - startX;

• 动画代码

ValueAnimator endCityAnimator = ValueAnimator.ofInt(0, rightMoveX).setDuration(500);
        endCityAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                endCityTextView.layout(endX - value, endCityTextView.getTop(), endX + endCityTextView.getWidth() - value, endCityTextView.getBottom());
            }
        });
        endCityAnimator.start();

调换view位置

最后需要在动画结束后调换view的位置, 使startCityTextView变为endCityTextView，这样下次动画执行时位置坐标才正确。

endCityAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                TextView flagTextView = startCityTextView;
                startCityTextView = endCityTextView;
                endCityTextView = flagTextView;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });

日期位移动画

透明度动画

• isSingleLine：判断是点击的单程还是往返
  
  1. 单程：透明度由1变到0，通过重写ObjectAnimator的setEvaluator方法，其中fraction的变化是由0到1
  2. 往返：透明度从0变到1

ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rightLayout, View.ALPHA, 0, 1.0f).setDuration(1000);
        if (isSingleLine) {
            alphaAnimator.setEvaluator(new TypeEvaluator() {
                @Override
                public Float evaluate(float fraction, Float startValue, Float endValue) {
                    return 1 - fraction;
                }
            });
        }
        alphaAnimator.start();

位移动画

动画分析：

• screenWidth 屏幕宽度
  
  1. 往返：把view从screenWidth+view.getWidth()的位置移动到screenWidth-view.getWidth的位置，移动距离：view.getWidth()
  2. 单程：把view移出到screenWidth和view.getWidth()之和的位置，移动距离：view.getWidth()

• 获取屏幕宽度

    private int getScreenWidth() {
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        return displayMetrics.widthPixels;
    }

• 动画代码

ValueAnimator animator = ValueAnimator.ofFloat(0, rightLayout.getWidth()).setDuration(500);
        animator.setEvaluator(isSingleLine ? new ATFlightEvaluator() : new FloatEvaluator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                int screenWidth = getScreenWidth();
                rightLayout.layout(screenWidth - (int) value, rightLayout.getTop(), screenWidth + rightLayout.getWidth() - (int) value, rightLayout.getBottom());
            }
        });
        animator.start();

• ATFlightEvalutor
  

这里isSingleLine时我们设置其Evaluator为我们自定义的ATFlightEvalutor，实现TypeEvaluator接口并重写其evaluate方法，这样我们获取到动画变化中的value值就是由view.getWidth()—>0变化的。

1. startValue: 0
2. endValue: view.getWidth()
3. fraction: 动画的变化率0—>1
4. 其最后返回的值就是我们使用animation.getAnimatedValue()获取的值。

public class ATFlightEvaluator implements TypeEvaluator<Float> {

    @Override
    public Float evaluate(float fraction, Float startValue, Float endValue) {
        return endValue - fraction * (endValue - startValue);
    }
}

总结

以上就是我们通过valueAnimator实现的两个小实例，有兴趣的童鞋可以研究下代码，另外有不明白的地方可以在下面留言或者发邮件[email protected]。