效果图如下：

我的视频 1_20170207191503.gif

这个简单动画的主要思路： 将多个 红包View 通过 属性动画 从屏幕顶端 飘落到 屏幕底部。只不过在飘落的动画过程中，加入了一些随机路线 Path。

主要涉及到的知识点：

1.Path 和 PathMeasure : 了解PathMeasure 绘制路线

2.Animation ：执行动画

绘制路线代码： 通过 Path.cubicTo 方法

public Path createPath(View parent,int factor ){

//主要通过 Path.cubicTo 方法，生成一个贝塞尔曲线

// cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)

// 我们需要三个坐标点

int x = mRandom.nextInt(mConfig.initX);

int x1 = mRandom.nextInt(mConfig.xRand);

x1 = mRandom.nextBoolean() ? x1 + x : Math.abs(x - x1);

int x2 = mRandom.nextInt(mConfig.xRand);

x2 = mRandom.nextBoolean() ? x2 + x1 : Math.abs(x1 - x2);

x1 = x1 + (mRandom.nextBoolean() ? 0 : mConfig.xPointFactor);

x2 = x2 + ( mRandom.nextBoolean() ? mConfig.xPointFactor:0);

int y = mConfig.initY;

int y2 = mCounter.intValue() * 15 + mConfig.animLength * factor + mRandom.nextInt(mConfig.animLengthRand);

factor = y2 / mConfig.bezierFactor;

int y3 = parent.getHeight();

y2 = y2/2;

Path p = new Path();

p.moveTo(x,y);

//贝塞尔曲线

p.cubicTo(x,y ,x1,y2 - factor , x1,y2);

p.moveTo(x1,y2);

p.cubicTo(x1,y2 + factor,x2,y3 - factor,x2,y3);

return p;

}

执行动画： 路径长度 PathMeasure.getLength() 与 坐标点 PathMeasure.getPosTan()

static class FloatAnimation extends Animation{

private PathMeasure mPm; //计算路径距离

private View mChildView;

private float mDistance;

private float mRotation;

public FloatAnimation(Path path, float rotation, View parent, View child){

//路劲计算

mPm = new PathMeasure(path,false);

//获取漂移路径的长度

mDistance = mPm.getLength();

mChildView = child;

mRotation = rotation;

parent.setLayerType(View.LAYER_TYPE_HARDWARE,null);

}

@Override

protected void applyTransformation(float interpolatedTime, Transformation t) {

// 第一种方式 View动画，不可点击

// Matrix matrix = t.getMatrix();

// mPm.getMatrix(mDistance * interpolatedTime,matrix,PathMeasure.POSITION_MATRIX_FLAG);

// 第二种方式 ，属性动画，修改View的坐标，才能点击

float[] pos = {0,0};

float[] tan = {0,0};

//通过getPosTan()方法，获得当前 mChildView 的坐标

mPm.getPosTan(mDistance * interpolatedTime,pos,tan);

Log.d("FallingPathAnimation","pos = ("+pos[0] +","+pos[1]+")");

//通过改变 mChildView 的x,y坐标，才能点击

mChildView.setX(pos[0]);

mChildView.setY(pos[1]);

mChildView.setRotation(mRotation * interpolatedTime);

//缩放

float scale = 1F;

if (3000.0F * interpolatedTime < 200.0F) {

scale = scale(interpolatedTime, 0.0D, 0.06666667014360428D, 0.20000000298023224D, 1.100000023841858D);

} else if (3000.0F * interpolatedTime < 300.0F) {

scale = scale(interpolatedTime, 0.06666667014360428D, 0.10000000149011612D, 1.100000023841858D, 1.0D);

}

mChildView.setScaleX(scale);

mChildView.setScaleY(scale);

//渐变

// t.setAlpha(1.0F - interpolatedTime);

}

}

“红包雨”主要就是上面两个步骤，很简单，上面已经注释的很清楚了。主要还是对 Path 与 PathMeasure 类的 熟悉和使用。

源码在这里 : https://github.com/LuoboDcom/ApiDemo

欢迎大家留言和展示更多酷炫动画，我在这里做个抛砖引玉的作用，哈哈！