Canvas加动画,实现火柴人跳绳效果

2024-09-04 01:48

本文主要是介绍Canvas加动画,实现火柴人跳绳效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

效果

在这里插入图片描述

涉及到的知识

1、canvas
2、path和二阶贝塞尔曲线
3、bitmap绘制

canvas

先引用google官方:

The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, text, Bitmap), and a paint (to describe the colors and styles for the drawing).

canvas画布,Android中绘制时,需要四个基本要素:bitmap用于存放像素点,canvas来进行绘制,基础形状:矩形,path,text,bitmap等,paint用于控制绘制的颜色和样式,canvas相关的很重要的一点是,在Android中坐标的原点是从左上角开始。

在这里插入图片描述

Path

1.moveTo
moveTo表示将绘制点移动到某一个坐标处,该方法并不会进行绘制,主要是用来移动画笔。默认情况下起始坐标位于(0,0)点。

2.lineTo
lineTo表示绘制一条直线:

 @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Path path = new Path();path.lineTo(50,50);canvas.drawPath(path, paint);

3.quadTo
用于绘制二阶贝塞尔曲线,从上一个点开始,绘制二阶Bezier曲线(x1,y1)为控制点, (x2,y2)为终点如果之前没有调用过 moveTo(),则默认从 (0,0)作为起点绘制。

 /*** 从上一个点开始,绘制二阶Bezier曲线* (x1,y1)为控制点, (x2,y2)为终点* 如果之前没有调用过 moveTo(),则默认从 (0,0)作为起点绘制。*/public void quadTo(float x1, float y1, float x2, float y2)/*** 和quadTo相同,只不过这里是使用的是相对坐标。*/public void rQuadTo(float dx1, float dy1, float dx2, float dy2)

bitmap绘制

1、获取图片的bitmap

private val jumpBitmap1 = BitmapFactory.decodeResource(context.resources, R.drawable.jump_1)

2、将bitmap绘制在画布上

   /*** @param bitmap The bitmap to be drawn* @param src May be null. The subset of the bitmap to be drawn* @param dst The rectangle that the bitmap will be scaled/translated to fit into* @param paint May be null. The paint used to draw the bitmap*/public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull Rect dst,@Nullable Paint paint) {super.drawBitmap(bitmap, src, dst, paint);}

其中 Rect src是图片的子域,通过设置src的大小可以截取图片的部分区域,dst指图片在画布上面的位置,一般情况下不裁剪图片的话,设置src为null就可以了。

实现

在这里插入图片描述
1、跳绳实现
在这里插入图片描述
如上图,path的起点和中点在屏幕的中点两边,中点的点是控制贝塞尔曲线的点,这个点上下动就可以控制绘制出一条跳绳。要注意ValueAnimator.ofInt(0, b.bottom / 2, b.bottom, b.bottom / 2, 0)的值是从0到.bottom / 2,再到bottom,在到bottom / 2,最后回到0的,如果不是这样直接从(0-》bottom)的话,贝塞尔曲线的运动轨迹就不是连续的。
2、跳动的火柴人
跳动的火柴人由两种状态,由动画的值确定,根据动画的值来改变火柴人的位置,火柴人初始位置是在画布的正中间,根据动画的值,改变上下位置,同时更改bitmap。

代码

定义PathDrawable继承Drawable并且实现AnimatorUpdateListener接口

internal class PathDrawable(context: Context) : Drawable(),AnimatorUpdateListener

定义动画,

    mAnimator = ValueAnimator.ofInt(0, b.bottom / 2, b.bottom, b.bottom / 2, 0)

更新贝塞尔曲线和火柴人

 override fun onAnimationUpdate(animator: ValueAnimator) {Log.d(TAG, "onAnimationUpdate animator${animator.animatedValue}")mPath.reset()val b: Rect = boundsmPath.moveTo(b.left.toFloat(), b.bottom.toFloat() / 2)mPath.quadTo(((b.right - b.left) / 2).toFloat(),(animator.animatedValue as Int).toFloat(), b.right.toFloat(), b.bottom.toFloat() / 2)++countif (count % 24 == 0) {currentBitmap = if (animator.animatedValue as Int > b.bottom / 2) {jumpBitmap1} else {jumpBitmap3}count = 0}destinationRect.set(b.left + (halfW(b) - imageW() / 2).toInt(),b.top + (halfH(b) - imageH() / 2).toInt() + (animator.animatedValue as Int)/8,b.left + (halfW(b) + imageW() / 2).toInt(),b.top + (halfH(b) + imageH() / 2).toInt() + (animator.animatedValue as Int)/8)invalidateSelf()}

参考

https://stackoverflow.com/questions/18616035/how-to-animate-a-path-on-canvas-android
https://developer.android.com/reference/android/graphics/drawable/Drawable
https://developer.android.com/guide/topics/graphics/drawables
https://developer.android.com/reference/android/animation/ValueAnimator
https://stackoverflow.com/questions/13361231/android-draw-bitmap-within-canvas

这篇关于Canvas加动画,实现火柴人跳绳效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1134654

相关文章

Linux下修改hostname的三种实现方式

《Linux下修改hostname的三种实现方式》:本文主要介绍Linux下修改hostname的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下修改ho编程stname三种方式方法1:修改配置文件方法2:hFvEWEostnamectl命

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Java实现将byte[]转换为File对象

《Java实现将byte[]转换为File对象》这篇文章将通过一个简单的例子为大家演示Java如何实现byte[]转换为File对象,并将其上传到外部服务器,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言1. 问题背景2. 环境准备3. 实现步骤3.1 从 URL 获取图片字节数据3.2 将字节数组

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

Python Excel实现自动添加编号

《PythonExcel实现自动添加编号》这篇文章主要为大家详细介绍了如何使用Python在Excel中实现自动添加编号效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍简单的说,就是在Excel中有一列h=会有重复

MySQL的隐式锁(Implicit Lock)原理实现

《MySQL的隐式锁(ImplicitLock)原理实现》MySQL的InnoDB存储引擎中隐式锁是一种自动管理的锁,用于保证事务在行级别操作时的数据一致性和安全性,本文主要介绍了MySQL的隐式锁... 目录1. 背景:什么是隐式锁?2. 隐式锁的工作原理3. 隐式锁的类型4. 隐式锁的实现与源代码分析4

如何通过Golang的container/list实现LRU缓存算法

《如何通过Golang的container/list实现LRU缓存算法》文章介绍了Go语言中container/list包实现的双向链表,并探讨了如何使用链表实现LRU缓存,LRU缓存通过维护一个双向... 目录力扣:146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2.

MySQL中Next-Key Lock底层原理实现

《MySQL中Next-KeyLock底层原理实现》Next-KeyLock是MySQLInnoDB存储引擎中的一种锁机制,结合记录锁和间隙锁,用于高效并发控制并避免幻读,本文主要介绍了MySQL中... 目录一、Next-Key Lock 的定义与作用二、底层原理三、源代码解析四、总结Next-Key L

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架(Arrays.asList)1.1 示例代码1.