这个效果是之前看过的，正好是很典型的跟动画相关的例子，我这里就拿来跟大家分享一下，如果你以前看过又很熟悉动画那就可以略过，如果不是很熟悉或者没看过那不妨复习和学习一下，上图大家看下（好像转化成gif不是很完全）：

想要源代码的可以[点击下载],不过不熟悉的还是希望能自己敲敲。

目标

 今天这篇文章就是纯粹地使用一下属性动画，进而对前面源码分析的补充，所以今天的目标如下：1.复习《属性动画源码分析(Choreographer"编舞者")》分析的原理和《属性动画基础用法》。2.顺便简单看下贝塞尔曲线的用法。

代码分析

这个例子不是很麻烦，我们首先就自定义一个BubbleLayout继承RelativeLayout，为什么要继承这个呢？其实因为在继承ViewGroup的时候要强制重写onLayout方法，这里没有必要，所以继承一个现成的布局。我们首先看到我们的构造函数：

public BubbleLayout(Context context) {
        super(context);
        init();
    }

    public BubbleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public BubbleLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

发现构造函数很简单，就是调用了init()方法，我们直接看init()做了什么？

private void init() {
        initDrawable();
        initInterpolator();

        mParams = new LayoutParams(bubbleWidth,bubbleHeight);
        mParams.addRule(CENTER_HORIZONTAL,TRUE);
        mParams.addRule(ALIGN_PARENT_BOTTOM,TRUE);
    }

我们看到初始化方法里面显示调用了initDrawable()，然后是initInterpolator()方法，最后就是初始化Params（为了添加气泡确定初始位置）,我们先来看第一个方法吧：

private void initDrawable() {
        redBubble = getResources().getDrawable(R.mipmap.red);
        blueBubble = getResources().getDrawable(R.mipmap.blue);
        yellowBubble = getResources().getDrawable(R.mipmap.yellow);

        mDrawables = new Drawable[3];
        mDrawables[0] = redBubble;
        mDrawables[1] = blueBubble;
        mDrawables[2] = yellowBubble;

        bubbleWidth = redBubble.getIntrinsicWidth();
        bubbleHeight = redBubble.getIntrinsicHeight();
    }

这个地方主要是获取几个不同颜色的爱心，然后放进Drawable数组里，因为后面要用随机数来随机取不同颜色的爱心，最后是得到爱心的宽和高，后面会用到。接着我们看第二个方法：

private void initInterpolator() {
        mInterpolators = new Interpolator[4];
        mInterpolators[0] = new AccelerateDecelerateInterpolator();
        mInterpolators[1] = new AccelerateInterpolator();
        mInterpolators[2] = new DecelerateInterpolator();
        mInterpolators[3] = new LinearInterpolator();
    }

这个方法跟上面差不多，就是将不同的插值器放进数组里面，到时会从数组中随机取出插值器给上升动画。我们会在点击按钮的时候添加气泡，所以我们看下添加气泡的代码：

public void addBubbles() {
        ImageView bubble = new ImageView(getContext());
        bubble.setImageDrawable(mDrawables[mRandom.nextInt(mDrawables.length)]);
        bubble.setLayoutParams(mParams);
        addView(bubble);

        startAnimation(bubble);
    }

首先实例化一个ImageView，然后设置图片和Params，添加进这个自定义的ViewGroup，添加完就启动动画：

private void startAnimation(final ImageView bubble) {
        ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(bubble,"alpha",0.2f,1f);
        ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(bubble,"scaleX",0.2f,1f);
        ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(bubble,"scaleY",0.2f,1f);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                startBezierAnimation(bubble);
            }
        });
        animatorSet.setDuration(300);
        animatorSet.playTogether(alphaAnimator,scaleXAnimator,scaleYAnimator);
        animatorSet.start();
    }

这里主要动画有三个，首先是透明度变化，然后是x和y的缩放。然后用AnimatorSet一起播放。动画播放完毕这周执行上升的动画，下面会用到贝塞尔曲线知识，这里我推荐一个模拟贝塞尔曲线运动路径的在线网址如图所示：

这个公式不难，我们根据这个公式来自定义一个TypeEvaluator如下：

public class BezierEvaluator implements TypeEvaluator<PointF> {
    private PointF B,C;
    public BezierEvaluator(PointF B,PointF C){
        this.B = B;
        this.C = C;
    }

    @Override
    public PointF evaluate(float v, PointF A, PointF D) {
        PointF evaluatedPoint = new PointF();
        evaluatedPoint.x = A.x*(1-v)*(1-v)*(1-v) + B.x*3*(1-v)*(1-v)*v + C.x*3*(1-v)*v*v +D.x*v*v*v;
        evaluatedPoint.y = A.y*(1-v)*(1-v)*(1-v) + B.y*3*(1-v)*(1-v)*v + C.y*3*(1-v)*v*v +D.y*v*v*v;
        return evaluatedPoint;
    }
}

这个很简单就是套用上面的公式，一模一样。然后我们就应用这个估值器：

private void startBezierAnimation(final ImageView bubble) {
        //两个控制点随意生成
        PointF B = new PointF(mRandom.nextInt(width/2) + width/4,mRandom.nextInt(height/2) + height/2);
        PointF C = new PointF(mRandom.nextInt(width/2) + width/4,mRandom.nextInt(height/2));
        //起始点在这个布局的顶部中心点,结束节点在顶部x为任意，y这里设置0高度
        PointF A = new PointF((width - bubbleWidth)/2,height - bubbleHeight);
        PointF D = new PointF(mRandom.nextInt(width),0);

        BezierEvaluator bezierEvaluator = new BezierEvaluator(B,C);
        ValueAnimator valueAnimator = ValueAnimator.ofObject(bezierEvaluator,A,D);
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                removeView(bubble);
            }
        });
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                PointF currentPoint = (PointF) valueAnimator.getAnimatedValue();
                bubble.setX(currentPoint.x);
                bubble.setY(currentPoint.y);
                bubble.setAlpha(1 - valueAnimator.getAnimatedFraction());
            }
        });
        valueAnimator.setTarget(bubble);
        valueAnimator.setInterpolator(mInterpolators[mRandom.nextInt(mInterpolators.length)]);
        valueAnimator.setDuration(2000);
        valueAnimator.start();
    }

这里代码的B点和C点，就是用上面推荐的一个网址模拟了下，感觉这个运动轨迹会好看点，然后A点是起始点就取控件中间位置，D点的x就是随机的控件宽度，y就是顶部。然后随后设置插值器setInterpolator，记住最后一定要删除这个ImageView，避免添加太多的ImageView都没有删除掉。

总结

文章到这里已经说明完毕了，很简单，大家只要结合前面的基础用法看下就明白了，没啥难度。