Анимация clipPath от onDraw - PullRequest
Новая
       46

Анимация clipPath от onDraw

0 голосов
/ 15 июня 2019

Я рисую пользовательскую фигуру в onDraw с Paint и Canvas.Внутри класса onDraw у меня есть прямоугольник clipPath.

. Я хотел бы иметь возможность анимировать положение (анимировать слева направо) для clipPath из MainActivity.Это скроет нарисованную фигуру (BlackGraph) слева направо. 

class BlackGraph(context: Context) : View(context) {

    var clipAmount:Float = 0.0f

    override fun onDraw(canvas: Canvas) {
        val paint = Paint()
        paint.style = Paint.Style.FILL
        paint.color = Color.parseColor("#000000")
        val path = Path()

        val clipPath = Path()
        clipPath.addRect(clipAmount, 0f, width.toFloat(), height.toFloat(), Path.Direction.CW)
        canvas.clipPath(clipPath)

        path.moveTo(0f, height-30.toFloat())
        path.lineTo(width.toFloat(), 0f)
        path.lineTo(width.toFloat(), height.toFloat())
        path.lineTo(0f, height.toFloat())
        path.lineTo(0f, 0f)

        canvas.drawPath(path, paint)

    }
}

In onCreate : 

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val layout1 = findViewById<android.support.constraint.ConstraintLayout>(R.id.layout1)
    val blackGraph = BlackGraph(this)

    layout1.addView(blackGraph)

    val valueAnimator = ValueAnimator.ofFloat(0f, 450f)
    valueAnimator.addUpdateListener {
        val value = it.animatedValue as Float
        println("Value -> $value")
        blackGraph.clipAmount = value
    }
    valueAnimator.duration = 2000
    valueAnimator.start()

}

Я пытаюсь просто анимировать позициюclipAmount для достижения желаемой анимации.

Проблема в onCreate, значение clipAmount никогда не анимируется.Однако заявление о печати работает просто отлично.Logcat полон значений с плавающей точкой в ​​диапазоне от 0,0 до 450,0

Как я могу анимировать движение clipPath?

1 Ответ

1 голос
/ 15 июня 2019

Хорошо, у вас есть некоторые проблемы здесь. Во-первых, вы не должны инициировать Paint, Path в onDraw (), сначала его нужно инициализировать, и вы можете изменить его позже, и вы получите лучшую производительность. Когда вы обновляете значение clipAmount, вам нужно вызвать postInvalidateOnAnimation(), чтобы ваш BlackGraph вид снова начал рисовать, это вызовет метод onDraw(). Последнее, что нужно clipPath, - это вызвать reset(), чтобы очистить, прежде чем добавлять новый путь с методом addRect().

. 
class BlackGraph(context: Context) : View(context) {

    var clipAmount:Float = 0.0f
    val paint = Paint().apply {
        style = Paint.Style.FILL
        color = Color.parseColor("#000000")
    }
    val path = Path()
    val clipPath = Path()

    override fun onDraw(canvas: Canvas) {
        clipPath.apply {
            reset()
            addRect(clipAmount, 0f, width.toFloat(), height.toFloat(), Path.Direction.CW)
        }
        canvas.clipPath(clipPath)

        path.moveTo(0f, height-30.toFloat())
        path.lineTo(width.toFloat(), 0f)
        path.lineTo(width.toFloat(), height.toFloat())
        path.lineTo(0f, height.toFloat())
        path.lineTo(0f, 0f)

        canvas.drawPath(path, paint)
    }

    fun animateClipAmount() {
        val valueAnimator = ValueAnimator.ofFloat(0f, 450f)
        valueAnimator.addUpdateListener {
            val value = it.animatedValue as Float
            clipAmount = value
            println("Value -> $clipAmount")
            postInvalidateOnAnimation()
        }
        valueAnimator.duration = 2000
        valueAnimator.start()
    }

}

InCreate: 

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val layout1 = findViewById<android.support.constraint.ConstraintLayout>(R.id.layout1)

        val blackGraph = BlackGraph(this)
        layout1 .addView(blackGraph)
        blackGraph.animateClipAmount()
    }

}
...