Kotln动画练习，小球跳动

程序员文章站 2022-06-24 19:08:04

AndroidStudio自定义动画练习二1.动画效果三个小球跳动2.主体分析思路拆分为多个部分寻找关系每个部分的绘制寻找动画因子创建动画。。。。。。。。。。。。。。。拆分为多个部分：三个小球寻找关系：每个部分的绘制：使用onDraw Paint画笔 canvas画布 canvas.drawCircle 画圆寻找动画因子：在整个过程中，改变的都是小球的半径使用scale与radius相乘，来控制小球的缩放创建动画：创建了三个动画，第一个动画时，scales...

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

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

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

寻找关系：
Kotln动画练习，小球跳动
每个部分的绘制：
使用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>

运行的结果
Kotln动画练习，小球跳动

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()
        }
    }
}

运行结果
Kotln动画练习，小球跳动

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

上一篇：正则表达式中的"g"是什么意思附件参数g的用法

下一篇： ios的UIView和UIViewController的生命周期

Kotln动画练习，小球跳动

Flash AS2实例跳动的小球动画效果

Maya怎么制作小球曲线跳动的动画?

Animate怎么实现小球做*落体运动? Animate小球弹跳动画做法

AE怎么制作一个小球在地面跳动的动画?

ps制作gif动画-跳动的小球实例教程