AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android：自定义沿着曲线轨迹移动

2023-08-11 133
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实现这样的一个需求，最主要的是曲线的绘制，和如何设置移动的icon轨迹，这两部分攻克之后，这个需求也就完成了。

前言

前几天，后台有老铁留言，说有个需求，画两条曲线，中间是一个小球，沿着两条线中间的轨迹从左往右移动，让提供个思路，做为一个极度宠粉的博主，思路不仅要提供，实现方案也必须要给出，在互联网中玩的就是真实！

今天的文章大致如下：

1、最终实现效果

2、思路及主要源码剖析

3、全部源码

4、总结

一、最终实现效果

简单录制了一个Gif动画，如下图所示，虽然说是一个简单的Demo，但给出了相关属性和方法，像移动的Icon图标，曲线的的粗细及颜色，以及动画的时长和重复播放都可以动态控制，相关设置之后，即可满足粉丝提出的需求。

二、思路及主要源码剖析

实现这样的一个需求，最主要的是曲线的绘制，和如何设置移动的icon轨迹，这两部分攻克之后，这个需求也就完成了。

首先，如何绘制一条曲线呢？潜意识当中，肯定会想到贝塞尔曲线，有的老铁也许未接触过，觉得这是一个高大上的技术，其实，真正接触起来，也就那么回事，毕竟在Android当中原生的Api就给我们提供了绘制的方法，使用贝塞尔曲线这是再方便不过的。

对贝塞尔曲线做一个简单的概述吧，PhotoShop工具大家都用过吧，里面的”钢笔“功能，就是用贝塞尔曲线来作为计算基础绘制的。

image.png

贝塞尔曲线其原理主要是依靠顶点间的比例来计算，具体就是通过起始点和终点，以及若干控制点，通过调整控制点来形成的，在日常的开发中，最常见的就是二阶和三阶贝塞尔曲线，有的老铁可能会问，为啥没有一阶，因为一阶是没有控制点的，仅有两个数据点(A 和 B)，也就是一条直线，这个没什么好说的。

二阶贝塞尔曲线

上图比较简单，模拟二阶贝塞尔曲线的运动轨迹，首先P₀和P₁形成了一条一阶贝塞尔曲线，Q₀就是这条线上匀速运动的点，P₁和P₂也是一条贝塞尔曲线，同样Q₁是这条线上匀速运动的点，两条一阶贝塞尔曲线，Q₀和Q₁相连后又生成了新的一条一阶贝塞尔曲线，而在这条线上匀速运动的点B，它的运动形态就是二阶贝塞尔曲线的最终形态，简而言之，之所以称B的运动轨迹为二阶贝塞尔曲线，是因为B的运动轨迹建立在两条一阶贝塞尔曲线之上。

动态的运动轨迹如下：

20181226160030533.gif

在Android中二阶贝塞尔绘制相关Api如下：

publicvoidquadTo(floatx1, floaty1, floatx2, floaty2)
publicvoidrQuadTo(floatdx1, floatdy1, floatdx2, floatdy2)

quadTo函数，其中前两个点为控制点坐标，也就是上面的P₁，而后两个点则是终点坐标，也就是P₂，至于起始点，也就是P₀，在开发中，使用path.moveTo()设置起始点。

rQuadTo函数，四个参数解释如下：dx1，控制点x坐标，相对于上一个终点x坐标的位移；dy1，控制点y坐标，相对于上一个终点y坐标的位移；dx2，终点x坐标，相对于上一个终点x坐标位移；dy2：终点y坐标，相对于上一个坐标y坐标的位移。

至于三阶贝塞尔曲线，暂时没有用到，先不做解释，后续有时间，再对贝塞尔曲线做详细解释吧。

简单的了解完贝塞尔曲线之后，那么绘制曲线就比较简单了，根据需求，上下两条曲线，由于路径不一样，则需要逐一创建，在这里，我单独创建了一个中间的路径，也就是两条曲线的中间位置，这个路径不做绘制，用于移动的View轨迹使用。

由于屏幕的宽度和自己设置的曲面宽度不一样，为了达到曲线展示的完整性，当小于屏幕的宽度时，我们进行循环绘制，曲线绘制代码如下：

overridefunonDraw(canvas: Canvas?) {
super.onDraw(canvas)
valcenterHeight=height/2//y轴中点valleftStartPoint=mCurveWidth/2//左边起始点//上面的路径起始点mPathTop.moveTo(0f, (centerHeight-mCurveMargin))
//中间的路径起始点mPathCenter.moveTo(-mCurveThumpWidth, centerHeight.toFloat() -mCurveThumpHeight/2)
//下面的路径起始点mPathBottom.moveTo(0f, (centerHeight+mCurveMargin))
vartempWidth=0//循环，若大于View的宽度，就停止while (tempWidth<width) {
valcontrolX= (leftStartPoint/2).toFloat()//控制点X坐标valcontrolY=-100f//控制点Y坐标valendX=leftStartPoint.toFloat()//结束X坐标valendY=0f//结束Y坐标setCurvePath(mPathTop, controlX, controlY, endX, endY)
setCurvePath(mPathCenter, controlX, controlY, endX, endY)
setCurvePath(mPathBottom, controlX, controlY, endX, endY)
tempWidth+=mCurveWidth        }
canvas?.drawPath(mPathTop, mPaint)
canvas?.drawPath(mPathBottom, mPaint)
    }

因为需要连续绘制，这里使用的rQuadTo函数。

/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线路径*/privatefunsetCurvePath(
path: Path, controlX: Float, controlY: Float, endX: Float, endY: Float    ) {
path.rQuadTo(controlX, controlY, endX, endY)
path.rQuadTo(controlX, 100f, endX, endY)
    }

动画的运动轨迹

一开始，始终想不到，让icon如何沿着曲线进行移动，利用贝塞尔曲线工具动态的计算Y轴吧，总计算不对，经过后面的不断调研，才发现，动画是可以传入路径的，真尴尬，感觉这么多年Android白做了，这个API竟然没想到。

mPathCenter就是上面的中间路径，记录两条曲线的中间运动轨迹。

/*** AUTHOR:AbnerMing* INTRODUCE:启动动画*/funstartAnimate(view: View) {
valmAnimator=ObjectAnimator.ofFloat(view, X, Y, mPathCenter)
mAnimator.duration=mAnimateDurationmAnimator.repeatCount=mAnimateRepeatCountmAnimator.start()
    }

绘制的难度，基本上就以上两点，一个是曲线的绘制，一个是曲线运动轨迹动画，说实在话，这个动画虽然简单，但如果不知道，还真能被难住~

三、全部源码

源码没多少内容，很多都是一些简单的方法设置和属性设置，大家可以看到，这里我定义了两个View，一个是继承于View，一个继承于ViewGroup，继承于View没什么好说的，就是简单的用来绘制曲线，至于ViewGroup这个，主要用来，移动的Icon和曲线View相结合，其实这一步完全可以省略，完全可以把Icon这个View传递到曲线View中，但是，为了使用起来简单，这里就包了一层。

packagecom.abner.curveimportandroid.animation.ObjectAnimatorimportandroid.content.Contextimportandroid.graphics.Canvasimportandroid.graphics.Colorimportandroid.graphics.Paintimportandroid.graphics.Pathimportandroid.util.AttributeSetimportandroid.view.Viewimportandroid.widget.ImageViewimportandroid.widget.LinearLayout/***AUTHOR:AbnerMing*DATE:2023/8/9*INTRODUCE:曲线动画*/classCurveAnimationView : LinearLayout {
//动画时长privatevarmAnimateDuration=5000//曲线颜色privatevarmCurveColor=Color.BLACK//曲线宽度privatevarmCurveWidth=8fprivatevarmCurveThumb: Int?=null//移动的Icon//移动的Thump宽度privatevarmCurveThumbWidth=30f//移动的Thump高度privatevarmCurveThumbHeight=30f//两条曲线间距privatevarmCurveTopBottomMargin=50fprivatelateinitvarmImageView: ImageViewprivatevarmCurveAnimation: CurveAnimation?=nullconstructor(
context: Context    ) : super(context) {
init(context)
    }
constructor(
context: Context, attrs: AttributeSet?    ) : super(context, attrs) {
context.obtainStyledAttributes(attrs, R.styleable.CurveAnimationView)
            .apply {
//曲线颜色mCurveColor=getColor(R.styleable.CurveAnimationView_curve_color, mCurveColor)
//曲线宽度mCurveWidth=getDimension(R.styleable.CurveAnimationView_curve_width, mCurveWidth)
//移动图标，默认mCurveThumb=getResourceId(
R.styleable.CurveAnimationView_curve_thump,
R.mipmap.ic_launcher                    )
//移动时长mAnimateDuration=getInt(R.styleable.CurveAnimationView_curve_animate_duration, mAnimateDuration)
//两个曲线上下距离mCurveTopBottomMargin=getDimension(
R.styleable.CurveAnimationView_curve_top_bottom_margin,
mCurveTopBottomMargin                )
//两个曲线上下距离mCurveThumbWidth=getDimension(
R.styleable.CurveAnimationView_curve_thump_width,
mCurveThumbWidth                )
//两个曲线上下距离mCurveThumbHeight=getDimension(
R.styleable.CurveAnimationView_curve_thump_height,
mCurveThumbHeight                )
            }
init(context)
    }
privatefuninit(context: Context) {
mCurveAnimation=CurveAnimation(context)
addView(mCurveAnimation)
//初始化图片资源mImageView=ImageView(context)
addView(mImageView)
setImageViewSize(mCurveThumbWidth.toInt(), mCurveThumbHeight.toInt())//默认图片大小mCurveAnimation?.setCurveThumpSize(mCurveThumbWidth, mCurveThumbHeight)
//设置图片资源mCurveThumb?.let { setImageResource(it) }
//设置曲线颜色setCurveColor(mCurveColor)
//设置曲线宽度setStrokeWidth(mCurveWidth)
//设置动画时长setAnimateDuration(mAnimateDuration)
//设置两条曲线上下边距setCurveMargin(mCurveTopBottomMargin)
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线上下边距*/funsetCurveMargin(curveMargin: Float) {
mCurveAnimation?.setCurveMargin(curveMargin)
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线颜色*/funsetCurveColor(curveColor: Int): CurveAnimationView {
mCurveAnimation?.setCurveColor(curveColor)
returnthis    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线宽度*/funsetStrokeWidth(curveWidth: Float): CurveAnimationView {
mCurveAnimation?.setStrokeWidth(curveWidth)
returnthis    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置图片的资源*/funsetImageResource(resId: Int): CurveAnimationView {
mImageView.setImageResource(resId)
returnthis    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置移动的图片宽高*/funsetImageViewSize(width: Int, height: Int): CurveAnimationView {
vallayoutParams=mImageView.layoutParamsasLayoutParamslayoutParams.width=widthlayoutParams.height=heightmImageView.layoutParams=layoutParamsmCurveAnimation?.setCurveThumpSize(width.toFloat(), height.toFloat())
returnthis    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置动画时长*/funsetAnimateDuration(animateDuration: Int): CurveAnimationView {
mCurveAnimation?.setAnimateDuration(animateDuration)
returnthis    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置动画重复次数*/funsetAnimateRepeatCount(repeatCount: Int): CurveAnimationView {
mCurveAnimation?.setAnimateRepeatCount(repeatCount)
returnthis    }
/*** AUTHOR:AbnerMing* INTRODUCE:启动动画*/funstartAnimate() {
mCurveAnimation?.startAnimate(mImageView)
    }
}
privateclassCurveAnimation : View {
constructor(
context: Context    ) : super(context) {
init()
    }
constructor(
context: Context, attrs: AttributeSet?    ) : super(context, attrs) {
init()
    }
//上面曲线路径privatelateinitvarmPathTop: Path//中间路径，用于记录View的移动privatelateinitvarmPathCenter: Path//下面曲线路径privatelateinitvarmPathBottom: Path// 曲线的画笔privatelateinitvarmPaint: Paint//定义曲面宽度privatevarmCurveWidth=600//定义上下路径的距离privatevarmCurveMargin=50f/*** AUTHOR:AbnerMing* INTRODUCE:初始化*/privatefuninit() {
// 消除锯齿mPaint=Paint(Paint.ANTI_ALIAS_FLAG).apply {
strokeWidth=8f//默认宽度style=Paint.Style.STROKEcolor=Color.BLACK        }
mPathTop=Path()
mPathCenter=Path()
mPathBottom=Path()
    }
overridefunonDraw(canvas: Canvas?) {
super.onDraw(canvas)
valcenterHeight=height/2//y轴中点valleftStartPoint=mCurveWidth/2//左边起始点//上面的路径起始点mPathTop.moveTo(0f, (centerHeight-mCurveMargin))
//中间的路径起始点mPathCenter.moveTo(-mCurveThumpWidth, centerHeight.toFloat() -mCurveThumpHeight/2)
//下面的路径起始点mPathBottom.moveTo(0f, (centerHeight+mCurveMargin))
vartempWidth=0//循环，若大于View的宽度，就停止while (tempWidth<width) {
valcontrolX= (leftStartPoint/2).toFloat()//控制点X坐标valcontrolY=-100f//控制点Y坐标valendX=leftStartPoint.toFloat()//结束X坐标valendY=0f//结束Y坐标setCurvePath(mPathTop, controlX, controlY, endX, endY)
setCurvePath(mPathCenter, controlX, controlY, endX, endY)
setCurvePath(mPathBottom, controlX, controlY, endX, endY)
tempWidth+=mCurveWidth        }
canvas?.drawPath(mPathTop, mPaint)
canvas?.drawPath(mPathBottom, mPaint)
    }
privatevarmCurveThumpWidth=0fprivatevarmCurveThumpHeight=0ffunsetCurveThumpSize(thumpWidth: Float, thumpHeight: Float) {
mCurveThumpWidth=thumpWidthmCurveThumpHeight=thumpHeightinvalidate()
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线颜色*/funsetCurveMargin(curveMargin: Float) {
mCurveMargin=curveMargininvalidate()
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线颜色*/funsetCurveColor(curveColor: Int) {
mPaint.color=curveColorinvalidate()
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线宽度*/funsetStrokeWidth(strokeWidth: Float) {
mPaint.strokeWidth=strokeWidthinvalidate()
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置曲线路径*/privatefunsetCurvePath(
path: Path, controlX: Float, controlY: Float, endX: Float, endY: Float    ) {
path.rQuadTo(controlX, controlY, endX, endY)
path.rQuadTo(controlX, 100f, endX, endY)
    }
/*** AUTHOR:AbnerMing* INTRODUCE:设置动画时长*/privatevarmAnimateDuration=5000LfunsetAnimateDuration(animateDuration: Int) {
mAnimateDuration=animateDuration.toLong()
    }
/*** AUTHOR:AbnerMing* INTRODUCE:重复几次*/privatevarmAnimateRepeatCount=0funsetAnimateRepeatCount(repeatCount: Int) {
mAnimateRepeatCount=repeatCount    }
/*** AUTHOR:AbnerMing* INTRODUCE:启动动画*/funstartAnimate(view: View) {
valmAnimator=ObjectAnimator.ofFloat(view, X, Y, mPathCenter)
mAnimator.duration=mAnimateDurationmAnimator.repeatCount=mAnimateRepeatCountmAnimator.start()
    }
}

属性文件

属性可以自行定义，目前我简单的定义其中几个，主要代码如下：

<declare-styleablename="CurveAnimationView"><!--两个曲线上下距离--><attrname="curve_top_bottom_margin"format="dimension"/><!--曲线可移动的thump--><attrname="curve_thump"format="reference"/><!--曲线颜色--><attrname="curve_color"format="color"/><!--曲线宽度--><attrname="curve_width"format="dimension"/><!--thump移动时长--><attrname="curve_animate_duration"format="integer"/><!--曲线可移动的thump宽度--><attrname="curve_thump_width"format="dimension"/><!--曲线可移动的thump高度--><attrname="curve_thump_height"format="dimension"/></declare-styleable>

四、总结

绘制曲线的时候，如果控制点没找对，所绘制的曲线就没那么丝滑，这是在贝塞尔曲线绘制中需要注意的，当然了，关于贝塞尔曲线，还有很多需要了解的知识，后面有时间，会从回头到尾的阐述一下，大家可以后续关注。

其实关于后台的留言，我也并不是第一时间能够回复，毕竟我也有工作安排，也希望老铁们多包容与理解，但请相信，只要在自己掌握的范围之内，一定会给出一些相关思路，尽自己所能，帮助一些老铁，还是那句话，互联网中，玩的就是真实！

文章标签：
Android开发
API
关键词：
Android自定义
Android曲线
Android自定义曲线
Android轨迹
二流小码农
目录
相关文章
shuj
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中，自定义视图犹如一座座小岛，等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程，从浅滩走向深海，逐步揭开自定义视图的神秘面纱。
shuj
37 3
shuj
|
1月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中，自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View，包括设计理念、实现步骤以及性能优化技巧，帮助开发者打造流畅且富有创意的用户界面。
shuj
74 0
天下无贼001
|
12天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中，自定义视图是那抹不可或缺的亮色，它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图，并展示如何通过代码实现这一过程。我们将从基础出发，逐步引导你理解自定义视图的核心概念，然后通过一个实际的代码示例，详细讲解如何将理论应用于实践，最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能，还是仅仅出于对安卓开发的兴趣，这篇文章都将为你提供价值。
天下无贼001
29 4
shuj
|
14天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域，自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View，以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理，进而探索内存和布局优化技巧，最终实现既美观又高效的安卓界面。
shuj
27 5
游客moiomvrp3vyac2
|
1月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石，它为开发者提供了无限的可能。通过掌握其原理和实现方法，可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程，包括绘制技巧、事件处理以及性能优化等关键步骤。
游客moiomvrp3vyac2
25 1
mrq4nk6ni2neg
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图：从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中，自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌，更是艺术与科技的完美结合。通过掌握自定义视图，开发者能够打破常规，创造出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战应用，一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者，这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密，将你的应用打造成一件艺术品吧！
mrq4nk6ni2neg
60 10
mrq4nk6ni2neg
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中，自定义视图控件是一种高级技巧，它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例，引导你了解如何在安卓项目中实现自定义视图控件，包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者，这篇文章都会为你提供有价值的见解和技巧。
mrq4nk6ni2neg
44 3
天下无贼001
|
2月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中，自定义视图是一块神奇的画布，它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟，了解如何从零开始构建自定义视图，包括绘图基础、触摸事件处理，以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力，还是追求更流畅的交互体验，这里都有你需要的金钥匙。
天下无贼001
44 4
请看我回答~
|
2月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域，自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例，展示如何在安卓项目中创建和使用自定义View组件，包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例，还深入探讨了自定义View的性能优化技巧，旨在帮助开发者更好地掌握这一技能。
请看我回答~
63 7
请看我回答~
|
2月前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里，自定义视图如同绘画艺术中的色彩，它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧，开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图，包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗？让我们开始吧！ ##
请看我回答~
38 0