利用canvas自定义view并且添加动画

首先要给自己设置的view起一个名字，由于我是在登录界面，当我点击登录按钮的时候，触发一系列动画，所以我给我的view起名为loginView,初始化自己的界面代码如下：

class loginView(context: Context?, attrs: AttributeSet?): View(context, attrs) {}

然后在大括号里面运用canvas画出来自己view的样式，这个需要新建一个class

class loginView(context: Context?, attrs: AttributeSet?): View(context, attrs) {

//定义三个不同的画笔，第一个画外框，第二个画文字，第三个画

val paint1=Paint()
fun setPaint1(){
    paint1.setARGB(255,255,142,109)
    paint1.strokeWidth=10f
    paint1.style=Paint.Style.FILL
}
val paint2=Paint()
fun setPaint2(){
    paint2.setColor(Color.WHITE)
    paint2.style=Paint.Style.FILL
    paint2.textSize=50f
    paint2.textAlign= Paint.Align.CENTER
}
val paint3=Paint()
fun setPaint3(){
    paint3.setColor(Color.WHITE)
    paint3.style=Paint.Style.FILL
    paint3.strokeWidth=6f
}
//设置状态

var goon=false
var initial=true
//设置变量

var starX=0f
var starY=0f
//重写onDraw函数把，想要的图形画出来

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
//获取view的宽和高
    val width=getWidth()
    val height=getHeight()
//由于要形成动画，我定义在规定时间里面刷新40次，总共走的路程是（width-height）/2f,所以每次走的路程如下

    var intervalTime=(width-height)/80f
    setPaint1()
    setPaint2()
    setPaint3()
//定义初始画面

if(initial) {
    canvas.drawRoundRect(0f,0f,width*1f,height*1f,height/2f,height/2f,paint1)
    val fontmetrics=paint2.getFontMetrics()
    val top=fontmetrics.top
    val bottom=fontmetrics.bottom
    canvas.drawText("登录",width/2f,(height-top-bottom)/2f,paint2)
}

 

 

 //当点击这个view时，登录二字消失，外框横向平滑缩小，之后滑出一个对号

if(goon){
    initial=false
    canvas.drawRoundRect(starX,0f,width-starX,height*1f,height/2f,height/2f,paint1)
    starX=starX+intervalTime
    if(starX>=(width-height)/2f){
        starX=(width-height)/2f
//这个是判断外框横向缩小
        if(starY<=height/4f) {
            canvas.drawLine(width/2f-height/4f,height/2f,width/2f-height/4f+starY,height/2f+starY,paint3)
            starY=starY+height/80f
        }
//这个是判断画对号
        else if(starY<=height/2f){
            canvas.drawLine(width/2f-height/4f,height/2f,width/2f,3*height/4f,paint3)
            canvas.drawLine(width/2f,height*3/4f,width/2f-height/4f+starY,height*3/4f-2*(starY-height/4f),paint3)
            starY=starY+height/80f
        }
        else{
            starX=0f
            starY=0f
            goon=false
        }
    }
//每隔五秒刷新一次view
    postInvalidateDelayed(5)
}
//当完成后定格在以下canvas画的图形上

if(!goon&&!initial){
    canvas.drawRoundRect((width-height)/2f,0f,(width+height)/2f,height*1f,height/2f,height/2f,paint1)
    canvas.drawLine(width/2f-height/4f,height/2f,width/2f,3*height/4f,paint3)
    canvas.drawLine(width/2f,3*height/4f,width/2f+height/4f,height/4f,paint3)
}

}

}

//页面布局文件如下

<com.example.time_01.loginView

  android:id="@+id/login"

  android:layout_width="313dp"

  android:layout_height="60dp"

  android:layout_gravity="center_horizontal"

  android:layout_marginTop="502dp"/>

//在activity界面添加点击事件

login.setOnClickListener {
    if (username.text.toString() == "Username" && pwd.text.toString() == "123456") {
        login.goon = true
        login.invalidate()
        val loginIntent = Intent(this, MainActivity::class.java)
        val task: TimerTask = object : TimerTask() {
            override fun run() {
                startActivity(loginIntent)
                login.initial=true
            }
        }
        val timer = Timer()
        timer.schedule(task, 1500)
    } else {
        Toast.makeText(this, "账号或者密码错误，请重新输入！", Toast.LENGTH_SHORT).show()
    }
}
//最后动画展示效果是这样的然后实现登录跳转