天天看點

android Path動畫簡單使用例子

這段時間研究了下path動畫,簡單的寫了個demo,廢話不多說,直接上代碼,相信有基礎的程式猿都能看懂,效果如最下面的圖檔,簡單的畫一個三角形,畫完每條邊停頓一下

package leon.com.pathanimationtest

import android.animation.AnimatorSet
import android.animation.ObjectAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View


/**
 * Created by leon on 2018/6/21.
 */
class SelfView : View {
    var mPaint: Paint = Paint()
    var length1: Float = 0.0f
    var length2: Float = 0.0f
    var length3: Float = 0.0f
    private var oom: Float = 0.0f
    lateinit var animatorLine1: ObjectAnimator
    lateinit var animatorLine2: ObjectAnimator
    lateinit var animatorLine3: ObjectAnimator
    lateinit var mPath: Path

    constructor(context: Context) : super(context) {
        initPaint()
    }

    constructor(context: Context, mAttributeSet: AttributeSet) : super(context, mAttributeSet) {
        initPaint()
    }

    constructor(context: Context, mAttributeSet: AttributeSet, defStyleAttr: Int) : super(context, mAttributeSet, defStyleAttr) {
        initPaint()
    }

    private fun initPaint() {
        mPaint.color = Color.BLACK
        mPaint.isAntiAlias = true
        mPaint.strokeWidth = 10f
        mPaint.style = Paint.Style.STROKE //一定要設定為畫線條
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val widthSpecSize = View.MeasureSpec.getSize(widthMeasureSpec)
        val heightSpecSize = View.MeasureSpec.getSize(heightMeasureSpec)
        val mLayoutSize = Math.min(widthSpecSize, heightSpecSize)
        setMeasuredDimension(mLayoutSize, mLayoutSize)
    }

    fun setData() {
        prepareDraw()
        animatorLine1 = ObjectAnimator.ofFloat(this, "percentage", 0.0f, length1 / length3)
        animatorLine1.duration = 1000
        animatorLine2 = ObjectAnimator.ofFloat(this, "percentage", length1 / length3, length2 / length3)
        animatorLine2.duration = 1000
        //animatorLine2.start()
        animatorLine3 = ObjectAnimator.ofFloat(this, "percentage", length2 / length3, 1.0f)
        animatorLine3.duration = 1000
        //animatorLine3.start()
        var animationSet = AnimatorSet()
        animationSet.playSequentially(animatorLine1, animatorLine2, animatorLine3)
        // animatorLine1.start()
        animatorLine2.startDelay = 1200
        animatorLine3.startDelay = 2400
        animatorLine1.start()
        animatorLine2.start()
        animatorLine3.start()
    }

    private fun prepareDraw() {
        mPath = Path()
        mPath.moveTo(100f, 100f)   //定位path的起點
        mPath.lineTo(100f, 400f)
        val measure = PathMeasure(mPath, false)
        length1 = measure.length

        mPath.lineTo(200f, 100f)
        val measure2 = PathMeasure(mPath, false)
        length2 = measure2.length
        mPath.lineTo(95f, 100f)
        //path.close()
        val measure3 = PathMeasure(mPath, false)
        length3 = measure3.length

    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        var totalLength: FloatArray = floatArrayOf(length3, length3)
        var effect = DashPathEffect(totalLength, (1.0f - oom) * length3)
        mPaint.pathEffect = effect
        canvas?.drawPath(mPath, mPaint)
    }

    fun setPercentage(progress: Float) {
        oom = progress
        invalidate()
    }
}      
android Path動畫簡單使用例子