How to draw a path and hide it's tail simultaneously with fading animation in android custom view.(Like keyboard swipe animation)

38 views Asked by At

What I'm trying to achieve is the swipe/slide animation for the soft keyboard in Android. This is what I've done so far. In this method, I'm generating a list of paths from a drawn path. object and having a timer I'm able to get the last items of the generated list and draw those paths again in the canvas. Using this method, I am able to simultaneously draw and hide the swipe pattern. Is this approach right? to get the swipe animation like the Gboard soft keyboard.

class CustomView(context: Context, attrs: AttributeSet) : View(context, attrs) {

        var startPath = 0.75
        
        class EraseTimer(val view: CustomView) : CountDownTimer(5000, 1000) {
            override fun onTick(millisUntilFinished: Long) {
                if (view.startPath < 1) {
                    view.startPath += 0.05
                    view.invalidate()
                } else {
                    view.startPath = 1.0
                    view.invalidate()
                    if (!view.drawEnd) {
                        view.startPath = 0.75
                        view.invalidate()
                    } else {
                        onFinish()
                        cancel()
                    }
                }
            }

            override fun onFinish() {
                view.drawPath.reset()
                view.drawPath.moveTo(view.lastX, view.lastY)
                view.startPath = 0.75
                if (!view.drawEnd)
                    start()
            }
        }

        override fun onTouchEvent(event: MotionEvent): Boolean {
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    super.onTouchEvent(event)
                    drawPath.moveTo(event.x, event.y)
                    eraseTimer.start()
                    drawEnd = false
                }

                MotionEvent.ACTION_MOVE -> {
                    drawPath.lineTo(event.x, event.y)
                    paths.add(drawPath)
                }

                MotionEvent.ACTION_UP -> {
                    startPath = 0.75
                }
            }
            invalidate()
            return true
        }

        override fun onDraw(canvas: Canvas) {
            for (path in segmentPath(drawPath, 1f))
                canvas.drawPath(path, drawPaint)
        }

        fun segmentPath(
            path: Path?, segmentLength: Float,
        ): List<Path> {
            val pm = PathMeasure(path, false)
            val length = pm.length
            var start = (length * startPath).toFloat()
            val segments: MutableList<Path> = ArrayList()
            while (start <= length) {
                var end = start + segmentLength
                if (end > length) {
                    end = length
                }
                val segment = Path()
                pm.getSegment(start, end, segment, true)
                segments.add(segment)
                start += segmentLength
            }
            return segments
        }
    }

Using this, I can draw and hide a path at the same time or achieve something like that. What I like to do is animate the hiding end like a swipe animation on Gboard.

0

There are 0 answers