Shulou(Shulou.com)06/03 Report--

This article mainly shows you "Android how to customize spherical water ripple belt arc progress effect", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "Android how to customize spherical water ripple belt arc progress effect" this article.

Demand

As follows, to achieve a circular water ripple with progress, two layers of water ripples need to be displayed gradually, and there is a circular arc progress on the periphery.

Train of thought

Peripheral arc progress: can be achieved through canvas.drawArc (). Because the arc needs to achieve a gradual change, you can set shader (SweepGradient) rendering to the brush. In order to ensure that the color value at the beginning of the arc is always consistent, the parameters of shader need to be adjusted dynamically. See synonyms at specific

SweepGradient (centerX.toFloat (), centerY.toFloat (), circleColors [0], floatArrayOf (0f, value / 100f))

The fourth parameter needs to fill in the corresponding data proportion according to the current progress. Students who do not understand can consult Baidu on their own.

Water ripple realization: directly using the Bezier curve Path.quadTo () to achieve, by stretching the horizontal line to draw the wave effect. The wave height can be controlled by controlling the height of the stretch point (waveAmplitude) from the horizontal line. As for the movement of waves, it can be achieved by moving the starting position of the translation horizontal line. In order to display waves stably, it is necessary to strictly draw waves with integer times of period in order to display stably.

Implementation of the circle: draw a complete circle, and then use Path.op () to combine the water ripple path. Note that there is a hole in Android6, and there will be obvious jitter when using this method. In order to solve this problem, I will draw an extra arc to cover up the jitter.

Lifecycle control: in order to reduce the wear and tear of CPU at certain times, the starting pause of animation is controlled by controlling the variable custom lifeDelegate (kotlin-based proxy mode implementation). Since the framework I use is based on MVVM, the code does not use attrs to control properties, so I won't make too many changes here.

Overall realization

Class WaveView (context: Context, attributeSet: AttributeSet? = null): View (context, attributeSet) {companion object {const val RESUME = 0x1 const val STOP = 0x2 const val DESTROY = 0x3} private var mWidth = 0 / / the overall width of the control private var mHeight = 0 / / the overall height of the control / / the center of the control, x Y coordinate private var centerX = 0 private var centerY = 0 private var outerRadius = radius of outer ring private var innerRadius = radius of 250f// inner circle private var radiusDist = radius difference between inner and outer circles of 50f// private var fWaveShader: LinearGradient? = null private var sWaveShader: LinearGradient? = null private var wavePath = Path () private var waveCirclePath = Path () privateval waveNum = 2 / / gradient color array privateval waveColors by lazy {arrayListOf (/ / crimson intArrayOf (Color.parseColor ("# E8E6421A")) Color.parseColor ("# E2E96827"), intArrayOf (Color.parseColor ("# E8E6421A"), Color.parseColor ("# E2F19A7F"), / / Orange intArrayOf (Color.parseColor ("# E8FDA085"), Color.parseColor ("# E2F6D365"), intArrayOf (Color.parseColor ("# E8FDA085"), Color.parseColor ("# E2F5E198"), / / Green intArrayOf (Color.parseColor ("# E8009EFD"), Color.parseColor ("# E22AF598")), intArrayOf (Color.parseColor ("# E8009EFD")) Color.parseColor ("# E28EF0C6"))} / / gradient of the outer ring privateval circleColors by lazy {arrayListOf (/ / Crimson intArrayOf ("# FFF83600"), Color.parseColor ("# FFF9D423")), / / Orange intArrayOf (Color.parseColor ("# FFFDA085"), Color.parseColor ("# FFF6D365")), / / Green intArrayOf (Color.parseColor ("# FF2AF598")) Color.parseColor ("# FF009EFD"))} privateval wavePaint by lazy {val paint = Paint () paint.isAntiAlias = true paint.strokeWidth = 1f paint} / / Wave height ratio private var waveWaterLevelRatio = 0f / / Wave amplitude private var waveAmplitude = 0f / / Wave maximum amplitude height private var maxWaveAmplitude = 0f / / the brush privateval outerCirclePaint by lazy of the outer circle privateval outerCirclePaint by lazy {val paint = Paint () paint.strokeWidth = 20f paint.strokeCap = Paint.Cap.ROUND paint.style = Paint.Style. STROKE paint.isAntiAlias = true paint} privateval outerNormalCirclePaint by lazy {val paint = Paint () paint.strokeWidth = 20f paint.color = Color.parseColor ("# FFF2F3F3") paint.style = Paint.Style.STROKE paint.isAntiAlias = true paint} privateval bgCirclePaint by lazy {val paint = Paint () paint.color = Color.parseColor ("# FFF6FAFF") paint.style = Paint.Style.FILL paint.isAntiAlias = true paint} privateval textPaint by lazy {val paint = Paint () paint.style = Paint.Style.FILL paint.textAlign = Paint.Align .Center paint.isFakeBoldText = true paint.isAntiAlias = true paint} privateval ringPaint by lazy {val paint = Paint () paint.style = Paint.Style.STROKE paint.color = Color.WHITE paint.isAntiAlias = true paint} / / the rectangle privateval outerCircleRectf by lazy {val rectF = RectF () rectF.set (centerX-outerRadius + outerCirclePaint.strokeWidth) where the outer circle is located CenterY-outerRadius + outerCirclePaint.strokeWidth, centerX + outerRadius-outerCirclePaint.strokeWidth, centerY + outerRadius-outerCirclePaint.strokeWidth) rectF} / / the color grader matrix of the outer circle Used to turn on the gradient from 90 degrees, because a small circle at the head of the line will cause display differences, so draw privateval sweepMatrix by lazy {val matrix = Matrix () matrix.setRotate (88f, centerX.toFloat (), centerY.toFloat ()) matrix} / / Progress 0-100 var percent = 0 set (value) {field = value waveWaterLevelRatio = value / 100f / / y =-4 * x2 + 4x parabola to calculate the amplitude The law of water ripple amplitude is more real waveAmplitude = (- 4 * (waveWaterLevelRatio * waveWaterLevelRatio) + 4 * waveWaterLevelRatio) * maxWaveAmplitude// waveAmplitude = if (value)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.