android开发分享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()         }     } } 

运行结果