android支付宝动画,android仿照支付宝支付成功的动画一

上边是效果图

上边是依据两种方式实现的，先说地一个效果的实现

要实现地一个效果，肯定需要掌握path,patnMeasure,valueAnimator这里跟自定义view关系不是很大

思路

１　先实现一个静态的效果(用path来绘制) (为什么使用path呢？因为使用path我们可以用pathMeasure来测量出path没一个点的坐标)

２　然后用pathMeasure来测量path然后结合valueAnimator来获取path路径的没一个坐标，然后再更新界面就可以得到效果

上代码，代码比较短，注释也很清楚

public class PathMeasureTest extends View {

//画笔

private Paint mPaint;

//隐形的路径

private Path mPath;

//绘制用户看到的路径

private Path mSecondPath;

//路径测量

private PathMeasure mPathMeasure;

//宽度和高度

private float width;

private float height;

//获取当前线段的位置 pos[0]为x轴　pos[1]为y轴

private float[] pos = new float[2];

public PathMeasureTest(Context context, AttributeSet attrs) {

super(context, attrs);

mPaint = new Paint();

mPaint.setStrokeWidth(10);

mPaint.setColor(Color.BLACK);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setStrokeCap(Paint.Cap.ROUND);

mPaint.setStrokeJoin(Paint.Join.ROUND);

mPath = new Path();

mPathMeasure = new PathMeasure();

mSecondPath = new Path();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

width = getMeasuredWidth();

height = getMeasuredHeight();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

mPath.moveTo(width / 2, height / 2);

mPath.rLineTo(40, 40);

mPath.rLineTo(90, -60);

mPaint.setColor(Color.RED);

mSecondPath.lineTo(pos[0], pos[1]);

canvas.drawPath(mSecondPath, mPaint);

}

public void startAnim() {

mSecondPath.reset();

mPathMeasure.setPath(mPath, false);

mSecondPath.moveTo(width / 2, height / 2);

final ValueAnimator anim = ValueAnimator.ofFloat(0, mPathMeasure.getLength());

anim.setDuration(300);

anim.setInterpolator(new LinearInterpolator());

anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

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

//获取位置

mPathMeasure.getPosTan(value, pos, null);

postInvalidate();

}

});

anim.start();

}

}

继续说我们第二种的实现，使用到了pathMeasure的一个方法pathMeasure.getSegment这个方法，具体介绍请看这篇博客

http://blog.csdn.net/u013831257/article/details/51565591

pathMeasure.getSegment(

float startD,

floatstopD, Path dst,

boolean

startWithMoveTo);我们说一说这个方法有什么用？传入的参数分别是什么

１)这个方法的字面意思是得到一个段落(得到一个路径的一部分)，你可能会问得到一部分就得到呗，跟我们说的这个有什么关系呢？得到一部分之后，我们再结合属性动画就可以慢慢绘制出来效果

2)传入的参数分别是开始位置，结束位置，把获取到的path赋值到一个新的path下(dst)，起始点是否使用moveTo．

public class PathMeasureSegmentTest extends View {

private Paint mPaint;

private Path mPath;

private PathMeasure mPathMeasure;

private Path dstPath;

public PathMeasureSegmentTest(Context context, AttributeSet attrs) {

super(context, attrs);

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setStrokeWidth(10);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setColor(Color.BLACK);

mPath = new Path();

mPathMeasure = new PathMeasure();

dstPath = new Path();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

mPath.moveTo(100, 100);

mPath.rLineTo(100, 100);

mPath.moveTo(200, 100);

mPath.rLineTo(-100, 100);

mPaint.setColor(Color.RED);

canvas.drawPath(dstPath, mPaint);

}

private float lenght;

private boolean isNextFlag;

public void startAnim() {

//这里每次都重置，因为每次点击就都可以看到效果

dstPath.rewind();

isNextFlag = true;

mPathMeasure.setPath(mPath, false);

lenght = mPathMeasure.getLength();

final ValueAnimator mValueAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);

mValueAnimator.setInterpolator(new LinearInterpolator());

mValueAnimator.setDuration(200);

mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

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

//19版本之前要想看到效果最简单的方法就是使用rLineTo(0,0)

dstPath.rLineTo(0, 0);

//获取一个段落

mPathMeasure.getSegment(0, lenght * value, dstPath, true);

invalidate();

}

});

mValueAnimator.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

if (isNextFlag) {

//绘制完一条线之后，再绘制另外一条线

mPathMeasure.nextContour();

lenght = mPathMeasure.getLength();

mValueAnimator.start();

isNextFlag = false;

}

}

});

mValueAnimator.start();

}

}使用方法是：在布局文件中声明，然后调用每个view中的startAnim()方法