Android自定义观点实现粉碎的面具效果

  

0。   

首先话不多说,先上效果图

  

 Android自定义观点实现粉碎的面具效果”> <br/>
  </p>
  <p>这个gif把效果放慢了,真是运行时会快很多。</p>
  <p> </p>
  <p>看效果,咱们可以分析一下,整个效果有四种状态,第一种就是普通状态,第二种是抖动状态,第三种是隐藏图片和粉碎状态,最后就是粉碎完成的状态,这么一分析就很好搞了,根据不同的状态来写代码。</p>
  <p> </p>
  <p>首先是普通状态,就是一个图片的展示,这里我们可以看一下setImage方法</p>
  
  <pre类=   乐趣setImage(渣油:Int)   {   形象=BitmapFactory.decodeResource (context.resources、渣油、空)   preapreCircleColor ()   postInvalidate ()   }      

可以看到的图像是一个位图,图片来自可拉的,这没什么可说的,还有一个就是prepareCircleColor方法,这个方法是用来读取位图不同位置的像素颜色,一次来确定粉碎时各个粒子的颜色。

        私人乐趣preapreCircleColor ()   {   图片# 63;。让{   val一步=??Math.sqrt (circleNum.toDouble ())   (我在0。宽度步step.toInt ())   {   0,直到(j。高度的一步step.toInt ())   {   val颜色=;袢∠袼?i, j)   如果(circleAttributeList。大小比;0)   {   circleAttributeList (i * 10 + j)。颜色=颜色   }   }      }   }   }      

3。抖动状态

  

抖动我们通过一个ValueAnimator来实现

        私人乐趣initShakingAnimator ()   {   shakingAnimator=ValueAnimator.ofInt (shakeCount)   shakingAnimator。时间=shakeDuration.toLong ()   shakingAnimator.addListener (shakingListener)   shakingAnimator。addUpdateListener {   shakingNum=nimatedValue作为Int   postInvalidate ()   }   }      

shakeCount代表了都动的次数,shakeDuration代表抖动的时间,这两个属性可以通过布局文件来配置。
  在onDraw里可以看到drawShakingImage方法

        私人乐趣drawshakingImage(画布:帆布,centerX:浮动,centerY:浮动)   {   图片# 63;。让{   var抵消=0   如果(抵消==shakeCount抵消=)   {   0   其他}   {   如果(shakingNum % 2==0) shakeOffset -shakeOffset   }   画布。drawBitmap(图片,centerX +抵消——它。宽/2,centerY +抵消——它。高度/2、油漆)   }   }      

方法很简单,就是不停的绘制左右偏移的位图,当到达最大次数的时候偏移量为0。动画结束后,将状态位置为STATE.FADE

        私人val shakingListener=对象:AnimatorListenerAdapter ()   {      覆盖乐趣>   数据类CircleAttribute (var startVerVelocity:浮动,var horVelocity:浮动,   var orX:浮动,var orY:浮动,   var x:浮动,var y:浮动,var颜色:Int, var半径:浮动)      

这个类用来表示每个粒子起始时竖直方向的速度,水平方向的速度,起始坐标,位置坐标,粒子颜色和半径。
  接着在onMeasure结束后,调用了一个方法prepareCircleAttributeList ()

        私人乐趣prepareCircleAttributeList ()   {   circleAttributeList.clear ()   val centerX=measuredWidth.toFloat ()/2   val centerY=measuredHeight.toFloat ()/2   val maxVerVelocity=measuredHeight/bombDuration   val maxHorVelocity=measuredWidth/2/bombDuration   一个=maxVerVelocity * 3/bombDuration      (我在0直到circleNum)   {   var=Color.WHITE颜色   val一步=Math.sqrt (circleNum.toDouble ()) .toInt ()   var x=centerX   var y=centerY   图片# 63;。让{   val posXStep=it.width/步骤   val posYStep=it.height/步骤   val topX=centerX-it.width/2   val topY=centerY-it.height/2   val行=i/步骤   val坳=我一步   颜色=;袢∠袼?行* posXStep坳* posYStep)   x=topX +行* posXStep.toFloat ()   y=topY +坳* posYStep.toFloat ()   }   val随机=math . random ()   val信号=(随机* 4).toInt ()   val startVelocity=(math . random () * maxVerVelocity) .toFloat ()   val horVelocity=如果(信号% 2==0)(math . random () * maxHorVelocity) .toFloat其他()——(math . random () * maxHorVelocity) .toFloat ()   val属性=CircleAttribute (startVelocity horVelocity x, y, x, y,颜色,(math . random () * 15) .toFloat ())   circleAttributeList.add(属性)   }   }

Android自定义观点实现粉碎的面具效果