Recently, I was looking at the hencoder custom view series of the throwing line. There is an icon turning the page and rotating the effect is cool. After thinking about it and seeing the thought of a great God, I finally made it. (GIF recorded a bit of card, the real effect can be run and viewed by yourself)

thinking

The whole is composed of three attribute animations. First of all, the whole icon is divided into two parts. One part is called half a when it turns up first (the first animation); the other part is called half b when it turns up last (the last animation).

The first animation: use the camera 3d animation to rotate the a half 45 degrees in the opposite direction of the Y axis;
Second animation: use canvas 2d animation to rotate, rotate "3d effect of a half" by 270 degrees anticlockwise (the plane rotation effect we see);
The third Animation: b half rotates 45 degrees along the Y axis.

It's a little hard to describe. If you don't understand the idea, you can only understand it step by step through the code. The core code is as follows:

    /**
     * a Animation rotation angle of half (first animation 3d)
     */
    private int degreeY;
    /**
     * b Animation rotation angle of half (third Animation 3d)
     */
    private int degreeNextY;
    /**
     * Animation rotation angle of canvas (second animation 2d)
     */
    private int degreeZ;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;
        int x = centerX - bitmap.getWidth() / 2;
        int y = centerY - bitmap.getHeight() / 2;

        // a half treatment
        canvas.save();

        camera.save();
        canvas.translate(centerX, centerY);
        // 3d rotation of the first animation
        camera.rotateY(degreeY);
        // Rotate canvas
        canvas.rotate(degreeZ);
        // At this time, the positive center of the icon is the same as the coordinate origin
        canvas.clipRect(0, -centerY, centerX, centerY);
        camera.applyToCanvas(canvas);
        // Remember to rotate the canvas back
        canvas.rotate(-degreeZ);
        canvas.translate(-centerX, -centerY);
        camera.restore();

        canvas.drawBitmap(bitmap, x, y, paint);
        canvas.restore();

        // b half treatment
        canvas.save();

        camera.save();
        canvas.translate(centerX, centerY);
        // b rotate the other half as well (keep the other half still)
        canvas.rotate(degreeZ);
        // 3d rotation of the third animation
        camera.rotateY(degreeNextY);
        // At this time, the positive center of the icon is the same as the coordinate origin
        canvas.clipRect(-centerX, -centerY, 0, centerY);
        camera.applyToCanvas(canvas);
        // Remember to rotate the canvas back
        canvas.rotate(-degreeZ);
        canvas.translate(-centerX, -centerY);
        camera.restore();

        canvas.drawBitmap(bitmap, x, y, paint);
        canvas.restore();
    }

The detailed code is in my GitHub Welcome to star.