一个简单的"红包雨"实现

效果图如下：

我的视频 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

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