Kotln动画练习，小球跳动
- 作者: PassBusiness
- 来源: 51数据库
- 2021-08-22
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()
}
}
}
运行结果
推荐阅读
热点文章
android中Bitmap用法(显示,保存,缩放,旋转)实例分析
12
android 仿微信聊天气泡效果实现思路
1
Android的尺度，drawable-xxxxxxx
2
Codeforces Round #656 (Div. 3) (C、D题)
1
Android之handler异步消息处理机制解析
6
GridView中图片显示出现上下间距过大，左右图片显示类似瀑布流的问题
0
AsyncTask的简单使用
5
两个简单Fragment之间的通信（三种方式）
18
uboot修改设置boot参数命令
41
android中实现从相册中一次性获取多张图片与拍照，并将选中的图片显示出来
2
