自定义View实现Dribbble上动感的Gallery App Icon

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 将View切成圆形，否则绘制的山和云朵会出现在圆形背景之外
        mRoundPath.reset();
        mRoundPath.addCircle(mViewCircle, mViewCircle, mViewCircle, Path.Direction.CW);
        canvas.clipPath(mRoundPath);
        // 绘制圆形背景
        canvas.drawCircle(mViewCircle, mViewCircle, mViewCircle, mBackgroundPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 取宽高的最小值
        mParentWidth = mParentHeight = Math.min(getWidth(), getHeight());
        // View的半径
        mViewCircle = mParentWidth >> 1;
    }

mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBackgroundPaint.setColor(mBackgroundColor);

canvas.drawCircle((mParentWidth / 2) - getValue(90), (mParentHeight / 2) - getValue(80), sunWidth / 2, mSunPaint);

/**
 * Transform the points in this path by matrix, and write the answer
 * into dst. If dst is null, then the the original path is modified.
 *
 * @param matrix The matrix to apply to the path
 * @param dst    The transformed path is written here. If dst is null,
 *               then the the original path is modified
 */
public void transform(Matrix matrix, Path dst) {
    long dstNative = 0;
    if (dst != null) {
        dst.isSimplePath = false;
        dstNative = dst.mNativePath;
    }
    nTransform(mNativePath, matrix.native_instance, dstNative);
}

/**
 * Postconcats the matrix with the specified translation. M' = T(dx, dy) * M
 * dx,dy，是x,y坐标移动的差值。
 */
public boolean postTranslate(float dx, float dy) {
    nPostTranslate(native_instance, dx, dy);
    return true;
}

private void drawSun() {
    // sun图形的直径
    int sunWidth = getValue(70);
    // sun图形的半径
    int sunCircle = sunWidth / 2;
    // sun动画半径 = (sun半径 + 80(sun距离中心点的高度) + 整个View的半径 + sun半径 + 20(sun距离整个View的最下沿的间距)) / 2
    mSunAnimCircle = (sunWidth + getValue(100) + mViewCircle) / 2;
    // sun动画的圆心x坐标
    mSunAnimX = mViewCircle;
    // sun动画的圆心y坐标 = sun动画半径 + (整个View的半径 - 80(sun距离中心点的高度) - sun半径)
    mSunAnimY = mSunAnimCircle + (mViewCircle - getValue(80) - sunCircle);
    // 得到圆形旋转动画起始点的x,y坐标，初始角度为-120
    mSunAnimXY = getCircleXY(mSunAnimX, mSunAnimY, mSunAnimCircle, -120);
    // 绘制sun
    mSunPath.addCircle(mSunAnimXY[0], mSunAnimXY[1], sunCircle, Path.Direction.CW);
}

/**
 * 求sun旋转时，圆上的点。起点为最右边的点，顺时针。
 * x1   =   x0   +   r   *   cos(a   *   PI  /180  )
 * y1   =   y0   +   r   *   sin(a   *   PI  /180  )
 *
 * @param angle         角度
 * @param circleCenterX 圆心x坐标
 * @param circleCenterY 圆心y坐标
 * @param circleR       半径
 */
private int[] getCircleXY(int circleCenterX, int circleCenterY, int circleR, float angle) {
    int x = (int) (circleCenterX + circleR * Math.cos(angle * Math.PI / 180));
    int y = (int) (circleCenterY + circleR * Math.sin(angle * Math.PI / 180));
    return new int[]{x, y};
}

// x y 坐标
int[] circleXY = getCircleXY(mSunAnimX, mSunAnimY, mSunAnimCircle, mSunAnimatorValue);
mSunComputeMatrix.postTranslate(circleXY[0] - mSunAnimXY[0], circleXY[1] - mSunAnimXY[1]);
mSunPath.transform(mSunComputeMatrix, mSunComputePath);
canvas.drawPath(mSunComputePath, mSunPaint);

/**
 * sun的动画
 */
private void setSunAnimator() {
    ValueAnimator mSunAnimator = ValueAnimator.ofFloat(-120, 240);
    mSunAnimator.setDuration(2700);
    mSunAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    mSunAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mSunAnimatorValue = (float) animation.getAnimatedValue();
            invalidate();
        }
    });
    mSunAnimator.start();
}

/**
 * 画中间的三座山
 *
 * @param x 中心点左坐标
 * @param y 中心点右坐标
 */
private void drawMou(int x, int y, int down) {
    // 左右山 Y坐标相对于中心点下移多少
    int lrmYpoint = down + getValue(30);
    // 左右山 X坐标相对于中心点左移或右移多少
    int lrdPoint = getValue(120);
    // 左右山 山的一半的X间距是多少
    int lrBanDis = getValue(140);
    // 中间山 山的一半的X间距是多少
    int lrBanGao = getValue(150);

    // 左山
    mLeftMountainPath.reset();
    // 起点
    mLeftMountainPath.moveTo(x - lrdPoint, y + lrmYpoint);
    mLeftMountainPath.lineTo(x - lrdPoint + lrBanDis, y + lrmYpoint + lrBanGao);
    mLeftMountainPath.lineTo(x - lrdPoint - lrBanDis, y + lrmYpoint + lrBanGao);
    // 使这些点构成封闭的多边形
    mLeftMountainPath.close();

    // 右山
    mRightMountainPath.reset();
    mRightMountainPath.moveTo(x + lrdPoint + getValue(10), y + lrmYpoint);
    mRightMountainPath.lineTo(x + lrdPoint + getValue(10) + lrBanDis, y + lrmYpoint + lrBanGao);
    mRightMountainPath.lineTo(x + lrdPoint + getValue(10) - lrBanDis, y + lrmYpoint + lrBanGao);
    mRightMountainPath.close();

    // 中山
    mMidMountainPath.reset();
    mMidMountainPath.moveTo(x, y + down);
    mMidMountainPath.lineTo(x + getValue(220), y + down + mParentHeight / 2 + mParentHeight / 14);
    mMidMountainPath.lineTo(x - getValue(220), y + down + mParentHeight / 2 + mParentHeight / 14);
    mMidMountainPath.close();

    // 左右山移动的距离
    mMaxMouTranslationY = (y + down + mViewCircle) / 14;
}

// 中间的山
mMidComputeMatrix.reset();
mMidComputePath.reset();
mMidComputeMatrix.postTranslate(0, mMaxMouTranslationY * mMidMouAnimatorValue);
mMidMountainPath.transform(mMidComputeMatrix, mMidComputePath);
canvas.drawPath(mMidComputePath, mMidMountainPaint);

/**
 * 中间山的动画
 */
private void setMidMouAnimator(final boolean isFirst) {
    ValueAnimator mMidMouAnimator;
    if (isFirst) {
        mMidMouAnimator = ValueAnimator.ofFloat(0, -1, 10);
        mMidMouAnimator.setStartDelay(200);
        mMidMouAnimator.setDuration(1000);
    } else {
        mMidMouAnimator = ValueAnimator.ofFloat(10, 0);
        mMidMouAnimator.setStartDelay(0);
        mMidMouAnimator.setDuration(600);
    }
    mMidMouAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
    mMidMouAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mMidMouAnimatorValue = (float) animation.getAnimatedValue();
            invalidate();
        }
    });
    mMidMouAnimator.start();
}

// 绘制圆角矩形
path.addRoundRect(RectF rect, float rx, float ry, Direction dir)
// 绘制圆形
path.addCircle(float x, float y, float radius, Direction dir)

mCloudComputeMatrix.postTranslate(mMaxCloudTranslationX * mCloudAnimatorValue, 0);
mCloudPath.transform(mCloudComputeMatrix, mCloudComputePath);
canvas.drawPath(mCloudComputePath, mCloudPaint);

<declare-styleable name="SceneryView">
    <!--The color of sun-->
    <attr name="sun_color" format="color" />
    <!--The color of the cloud-->
    <attr name="cloud_color" format="color" />
    <!--The color of the left mountain-->
    <attr name="left_mountain_color" format="color" />
    <!--The color of the right mountain-->
    <attr name="right_mountain_color" format="color" />
    <!--The color of the middle mountain-->
    <attr name="mid_mountain_color" format="color" />
    <!--The color of the background-->
    <attr name="background_color" format="color" />
</declare-styleable>

matrix.postTranslate(dx, dy);
path.transform(matrix, momputePath);
canvas.drawPath(momputePath, mPaint);