Android动画实例 (一)

效果图

比较简单，就是一个控制绘制小球的坐标变化，再加上一个底部阴影的效果（效果出来了，不够好看）

实现思路

刚看到效果的时候，想着用三个动画组合实现

一个小球升起落下的动画

一个小球从圆变成椭圆的动画

再加上一个底部阴影线的绘制的缩放动画

再实现过程过程中发现第一个动画和第二个动画之间不连贯，圆变成椭圆之间有停顿，即使第一个动画开始之后立即开始第二个动画，然后突然想到直接改成绘制椭圆，之后就很顺畅，最后底部的阴影线也直接控制坐标绘制，不使用动画，代码：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 控件的大小设置为半径的8倍
int size = mRadius * 8;
setMeasuredDimension(size, size);

startY = stopY = size;
}

通过自定义属性radius设置小球的半径，设置控件的大小为radius * 8，startY和stopY 为底部阴影线的其实坐标的Y坐标，因为在控件最底部，所以为跟控件大小一致

// 控制椭圆坐标的动画
ValueAnimator ovalAnimator = ValueAnimator.ofFloat(mRadius * 0f, mRadius * 7f);
ovalAnimator.setDuration(1000);
ovalAnimator.setRepeatCount(ValueAnimator.INFINITE);
ovalAnimator.setRepeatMode(ValueAnimator.REVERSE);
ovalAnimator.addUpdateListener(this);
ovalAnimator.start();

椭圆就是小球，小球是通过绘制椭圆的方式来实现的，ValueAnimator.ofFloat(mRadius * 0f, mRadius * 7f) 写mRadius * 0f和mRadius * 7f，是因为最后实现的效果是让小球的高度最多缩小的mRadius * 1f，所以坐标最多移动7f。并且设置无限循环

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制阴影，阴影的长度最多等于小球的长度，
canvas.drawLine(startX, startY, stopX, stopY, mShadowPaint);
canvas.drawOval(mBound, mPaint);
}

在onDraw中绘制阴影线和椭圆

@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBound.top = (float) animation.getAnimatedValue();
mBound.bottom = mRadius * 2 + ((float) animation.getAnimatedValue());
if(mBound.bottom > mRadius * 8) mBound.bottom = mRadius * 8;
// 计算需要画的线的起始点，y不变，主要计算x
// 控件的大小为radius的8倍，椭圆最多缩小到radius的1倍
// 让线的长度最多为radius的2倍，即和小球的初始大小一样
// 让小球下落的速度跟线增长的速度一样，那么线从0 到 radius * 2，就需要小球从 0 到radius * 2
// 整个控件8 * radius，椭圆最多缩小到1 * radius, 需要的增大长度radius * 2
// 那么需要在小球的top下落到radius * 5的时候开始画线
float lineWidth = mBound.top - mRadius * 5f;
if(lineWidth < 0) {
startX = stopX = 0;
} else {
startX = (mRadius * 8 - lineWidth) / 2;
stopX = lineWidth + startX;
}
invalidate();
}

在动画监听中控制坐标，然后不停的触发绘制方法，比较简单