主目录见：Android高级进阶知识（这是总目录索引）
这个效果是之前看过的，正好是很典型的跟动画相关的例子，我这里就拿来跟大家分享一下，如果你以前看过又很熟悉动画那就可以略过，如果不是很熟悉或者没看过那不妨复习和学习一下，上图大家看下（好像转化成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，我们首先看下贝塞尔曲线的公式：
这个公式不难，我们根据这个公式来自定义一个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都没有删除掉。
总结：文章到这里已经说明完毕了，很简单，大家只要结合前面的基础用法看下就明白了，没啥难度。
