自定义View示例-05 仿红板报翻页效果

1.效果图

animation-01.gif
animation-02.gif

2.思路分析

2.1 绘制图片

2.2 绘制图片折叠效果

2.3 绘制图片旋转折叠效果

2.4 添加动画

3.具体实现

3.1 绘制图片

        public static Bitmap getAvatarWithImage(Resources res,int width,int id){
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeResource(res, id,options);
            options.inJustDecodeBounds = false;
            options.inDensity = options.outWidth;
            options.inTargetDensity = width;
            return BitmapFactory.decodeResource(res,id,options);
        }

3.2 绘制图片折叠效果

3.3 绘制图片旋转折叠效果

这里用到了Camera

        private static final float PADDING = DpToPxUtil.dp2px(100);
        private static final float IMAGE_WIDTH = DpToPxUtil.dp2px(200);
        private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    
        private Bitmap mBitmap;
    
        private Camera mCamera = new Camera();
    
        {
            mBitmap = CMBitMapUtils.getAvatarWithImage(getResources(),(int) DpToPxUtil.dp2px(200),R.drawable.sun_photo);
            mCamera.setLocation(0, 0, DpToPxUtil.getZForCamera()); // -8 = -8 * 72
        }
    
        float topFlip = 0;
        float bottomFlip = 0;
        float flipRotation = 0;
    
        public float getTopFlip() {
            return topFlip;
        }
    
        public void setTopFlip(float topFlip) {
            this.topFlip = topFlip;
            invalidate();
        }
    
        public float getBottomFlip() {
            return bottomFlip;
        }
    
        public void setBottomFlip(float bottomFlip) {
            this.bottomFlip = bottomFlip;
            invalidate();
        }
    
        public float getFlipRotation() {
            return flipRotation;
        }
    
        public void setFlipRotation(float flipRotation) {
            this.flipRotation = flipRotation;
            invalidate();
        }
    
    
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            canvas.save();
            canvas.translate((PADDING + IMAGE_WIDTH/2),(PADDING + IMAGE_WIDTH/2));
            canvas.rotate(-flipRotation);
            mCamera.save();
            mCamera.rotateX(topFlip);
            mCamera.applyToCanvas(canvas);
            mCamera.restore();
            canvas.clipRect(-  IMAGE_WIDTH,- IMAGE_WIDTH,IMAGE_WIDTH,0);
            canvas.rotate(flipRotation);
            canvas.translate(-(PADDING + IMAGE_WIDTH/2),-(PADDING + IMAGE_WIDTH/2));
            canvas.drawBitmap(mBitmap,PADDING,PADDING,mPaint);
            canvas.restore();
    
            canvas.save();
            canvas.translate((PADDING + IMAGE_WIDTH/2),(PADDING + IMAGE_WIDTH/2));
            canvas.rotate(-flipRotation);
            mCamera.save();
            mCamera.rotateX(bottomFlip);
            mCamera.applyToCanvas(canvas);
            mCamera.restore();
            canvas.clipRect( - IMAGE_WIDTH,0,IMAGE_WIDTH,IMAGE_WIDTH);
            canvas.rotate(flipRotation);
            canvas.translate(-(PADDING + IMAGE_WIDTH/2),-(PADDING + IMAGE_WIDTH/2));
            canvas.drawBitmap(mBitmap,PADDING,PADDING,mPaint);
            canvas.restore();
        }

3.4 添加动画

            mSunView = findViewById(R.id.sun);
    
            mSunView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
                    ObjectAnimator bottomFlipAnimator = ObjectAnimator.ofFloat(mSunView, "bottomFlip", 45);
                    bottomFlipAnimator.setDuration(1500);
    
                    ObjectAnimator flipRotationAnimator = ObjectAnimator.ofFloat(mSunView, "flipRotation", 270);
                    flipRotationAnimator.setDuration(1500);
    
                    ObjectAnimator topFlipAnimator = ObjectAnimator.ofFloat(mSunView, "topFlip", - 45);
                    topFlipAnimator.setDuration(1500);
    
    //        AnimatorSet animatorSet = new AnimatorSet();
    //        animatorSet.playSequentially(bottomFlipAnimator, flipRotationAnimator, topFlipAnimator);
    //        animatorSet.setStartDelay(1000);
    //        animatorSet.start();
    
                    PropertyValuesHolder bottomFlipHolder = PropertyValuesHolder.ofFloat("bottomFlip", 45);
                    PropertyValuesHolder flipRotationHolder = PropertyValuesHolder.ofFloat("flipRotation", 270);
                    PropertyValuesHolder topFlipHolder = PropertyValuesHolder.ofFloat("topFlip", - 45);
                    ObjectAnimator objectAnimator = ObjectAnimator.ofPropertyValuesHolder(mSunView, bottomFlipHolder, flipRotationHolder, topFlipHolder);
                    objectAnimator.setStartDelay(1000);
                    objectAnimator.setDuration(2000);
                    objectAnimator.start();
                }
            });

Demo：CMViewDemo Github地址