自定义炫酷动画之旅

/**                                                                                                
 * Draw a series of points. Each point is centered at the coordinate specified by pts[], and its   
 * diameter is specified by the paint's stroke width (as transformed by the canvas' CTM), with     
 * special treatment for a stroke width of 0, which always draws exactly 1 pixel (or at most 4     
 * if antialiasing is enabled). The shape of the point is controlled by the paint's Cap type.      
 * The shape is a square, unless the cap type is Round, in which case the shape is a circle.       
 *                                                                                                 
 * @param pts Array of points to draw [x0 y0 x1 y1 x2 y2 ...]                                      
 * @param offset Number of values to skip before starting to draw.                                 
 * @param count The number of values to process, after skipping offset of them. Since one point    
 *            uses two values, the number of "points" that are drawn is really (count >> 1).       
 * @param paint The paint used to draw the points                                                  
 */                                                                                                 
public void drawPoints(@Size(multiple = 2) float[] pts, int offset, int count,                      
        @NonNull Paint paint) {                                                                     
    super.drawPoints(pts, offset, count, paint);                                                    
}                                                                                                   

@param pts Array of points to draw [x0 y0 x1 y1 x2 y2 ...] 

/** 
 * Pins distance to 0 <= distance <= getLength(), and then computes the 
 * corresponding position and tangent. Returns false if there is no path, 
 * or a zero-length path was specified, in which case position and tangent 
 * are unchanged. 
 * 
 * @param distance The distance along the current contour to sample 
 * @param pos If not null, returns the sampled position (x==[0], y==[1]) 
 * @param tan If not null, returns the sampled tangent (x==[0], y==[1]) 
 * @return false if there was no path associated with this measure object 
*/  
public boolean getPosTan(float distance, float pos[], float tan[]) {  
    if (pos != null && pos.length < 2 ||  
        tan != null && tan.length < 2) {  
        throw new ArrayIndexOutOfBoundsException();  
    }  
    return native_getPosTan(native_instance, distance, pos, tan);  
}

private void init(Path path) {  
    final PathMeasure pathMeasure = new PathMeasure(path, false);  
    final float pathLength = pathMeasure.getLength();  
    numPoints = (int) (pathLength / PRECISION) + 1;  
    mData = new float[numPoints * 2];  
    final float[] position = new float[2];  
    int index = 0;  
    for (int i = 0; i < numPoints; ++i) {  
        final float distance = (i * pathLength) / (numPoints - 1);  
        pathMeasure.getPosTan(distance, position, null);  
        mData[index] = position[0];  
        mData[index + 1] = position[1];  
        index += 2;  
    }  
    numPoints = mData.length;  
}  

/** 
 * 拿到start和end之间的x,y数据 
 * 
 * @param start 开始百分比 
 * @param end   结束百分比 
 * @return 裁剪后的数据 
 */  
float[] getRangeValue(float start, float end) {  
    if (start >= end)  
        return null;  

    int startIndex = (int) (numPoints * start);  
    int endIndex = (int) (numPoints * end);  

    //必须是偶数，因为需要float[]{x,y}这样x和y要配对的  
    if (startIndex % 2 != 0) {  
        //直接减，不用担心 < 0  因为0是偶数，哈哈  
        --startIndex;  
    }  
    if (endIndex % 2 != 0) {  
        //不用检查越界  
        ++endIndex;  
    }  
    //根据起止点裁剪  
    return Arrays.copyOfRange(mData, startIndex, endIndex);  
}    

public class PathView extends View {  

    private Keyframes mKeyframes;  
    private float[] mLightPoints;  
    private float[] mDarkPoints;  
    private int mLightLineColor;  
    private int mDarkLineColor;  
    private Paint mPaint;  

    public PathView(Context context) {  
        this(context, null);  
    }  

    public PathView(Context context, @Nullable AttributeSet attrs) {  
        this(context, attrs, 0);  
    }  

    public PathView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        init();  
    }  

    private void init() {  
        //初始化画笔  
        mPaint = new Paint();  
        mPaint.setStyle(Paint.Style.STROKE);  
        mPaint.setAntiAlias(true);  

        //默认颜色  
        mLightLineColor = Color.RED;  
        mDarkLineColor = Color.DKGRAY;  
    }  

    public void setPath(Path path) {  
        mKeyframes = new Keyframes(path);  
    }  

    public void setLineWidth(float width) {  
        mPaint.setStrokeWidth(width);  
    }  

    public void setLightLineColor(@ColorInt int color) {  
        mLightLineColor = color;  
    }  

    public void setDarkLineColor(@ColorInt int color) {  
        mDarkLineColor = color;  
    }  

    public void setLightLineProgress(float start, float end) {  
        setLineProgress(start, end, true);  
    }  

    public void setDarkLineProgress(float start, float end) {  
        setLineProgress(start, end, false);  
    }  

    private void setLineProgress(float start, float end, boolean isLightPoints) {  
        if (mKeyframes == null)  
            throw new IllegalStateException("path not set yet");  

        if (isLightPoints)  
            mLightPoints = mKeyframes.getRangeValue(start, end);  
        else  
            mDarkPoints = mKeyframes.getRangeValue(start, end);  
        invalidate();  
    }  

    @Override  
    protected void onDraw(Canvas canvas) {  
        mPaint.setColor(mDarkLineColor);  
        if (mDarkPoints != null)  
            canvas.drawPoints(mDarkPoints, mPaint);  
        mPaint.setColor(mLightLineColor);  
        if (mLightPoints != null)  
            canvas.drawPoints(mLightPoints, mPaint);  
    }  

    private static class Keyframes {  

        static final float PRECISION = 1f; //精度我们用1就够了 (数值越少 numPoints 就越大)  
        int numPoints;  
        float[] mData;  

        Keyframes(Path path) {  
            init(path);  
        }  

        void init(Path path) {  
            final PathMeasure pathMeasure = new PathMeasure(path, false);  
            final float pathLength = pathMeasure.getLength();  
            numPoints = (int) (pathLength / PRECISION) + 1;  
            mData = new float[numPoints * 2];  
            final float[] position = new float[2];  
            int index = 0;  
            for (int i = 0; i < numPoints; ++i) {  
                final float distance = (i * pathLength) / (numPoints - 1);  
                pathMeasure.getPosTan(distance, position, null);  
                mData[index] = position[0];  
                mData[index + 1] = position[1];  
                index += 2;  
            }  
            numPoints = mData.length;  
        }  

        /** 
         * 拿到start和end之间的x,y数据 
         * 
         * @param start 开始百分比 
         * @param end   结束百分比 
         * @return 裁剪后的数据 
         */  
        float[] getRangeValue(float start, float end) {  
            if (start >= end)  
                return null;  

            int startIndex = (int) (numPoints * start);  
            int endIndex = (int) (numPoints * end);  

            //必须是偶数，因为需要float[]{x,y}这样x和y要配对的  
            if (startIndex % 2 != 0) {  
                //直接减，不用担心 < 0  因为0是偶数，哈哈  
                --startIndex;  
            }  
            if (endIndex % 2 != 0) {  
                //不用检查越界  
                ++endIndex;  
            }  
            //根据起止点裁剪  
            return Arrays.copyOfRange(mData, startIndex, endIndex);  
        }  

}     

public class PathView extends SurfaceView implements SurfaceHolder.Callback, Runnable {  

    private volatile boolean isDrawing, isAnimationStarted;  
    private SurfaceHolder mSurfaceHolder;  
    private Keyframes mKeyframes;  
    private float[] mLightPoints;  
    private float[] mDarkPoints;  
    private int mLightLineColor;  
    private int mDarkLineColor;  
    private ValueAnimator mValueAnimator;  
    private long mAnimationDuration, mAnimationStartDelay;  
    private Paint mPaint;  

    public PathView(Context context) {  
        this(context, null);  
    }  

    public PathView(Context context, AttributeSet attrs) {  
        this(context, attrs, 0);  
    }  

    public PathView(Context context, AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        init();  
    }  

    private void init() {  
        setZOrderOnTop(true);  
        mSurfaceHolder = getHolder();  
        mSurfaceHolder.setFormat(PixelFormat.TRANSLUCENT);  
        mSurfaceHolder.addCallback(this);  
        //初始化画笔  
        mPaint = new Paint();  
        mPaint.setStyle(Paint.Style.STROKE);  
        mPaint.setAntiAlias(true);  

        //默认颜色  
        mLightLineColor = Color.RED;  
        mDarkLineColor = Color.GRAY;  

        mAnimationDuration = 6000L;  
        mAnimationStartDelay = 2000L;  
    }  

    public void setPath(Path path) {  
        mKeyframes = new Keyframes(path);  
    }  

    public void setAnimationDuration(long duration) {  
        mAnimationDuration = duration;  
    }  

    public void setStartDelay(long delay) {  
        mAnimationStartDelay = delay;  
    }  

    public void startAnimation() {  
        if (!isAnimationStarted) {  
            isAnimationStarted = true;  
            mValueAnimator = ValueAnimator.ofFloat(-1.4F, 1F).setDuration(mAnimationDuration);  
            mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);  
            mValueAnimator.setRepeatMode(ValueAnimator.RESTART);  
            mValueAnimator.setStartDelay(mAnimationStartDelay);  
            mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
                @Override  
                public void onAnimationUpdate(ValueAnimator animation) {  
                    float currentProgress = (float) animation.getAnimatedValue();  
                    float lightLineStartProgress, lightLineEndProgress;  
                    float darkLineStartProgress, darkLineEndProgress;  
                    darkLineEndProgress = currentProgress;  
                    darkLineStartProgress = lightLineStartProgress = darkLineEndProgress + 1.4F;  
                    lightLineEndProgress = darkLineEndProgress + 1;  
                    if (lightLineEndProgress < 0) {  
                        lightLineEndProgress = 0;  
                    }  
                    if (darkLineEndProgress < 0) {  
                        darkLineEndProgress = 0;  
                    }  
                    if (lightLineStartProgress > 1) {  
                        darkLineStartProgress = lightLineStartProgress = 1;  
                    }  
                    setLightLineProgress(lightLineStartProgress, lightLineEndProgress);  
                    setDarkLineProgress(darkLineStartProgress, darkLineEndProgress);  
                }  
            });  
            mValueAnimator.start();  
        }  
    }  

    public void setLineWidth(float width) {  
        mPaint.setStrokeWidth(width);  
    }  

    public void setLightLineColor(@ColorInt int color) {  
        mLightLineColor = color;  
    }  

    public void setDarkLineColor(@ColorInt int color) {  
        mDarkLineColor = color;  
    }  

    private void setLightLineProgress(float start, float end) {  
        setLineProgress(start, end, true);  
    }  

    private void setDarkLineProgress(float start, float end) {  
        setLineProgress(start, end, false);  
    }  

    private void setLineProgress(float start, float end, boolean isLightPoints) {  
        if (mKeyframes == null)  
            throw new IllegalStateException("path not set yet");  

        if (isLightPoints)  
            mLightPoints = mKeyframes.getRangeValue(start, end);  
        else  
            mDarkPoints = mKeyframes.getRangeValue(start, end);  
    }  

    @Override  
    public void surfaceCreated(SurfaceHolder holder) {  
        restart();  
    }  

    @Override  
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {  

    }  

    @Override  
    public void surfaceDestroyed(SurfaceHolder holder) {  
        stop();  
    }  

    @Override  
    public void run() {  
        while (isDrawing) {  
            Canvas canvas = mSurfaceHolder.lockCanvas();  
            if (canvas == null) return;  
            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);  
            startDraw(canvas);  
            mSurfaceHolder.unlockCanvasAndPost(canvas);  
        }  
    }  

    private void startDraw(Canvas canvas) {  
        mPaint.setColor(mDarkLineColor);  
        if (mDarkPoints != null) {  
            canvas.drawPoints(mDarkPoints, mPaint);  
        }  
        mPaint.setColor(mLightLineColor);  
        if (mLightPoints != null) {  
            canvas.drawPoints(mLightPoints, mPaint);  
        }  
    }  

    private void restart() {  
        isDrawing = true;  
        new Thread(this).start();  
    }  

    private void stop() {  
        isDrawing = false;  
        if (mValueAnimator != null && mValueAnimator.isRunning())  
            mValueAnimator.cancel();  
    }  

    private static class Keyframes {  

        static final float PRECISION = 1f; //精度我们用1就够了 (数值越少 numPoints 就越大)  
        int numPoints;  
        float[] mData;  

        Keyframes(Path path) {  
            init(path);  
        }  

        void init(Path path) {  
            final PathMeasure pathMeasure = new PathMeasure(path, false);  
            final float pathLength = pathMeasure.getLength();  
            numPoints = (int) (pathLength / PRECISION) + 1;  
            mData = new float[numPoints * 2];  
            final float[] position = new float[2];  
            int index = 0;  
            for (int i = 0; i < numPoints; ++i) {  
                final float distance = (i * pathLength) / (numPoints - 1);  
                pathMeasure.getPosTan(distance, position, null);  
                mData[index] = position[0];  
                mData[index + 1] = position[1];  
                index += 2;  
            }  
            numPoints = mData.length;  
        }  

        /** 
         * 拿到start和end之间的x,y数据 
         * 
         * @param start 开始百分比 
         * @param end   结束百分比 
         * @return 裁剪后的数据 
         */  
        float[] getRangeValue(float start, float end) {  
            int startIndex = (int) (numPoints * start);  
            int endIndex = (int) (numPoints * end);  

            //必须是偶数，因为需要float[]{x,y}这样x和y要配对的  
            if (startIndex % 2 != 0) {  
                //直接减，不用担心 < 0  因为0是偶数，哈哈  
                --startIndex;  
            }  
            if (endIndex % 2 != 0) {  
                //不用检查越界  
                ++endIndex;  
            }  
            //根据起止点裁剪  
            return startIndex > endIndex ? Arrays.copyOfRange(mData, endIndex, startIndex) : null;  
        }  
    }  
}    

 public void startAnimation() {  
        if (mValueAnimator != null && mValueAnimator.isRunning())  
            mValueAnimator.cancel();  
//        底部灰色线条向后加长到原Path的60%  
        mValueAnimator = ValueAnimator.ofFloat(-.6F, 1).setDuration(mAnimationDuration);  
//        先不循环  
//        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);  
//        mValueAnimator.setRepeatMode(ValueAnimator.RESTART);  
//        mValueAnimator.setStartDelay(mAnimationStartDelay);  
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  

            @Override  
            public void onAnimationUpdate(ValueAnimator animation) {  
                float currentProgress = (float) animation.getAnimatedValue();  
                float lightLineStartProgress,//粉色线头  
                        lightLineEndProgress;//粉色线尾  
                float darkLineStartProgress,//灰色线头  
                        darkLineEndProgress;//灰色线尾  

                darkLineEndProgress = currentProgress;  

//                粉色线头从0开始，并且初始速度是灰色线尾的两倍  
                darkLineStartProgress = lightLineStartProgress = (.6F + currentProgress) * 2;  

//                粉色线尾从-0.25开始，速度跟灰色线尾速度一样  
                lightLineEndProgress = .35F + currentProgress;  

//                粉色线尾走到30%时，速度变为原来速度的2倍  
                if (lightLineEndProgress > .3F) {  
                    lightLineEndProgress = (.35F + currentProgress - .3F) * 2 + .3F;  
                }  

//                当粉色线头走到65%时，速度变为原来速度的0.35倍  
                if (darkLineStartProgress > .65F) {  
                    darkLineStartProgress = lightLineStartProgress = ((.6F + currentProgress) * 2 - .65F) * .35F + .65F;  
                }  
                if (lightLineEndProgress < 0) {  
                    lightLineEndProgress = 0;  
                }  
                if (darkLineEndProgress < 0) {  
                    darkLineEndProgress = 0;  
                }  
                if (lightLineStartProgress > 1) {  
                    darkLineStartProgress = lightLineStartProgress = 1;  
                }  
                setLightLineProgress(lightLineStartProgress, lightLineEndProgress);  
                setDarkLineProgress(darkLineStartProgress, darkLineEndProgress);  
            }  
        });  
        mValueAnimator.start();  
    }     

public class PathView extends SurfaceView implements SurfaceHolder.Callback, Runnable {  

    @IntDef({TRAIN_MODE, AIRPLANE_MODE})  
    @IntRange(from = AIRPLANE_MODE, to = TRAIN_MODE)  
    @Retention(RetentionPolicy.SOURCE)  
    private @interface Mode {  
    }  

    public static final int AIRPLANE_MODE = 0; // 一开始不显示灰色线条，粉红色线条走过后才留下灰色线条  
    public static final int TRAIN_MODE = 1;// 一开始就显示灰色线条，并且一直显示，直到动画结束  

    private volatile boolean isDrawing;  
    private Semaphore mLightLineSemaphore, mDarkLineSemaphore;  
    private SurfaceHolder mSurfaceHolder;  
    private Keyframes mKeyframes;  
    private int mMode;  
    private float[] mLightPoints;  
    private float[] mDarkPoints;  
    private int mLightLineColor;  
    private int mDarkLineColor;  
    private ValueAnimator mProgressAnimator, mAlphaAnimator;  
    private long mAnimationDuration;  
    private Paint mPaint;  
    private int mAlpha;  

    public PathView(Context context) {  
        this(context, null);  
    }  

    public PathView(Context context, AttributeSet attrs) {  
        this(context, attrs, 0);  
    }  

    public PathView(Context context, AttributeSet attrs, int defStyleAttr) {  
        super(context, attrs, defStyleAttr);  
        init();  
    }  
   ......
   ......
        /** 
         * 拿到start和end之间的x,y数据 
         * 
         * @param start 开始百分比 
         * @param end   结束百分比 
         * @return 裁剪后的数据 
         */  
        float[] getRangeValue(float start, float end) {  
            int startIndex = (int) (numPoints * start);  
            int endIndex = (int) (numPoints * end);  

            //必须是偶数，因为需要float[]{x,y}这样x和y要配对的  
            if (startIndex % 2 != 0) {  
                //直接减，不用担心 < 0  因为0是偶数，哈哈  
                --startIndex;  
            }  
            if (endIndex % 2 != 0) {  
                //不用检查越界  
                ++endIndex;  
            }  
            //根据起止点裁剪  
            return startIndex > endIndex ? Arrays.copyOfRange(mData, endIndex, startIndex) : null;  
        }  
    }  
}   

//      线宽    
        pathView.setLineWidth(5);  
        pathView2.setLineWidth(5);  
        pathView3.setLineWidth(5);  
        pathView4.setLineWidth(5);  
        pathView5.setLineWidth(5);  
        pathView6.setLineWidth(5);  

//      设置路径  
        pathView.setPath(path1);  
        pathView2.setPath(path2);  
        pathView3.setPath(path3);  
        pathView4.setPath(path4);  
        pathView5.setPath(path5);  
        pathView6.setPath(path6);  

//      中间两条线设置火车模式  
        pathView3.setMode(PathView.TRAIN_MODE);  
        pathView4.setMode(PathView.TRAIN_MODE);  

//      动画时长  
        pathView.setAnimationDuration(18000);  
        pathView2.setAnimationDuration(18000);  
        pathView3.setAnimationDuration(18000);  
        pathView4.setAnimationDuration(18000);  
        pathView5.setAnimationDuration(18000);  
        pathView6.setAnimationDuration(18000);             

//      开始播放  
    pathView.startAnimation();  
        pathView2.startAnimation();  
        pathView3.startAnimation();  
        pathView4.startAnimation();  
        pathView5.startAnimation();  
        pathView6.startAnimation();