Kotln动画练习，小球跳动

AndroidStudio自定义动画
练习二
1.动画效果
三个小球跳动

2.主体分析思路
拆分为多个部分
寻找关系
每个部分的绘制
寻找动画因子
创建动画

。。。。。。。。。。。。。。。
拆分为多个部分：
三个小球

寻找关系：

每个部分的绘制：
使用onDraw Paint画笔 canvas画布 canvas.drawCircle 画圆

寻找动画因子：
在整个过程中，改变的都是小球的半径
使用scale与radius相乘，来控制小球的缩放

创建动画：
创建了三个动画，第一个动画时，scales[0] 从1到0.3到1，但是scales[1]和scales[2] 一直都是1，所以表现就是只有第一个小球在跳动，其余两个没动。第二个动画同理，同时加一个开始的延迟时间，可以和第一个动画有时间差。第三个动画同理。最后把这系动画放到一个集合，进行play

3.详细代码
3.1 创建的kotlin的类，画出对应部分的图片
对应的代码

class purlseAnim: View {

    // 画笔， 懒加载， 调用的时候加载
    private val mPaint: Paint by lazy {
        Paint().apply {
            color = Color.GREEN
            style = Paint.Style.FILL
        }
    }
    // 设置小球的半径
    private var radius = 0f
    // 设置小球的x坐标
    private var cx = 0f

    constructor(context: Context): super(context){}
    constructor(context: Context, attributeSet: AttributeSet):super(context, attributeSet){}

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        if (width >= height){
            radius = height/2f
            if (radius*7f > width){
                radius = height/7f
            }
        }else{
            radius = width/7f

        }

        cx = (width - 7f*radius)/2 + radius
    }
    override fun onDraw(canvas: Canvas?) {
        canvas?.drawCircle(cx, height/2f, radius,mPaint)
        canvas?.drawCircle(cx+2.5f*radius, height/2f, radius,mPaint)
        canvas?.drawCircle(cx+(2.5f*radius)*2f, height/2f, radius,mPaint)
    }
}

对应的xml代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/mStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/mStart"
        app:layout_constraintTop_toTopOf="@+id/mStart" />

    <Button
        android:id="@+id/mStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:text="start"
        app:layout_constraintEnd_toStartOf="@+id/mStop"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <com.android.mymouselodinganimationauto1.purlseAnim
        android:id="@+id/mPurlseView"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mStart" />

</androidx.constraintlayout.widget.ConstraintLayout>

运行的结果

3.2 开始添加动画

对应的kotlin类的代码

class purlseAnim: View {

    // 画笔， 懒加载， 调用的时候加载
    private val mPaint: Paint by lazy {
        Paint().apply {
            color = Color.GREEN
            style = Paint.Style.FILL
        }
    }
    // 设置小球的半径
    private var radius = 0f
    // 设置小球的x坐标
    private var cx = 0f

    // 延迟时间
    private val animDelays = arrayOf(120L, 240L, 360L)
    // 每个圆的缩放比例
    private val scales = arrayOf(1f, 1f, 1f)
    // 动画的集合
    private val allAnim = AnimatorSet()


    constructor(context: Context): super(context){}
    constructor(context: Context, attributeSet: AttributeSet):super(context, attributeSet){}

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        if (width >= height){
            radius = height/2f
            if (radius*7f > width){
                radius = height/7f
            }
        }else{
            radius = width/7f

        }

        cx = (width - 7f*radius)/2 + radius
    }
    override fun onDraw(canvas: Canvas?) {
        canvas?.drawCircle(cx, height/2f, radius*scales[0],mPaint)
        canvas?.drawCircle(cx+2.5f*radius, height/2f, radius*scales[1],mPaint)
        canvas?.drawCircle(cx+(2.5f*radius)*2f, height/2f, radius*scales[2],mPaint)
    }

    private fun createAnim(){
        val lists = mutableListOf<ValueAnimator>()
        for (index in 0..2){
            val anim = ValueAnimator.ofFloat(1f, 0.3f, 1f ).apply {
                duration = 650
                repeatCount = ValueAnimator.INFINITE
                startDelay = animDelays[index]
                addUpdateListener {
                    scales[index] = it.animatedValue as Float
                    invalidate()
                }
            }
            lists.add(anim)
        }

        for (anim in lists){
            allAnim.play(anim)
        }
    }


    fun startAnimator(){
        createAnim()
        allAnim.start()
    }
    fun stopAnimator(){
        allAnim.end()
    }

}

对应的xml代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/mStop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Stop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/mStart"
        app:layout_constraintTop_toTopOf="@+id/mStart" />

    <Button
        android:id="@+id/mStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:text="start"
        app:layout_constraintEnd_toStartOf="@+id/mStop"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <com.android.mymouselodinganimationauto1.purlseAnim
        android:id="@+id/mPurlseView"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mStart" />

</androidx.constraintlayout.widget.ConstraintLayout>

对应的MainActivity代码

package com.android.mymouselodinganimationauto1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // view是指自己创建的类的id值
        mStart.setOnClickListener {
            //mouseView.startAnim()
            mPurlseView.startAnimator()
        }
        mStop.setOnClickListener {
            //mouseView.stopAnim()
            mPurlseView.stopAnimator()
        }
    }
}

运行结果

本文地址：https://blog.csdn.net/weixin_44614751/article/details/108703600