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

前言

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

今天的文章大致如下：

1、终究完成效果

2、思路及首要源码剖析

3、悉数源码

4、总结

一、终究完成效果

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

二、思路及首要源码剖析

完成这样的一个需求，最首要的是曲线的制作，和怎么设置移动的icon轨道，这两部分霸占之后，这个需求也就完成了。

首要，怎么制作一条曲线呢？潜意识傍边，肯定会想到贝塞尔曲线，有的老铁也许未触摸过，觉得这是一个高大上的技能，其实，真正触摸起来，也就那么回事，究竟在Android傍边原生的Api就给咱们供给了制作的办法，运用贝塞尔曲线这是再方便不过的。

对贝塞尔曲线做一个简略的概述吧，PhotoShop东西大家都用过吧，里边的”钢笔“功用，便是用贝塞尔曲线来作为核算基础制作的。

贝塞尔曲线其原理首要是依托顶点间的比例来核算，详细便是经过起始点和结尾，以及若干控制点，经过调整控制点来构成的，在日常的开发中，最常见的便是二阶和三阶贝塞尔曲线，有的老铁可能会问，为啥没有一阶，因为一阶是没有控制点的，仅有两个数据点(A和B)，也便是一条直线，这个没什么好说的。

二阶贝塞尔曲线

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

动态的运动轨道如下：

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

public void quadTo(float x1, float y1, float x2, float y2)
public void rQuadTo(float dx1, float dy1, float dx2, float dy2)

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

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

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

简略的了解完贝塞尔曲线之后，那么制作曲线就比较简略了，依据需求，上下两条曲线，因为途径不一样，则需求逐一创立，在这儿，我独自创立了一个中心的途径，也便是两条曲线的中心位置，这个途径不做制作，用于移动的View轨道运用。

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

override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val centerHeight = height / 2//y轴中点
        val leftStartPoint = mCurveWidth / 2 //左面起始点
        //上面的途径起始点
        mPathTop.moveTo(0f, (centerHeight - mCurveMargin))
        //中心的途径起始点
        mPathCenter.moveTo(-mCurveThumpWidth, centerHeight.toFloat() - mCurveThumpHeight / 2)
        //下面的途径起始点
        mPathBottom.moveTo(0f, (centerHeight + mCurveMargin))
        var tempWidth = 0//循环，若大于View的宽度，就中止
        while (tempWidth < width) {
            val controlX = (leftStartPoint / 2).toFloat()//控制点X坐标
            val controlY = -100f//控制点Y坐标
            val endX = leftStartPoint.toFloat()//完毕X坐标
            val endY = 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:设置曲线途径
     */
    private fun setCurvePath(
        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:发动动画
     */
    fun startAnimate(view: View) {
        val mAnimator = ObjectAnimator.ofFloat(view, X, Y, mPathCenter)
        mAnimator.duration = mAnimateDuration
        mAnimator.repeatCount = mAnimateRepeatCount
        mAnimator.start()
    }

制作的难度，基本上就以上两点，一个是曲线的制作，一个是曲线运动轨道动画，说实在话，这个动画尽管简略，但假如不知道，还真能被难住~

三、悉数源码

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

package com.abner.curve
import android.animation.ObjectAnimator
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.View
import android.widget.ImageView
import android.widget.LinearLayout
/**
 *AUTHOR:AbnerMing
 *DATE:2023/8/9
 *INTRODUCE:曲线动画
 */
class CurveAnimationView : LinearLayout {
    //动画时长
    private var mAnimateDuration = 5000
    //曲线色彩
    private var mCurveColor = Color.BLACK
    //曲线宽度
    private var mCurveWidth = 8f
    private var mCurveThumb: Int? = null//移动的Icon
    //移动的Thump宽度
    private var mCurveThumbWidth = 30f
    //移动的Thump高度
    private var mCurveThumbHeight = 30f
    //两条曲线间距
    private var mCurveTopBottomMargin = 50f
    private lateinit var mImageView: ImageView
    private var mCurveAnimation: CurveAnimation? = null
    constructor(
        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)
    }
    private fun init(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:设置曲线上下边距
     */
    fun setCurveMargin(curveMargin: Float) {
        mCurveAnimation?.setCurveMargin(curveMargin)
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置曲线色彩
     */
    fun setCurveColor(curveColor: Int): CurveAnimationView {
        mCurveAnimation?.setCurveColor(curveColor)
        return this
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置曲线宽度
     */
    fun setStrokeWidth(curveWidth: Float): CurveAnimationView {
        mCurveAnimation?.setStrokeWidth(curveWidth)
        return this
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置图片的资源
     */
    fun setImageResource(resId: Int): CurveAnimationView {
        mImageView.setImageResource(resId)
        return this
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置移动的图片宽高
     */
    fun setImageViewSize(width: Int, height: Int): CurveAnimationView {
        val layoutParams = mImageView.layoutParams as LayoutParams
        layoutParams.width = width
        layoutParams.height = height
        mImageView.layoutParams = layoutParams
        mCurveAnimation?.setCurveThumpSize(width.toFloat(), height.toFloat())
        return this
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置动画时长
     */
    fun setAnimateDuration(animateDuration: Int): CurveAnimationView {
        mCurveAnimation?.setAnimateDuration(animateDuration)
        return this
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置动画重复次数
     */
    fun setAnimateRepeatCount(repeatCount: Int): CurveAnimationView {
        mCurveAnimation?.setAnimateRepeatCount(repeatCount)
        return this
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:发动动画
     */
    fun startAnimate() {
        mCurveAnimation?.startAnimate(mImageView)
    }
}
private class CurveAnimation : View {
    constructor(
        context: Context
    ) : super(context) {
        init()
    }
    constructor(
        context: Context, attrs: AttributeSet?
    ) : super(context, attrs) {
        init()
    }
    //上面曲线途径
    private lateinit var mPathTop: Path
    //中心途径，用于记载View的移动
    private lateinit var mPathCenter: Path
    //下面曲线途径
    private lateinit var mPathBottom: Path
    // 曲线的画笔
    private lateinit var mPaint: Paint
    //界说曲面宽度
    private var mCurveWidth = 600
    //界说上下途径的间隔
    private var mCurveMargin = 50f
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:初始化
     */
    private fun init() {
        // 消除锯齿
        mPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
            strokeWidth = 8f//默许宽度
            style = Paint.Style.STROKE
            color = Color.BLACK
        }
        mPathTop = Path()
        mPathCenter = Path()
        mPathBottom = Path()
    }
    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        val centerHeight = height / 2//y轴中点
        val leftStartPoint = mCurveWidth / 2 //左面起始点
        //上面的途径起始点
        mPathTop.moveTo(0f, (centerHeight - mCurveMargin))
        //中心的途径起始点
        mPathCenter.moveTo(-mCurveThumpWidth, centerHeight.toFloat() - mCurveThumpHeight / 2)
        //下面的途径起始点
        mPathBottom.moveTo(0f, (centerHeight + mCurveMargin))
        var tempWidth = 0//循环，若大于View的宽度，就中止
        while (tempWidth < width) {
            val controlX = (leftStartPoint / 2).toFloat()//控制点X坐标
            val controlY = -100f//控制点Y坐标
            val endX = leftStartPoint.toFloat()//完毕X坐标
            val endY = 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)
    }
    private var mCurveThumpWidth = 0f
    private var mCurveThumpHeight = 0f
    fun setCurveThumpSize(thumpWidth: Float, thumpHeight: Float) {
        mCurveThumpWidth = thumpWidth
        mCurveThumpHeight = thumpHeight
        invalidate()
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置曲线色彩
     */
    fun setCurveMargin(curveMargin: Float) {
        mCurveMargin = curveMargin
        invalidate()
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置曲线色彩
     */
    fun setCurveColor(curveColor: Int) {
        mPaint.color = curveColor
        invalidate()
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置曲线宽度
     */
    fun setStrokeWidth(strokeWidth: Float) {
        mPaint.strokeWidth = strokeWidth
        invalidate()
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:设置曲线途径
     */
    private fun setCurvePath(
        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:设置动画时长
     */
    private var mAnimateDuration = 5000L
    fun setAnimateDuration(animateDuration: Int) {
        mAnimateDuration = animateDuration.toLong()
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:重复几回
     */
    private var mAnimateRepeatCount = 0
    fun setAnimateRepeatCount(repeatCount: Int) {
        mAnimateRepeatCount = repeatCount
    }
    /**
     * AUTHOR:AbnerMing
     * INTRODUCE:发动动画
     */
    fun startAnimate(view: View) {
        val mAnimator = ObjectAnimator.ofFloat(view, X, Y, mPathCenter)
        mAnimator.duration = mAnimateDuration
        mAnimator.repeatCount = mAnimateRepeatCount
        mAnimator.start()
    }
}

属性文件

属性可以自行界说，现在我简略的界说其间几个，首要代码如下：

 <declare-styleable name="CurveAnimationView">
        <!--两个曲线上下间隔-->
        <attr name="curve_top_bottom_margin" format="dimension" />
        <!--曲线可移动的thump-->
        <attr name="curve_thump" format="reference" />
        <!--曲线色彩-->
        <attr name="curve_color" format="color" />
        <!--曲线宽度-->
        <attr name="curve_width" format="dimension" />
        <!--thump移动时长-->
        <attr name="curve_animate_duration" format="integer" />
        <!--曲线可移动的thump宽度-->
        <attr name="curve_thump_width" format="dimension" />
        <!--曲线可移动的thump高度-->
        <attr name="curve_thump_height" format="dimension" />
    </declare-styleable>

四、总结

制作曲线的时分，假如控制点没找对，所制作的曲线就没那么丝滑，这是在贝塞尔曲线制作中需求留意的，当然了，关于贝塞尔曲线，还有很多需求了解的常识，后边有时间，会从回头到尾的阐述一下，大家可以后续重视。

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