Android Custom Animation Series 3, today to share the third custom Loaidng animation, the same as the first name of a rotating leaf, or the old rules first introduced, then the picture above.

In the end, GIF is a little big. Please think twice about mobile traffic.

introduce

First of all, it is still a statement that the original intention of making these animations is to learn and share, so I hope you can point out mistakes, so that I can make better progress. From here on, I do a series of loading animations (deadline: when I give up).
Last animation link: Android Custom Animation - Star Loading View

text

Today, this animation is made by me when I was making a jumping star, and I inadvertently drew the figure. It feels good. I made it out. Some codes are as follows:

First initialization, the parameters are defined with the following annotations

    @Override
    protected void initParams(Context context)
    {
        initPaint();

         //Outermost radius
        mStarOutR = getAllSize();
        //Intermediate Value of Outer Bessel Curve
        mStarOutMidR = mStarOutR * 0.9f;
        //Inner radius
        mStarInR = mStarOutR * 0.7f;
        //Intermediate Value of Inner Bessel Curve
        mStarInMidR = mStarOutR * 0.3f;

        //Central circle radius
        mCenterCircleR = dip2px(context, 3);
        //Rotation angle
        mRotateAngle = 0;
    }

    /**
     * Initialization Brush
     */
    private void initPaint()
    {
        mFullPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mFullPaint.setStyle(Paint.Style.FILL);
        mFullPaint.setStrokeWidth(2);
        mFullPaint.setColor(Color.WHITE);
        mFullPaint.setDither(true);
        mFullPaint.setFilterBitmap(true);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save();
        //rotate
        canvas.rotate(mRotateAngle, getViewCenterX(), getViewCenterY());
        //Route
        Path starPath = createStarPath(5, -18);
        //The path joins the central circle
        starPath.addCircle(getViewCenterX(), getViewCenterY(), mCenterCircleR, Path.Direction.CW);
        //It's crucial to choose the path filling method.
        starPath.setFillType(Path.FillType.EVEN_ODD);
        //Draw
        canvas.drawPath(starPath, mFullPaint);
        canvas.restore();
    }

Following is the drawing method, and animation three stages of switching, is critical. This time, I got an animation stage to enrich the content of the animation, and it still feels good. A kind of

    /**
     * Drawing Pennisetum
     *
     * @param num        Angle number
     * @param startAngle Initial angle
     * @return
     */
    private Path createStarPath(int num, int startAngle)
    {
        final Path path = new Path();
        int angle = 360 / num;
        int roundSize = 5;//Rounded arc
        int offsetAngle = angle / 2;
        path.moveTo(getViewCenterX() + mStarOutMidR * cos(startAngle - roundSize), getViewCenterY() + mStarOutMidR * sin(startAngle - roundSize));
        for (int i = 0; i < num; i++)
        {
            int value = angle * i + startAngle;
            path.lineTo(getViewCenterX() + mStarOutMidR * cos(value - roundSize), getViewCenterY() + mStarOutMidR * sin(value - roundSize));
            //fillet
            path.quadTo(getViewCenterX() + mStarOutR * cos(value), getViewCenterY() + mStarOutR * sin(value), getViewCenterX() + mStarOutMidR * cos(value + roundSize), getViewCenterY() + mStarOutMidR * sin(value + roundSize));
            path.lineTo(getViewCenterX() + mStarInR * cos(value + offsetAngle - roundSize), getViewCenterY() + mStarInR * sin(value + offsetAngle - roundSize));
            //Inner corner
            path.quadTo(getViewCenterX() + mStarInMidR * cos(value + offsetAngle), getViewCenterY() + mStarInMidR * sin(value + offsetAngle), getViewCenterX() + mStarInR * cos(value + offsetAngle + roundSize), getViewCenterY() + mStarInR * sin(value + offsetAngle + roundSize));
        }
        path.close();
        return path;
    }

    @Override
    protected void computeUpdateValue(@FloatRange(from = 0.0, to = 1.0) float animatedValue)
    {
        switch (mCurrAnimatorState)//The following is divided into three stages
        {
            case 0://The first stage, rotation and amplification
                mStarOutMidR = getAllSize() * animatedValue;
                mRotateAngle = (int) (360 * animatedValue);
                break;
            case 1://The second stage, counterclockwise rotation
                mRotateAngle = (int) (360 * (1 - animatedValue));
                break;
            case 2://The third stage, narrowing down
                mStarOutMidR = getAllSize() * (1 - animatedValue);
                break;
        }
    }

    @Override
    public void onAnimationRepeat(Animator animation)
    {
        if (++mCurrAnimatorState > FINAL_STATE)
        {//Restore to the first stage
            mCurrAnimatorState = 0;
        }
    }

summary

Young friends, animation should still be possible, if you want to see more details, you can go to the Github link at the bottom of the article, if you think ok, hope to give a like, the most desirable is to give a star on Github. Thank you.

Demonstration

Animation Demo

Github: zyao89/ZCustomView

Author: Zyao89; Reprint please keep this trip, thank you.

Personal blog: zyao89.me