2.构建矩形裁剪区域并添加到Path中
由上图可以看出我们需要添加的矩形路径分为左半边部分和右半边部分，我们以左半部分第一个矩形和右半部分第一个矩形为例：左边矩形的构建参数：left=0，top=0，right=clipwidth，bottom=SINGLERECT_HEIGHT。右边矩形的构建参数：left=View_Width-clipwidth，top=SINGLERECT_HEIGHT，right=View_Width，bottom=2*SINGLERECT_HEIGHT。根据如上构建参数的规律我们总结出如下公式（其中i代表由上到下第几个矩形）：左边矩形构建公式：RectFrectleft=newRectF(0,i*SINGLEREGION_HEIGHT,cilpWidth,(i+1)*SINGLEREGION_HEIGHT)右边矩形构建公式：
RectFrectright=newRectF(View_Width-cilpWidth,i*SINGLEREGION_HEIGHT,getWidth(),(i+1)*SINGLEREGION_HEIGHT)根据如上公式我们在代码中添加路径：
//根据控件的高度来添加矩形路径for(inti=0;i*SINGLEREGION_HEIGHTgetHeight();i++){if(i%2==0){mPath.addRect(newRectF(0,i*SINGLEREGION_HEIGHT,cilpWidth,(i+1)*SINGLEREGION_HEIGHT),Path.Direction.CCW);}else{mPath.addRect(newRectF(getWidth()-cilpWidth,i*SINGLEREGION_HEIGHT,getWidth(),(i+1)*SINGLEREGION_HEIGHT),Path.Direction.CCW);}}3.在对应的路径中绘制出Bitmap这里使用Canvas的clipPath方法将画布裁切成路径的形状，然后在裁切后的画布上绘制图片。
canvas.clipPath(mPath);//根据路径裁切画布canvas.drawBitmap(mBitmap,0,0,mPaint);//在裁切后的画布上绘制图片
.利用递归实现动画效果
if(cilpWidthgetWidth()){//当矩形的宽度等于控件宽度时停止重绘return;}cilpWidth+=5;//每次绘制完需要增加clipWidth的宽度invalidate();//重绘（运用递归）5.当图片完全显示时替换图片图片完全显示也是cilpWidth控件宽度的时候。
if(cilpWidthgetWidth()){//当图片完全展示时替换图片mBitmap=Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.baozou),getWidth(),getHeight(),false);canvas.drawBitmap(mBitmap,0,0,mPaint);return;}完整代码展示
publicclassView_ClipAnimextendsView{privatePaintmPaint;privatePathmPath;privatefinalfloatSINGLEREGION_HEIGHT=30;//每个长条的高度privateBitmapmBitmap;floatcilpWidth=0;//矩形宽度publicView_ClipAnim(Contextcontext){this(context,null);}publicView_ClipAnim(Contextcontext,
NullableAttributeSetattrs){this(context,attrs,0);}publicView_ClipAnim(Contextcontext,NullableAttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);init();}/***初始化画笔等*/privatevoidinit(){mPaint=newPaint(Paint.ANTI_ALIAS_FLAG);mPath=newPath();}OverrideprotectedvoidonSizeChanged(intw,inth,intoldw,intoldh){mBitmap=Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.timg),w,h,false);cilpWidth=0;postInvalidate();super.onSizeChanged(w,h,oldw,oldh);}OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);mPath.reset();//每次绘制之前先将Path重置for(inti=0;i*SINGLEREGION_HEIGHTgetHeight();i++){if(i%2==0){mPath.addRect(newRectF(0,i*SINGLEREGION_HEIGHT,cilpWidth,(i+1)*SINGLEREGION_HEIGHT),Path.Direction.CCW);}else{mPath.addRect(newRectF(getWidth()-cilpWidth,i*SINGLEREGION_HEIGHT,getWidth(),(i+1)*SINGLEREGION_HEIGHT),Path.Direction.CCW);}}canvas.clipPath(mPath);//根据路径裁切画布canvas.drawBitmap(mBitmap,0,0,mPaint);//在裁切后的画布上绘制图片if(cilpWidthgetWidth()){//当图片完全展示时替换图片mBitmap=Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.baozou),getWidth(),getHeight(),false);canvas.drawBitmap(mBitmap,0,0,mPaint);return;}cilpWidth+=5;//每次绘制完需要增加clipWidth的宽度invalidate();//重绘（运用递归）}}扩展扫描式图片展示
这里主要是使用弧形路径来展示图片的，通过不断增加弧形角度来扩大显示区域（这里的弧形半径是通过勾股定理得出的）。publicclassView_ClipCircleAnimextendsView{privatePaintmPaint;privatefloatmRadius;//圆形的半径privatePathmPath;privateBitmapmBitmap;privateintmAngle=0;//圆形角度publicView_ClipCircleAnim(Contextcontext){this(context,null);}publicView_ClipCircleAnim(Contextcontext,
NullableAttributeSetattrs){this(context,attrs,0);}publicView_ClipCircleAnim(Contextcontext,NullableAttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);init();}privatevoidinit(){mPaint=newPaint(Paint.ANTI_ALIAS_FLAG);mPath=newPath();}OverrideprotectedvoidonSizeChanged(intw,inth,intoldw,intoldh){floata=w/2;floatb=h/2;mRadius=(float)Math.sqrt(a*a+b*b);//根据勾股定理算出圆形的半径mBitmap=Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.timg),w,h,false);super.onSizeChanged(w,h,oldw,oldh);}OverrideprotectedvoidonDraw(Canvascanvas){super.onDraw(canvas);canvas.translate(getWidth()/2,getHeight()/2);//将（0，0）点移动到画布中心if(mAngle=){canvas.drawBitmap(Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.baozou),getWidth(),getHeight(),false),-getWidth()/2,-getHeight()/2,mPaint);return;}mPath.reset();//清空路径mPath.moveTo(0,0);mPath.arcTo(newRectF(-mRadius,-mRadius,mRadius,mRadius),0,mAngle,false);//添加闭合的弧形canvas.clipPath(mPath);//裁剪画布为路径的形状canvas.drawBitmap(mBitmap,-getWidth()/2,-getHeight()/2,mPaint);mAngle++;postInvalidate();}}到这里就结束啦。预览时标签不可点收录于话题#个上一篇下一篇