写自定义控件的时候大家基本都碰过 Path画一条直线、拼接几个贝塞尔曲线、给折线图加个闭合背景区域drawPath(Path, Paint) 一调就完事。但如果你想把“一条线是怎么画过来的”这个过程展示出来比如从 A 点到 B 点慢慢描线、让一个图标沿着曲线滑动、或者复现用户手写的笔迹单单 Path 就不够了——这时候需要 PathMeasure 参与计算。PathMeasure 的核心作用就一句话给你一把“尺子”量出路径的长度、任意位置对应的坐标、以及该位置的切线方向。有了长度和方向之后配合 ValueAnimator 把动画时间映射到路径长度就能做出非常顺滑的路径动画。这篇文章用练手项目的视角把 Path PathMeasure 这套组合的用法、案例和坑位完整展开希望对准备做自定义动画的 Android 开发者和面试前复习的同学们有点帮助。1. 动画设计思路拆解为什么 Path 是做动效的骨架1.1 路径动画的本质不是移动一张图而是移动一个“时间点”打开常用 App你会发现很多交互动效背后其实是同一套视觉模型一个点、一条线或一个图标沿着既定曲线运动并且在运动过程中留下痕迹。这个模型由三部分组成曲线形状本身、运动体当前所在位置、动画进行的时间进度。曲线形状让 Path 来定义是最自然的。moveTo、lineTo、quadTo、cubicTo、arcTo 这些方法几乎覆盖所有常见几何图形从直线、圆弧到连续折线、手掌轨迹都可以被完整的路径对象描述出来。位置和时间进度则由动画系统驱动ValueAnimator 提供 0 到 1 的归一化进度再把它映射到路径上某个具体的位置每一帧画出来的位置就构成运动动画。如果用自研的贝塞尔参数方程硬算坐标虽然也能实现但存在明显的维护问题曲线越多公式越散改一处形状要重新推导一堆数学公式稍不注意还会在曲线连接处出现视觉跳变。反之Path 描述形状PathMeasure 负责“对号入座”形状与逻辑分离后续调整动画速度或者路径形状都只是改一个参数。这也是几乎所有矢量动画库最终都向内使用 Path PathMeasure 驱动的原因之一。1.2 PathMeasure 的价值把“路程”翻译成“坐标与方向”我最开始绕了不少弯路试过自己在 Path 上做均匀采样攒一个 ListPointF 再用插值器获取位置也试过基于 Path 的 PathIterator 手工遍历线段节点。结果都不理想——要么把复杂曲线按弧长等分很难要么处理封闭图形与开放图形时逻辑无法统一。PathMeasure 的核心价值正在于此内部会按照路径做高精度采样并维护“路径长度到坐标”的换算关系。你只需要提供一个 distance 值它便能返回该点坐标、切线方向甚至能把对应子路径提取出来。配合 ValueAnimator 的时间进度变成路径距离天然形成了“距离-坐标”一整套的匹配机制。具体到实际动画类型大致可以分为三套手法getLength 动画进度驱动做描线、填充、轮廓渐显类动画getPosTan 每帧取得坐标与方向做物体沿路径移动类动画getSegment 按进度截取路径分段做笔迹回放、局部高亮、轨迹擦除类动画。这三套手法几乎能覆盖日常 90% 以上的路径动画需求。下面会看到它们之间并不是互斥的一个完整动效往往需要组合使用。2. PathMeasure 核心 API 细节解析动手前要吃透这几个方法2.1 setPath 与 forceClosed路径长度为什么和你想的不一样PathMeasure 使用前必须先调用 setPath(Path, boolean)给对象绑定一条待测量的路径。第二个参数 forceClosed 非常容易踩坑即使原 Path 画的是首尾不相连的开口曲线只要 forceClosed 传 truePathMeasure 也会按“闭合后的路径”来整体测量自动补出一段从终点到起点的虚拟线段。这会对 getLength、getPosTan、getSegment 三个 API 同时造成影响。最典型的症状是动画驱动了一段缓慢的“空白过程”——路径本身只绘制了一部分驱动进度却没有走完因为你测量的总长比真正要绘制的长度多了一截。我的建议是如果绘制与测量共用一条 Path除非它本身就是闭合图形否则统一传 false。如果确实需要把测量和绘制分开可以维护两条 Path一条用于 canvas.drawPath一条用于 PathMeasure.setPath。想实现“线头转圈但不想画连接线”的效果时同样不建议用 forceClosed 凑而是把闭合路径拆分成两条子路径分别测量再在代码里手动衔接。2.2 getPosTan位置 切线一帧搞定“平滑跟随”getPosTan(float distance, float[] pos, float[] tan) 是路径移动动画最核心的 API。给定沿路径的弧长距离后这个方法会返回两个数组pos[0] 与 pos[1] 是该点的世界坐标tan[0] 与 tan[1] 是该点的切线向量通常是一个单位向量。位置可以直接决定物体落在哪里切线方向则告诉我们物体应该朝哪个方向。常见的做法是通过 Math.atan2(tan[1], tan[0]) 算出方位角度再 canvas.translate 到 pos 之后 canvas.rotate 这个角度。比如商品加入购物车动画里的小车、地图上沿路线移动的定位点无一例外都是这个思路。这里要注意 distance 参数表示的是沿路径累计的弧长而不是贝塞尔公式的参数 t。两者只在极少情况下会出现数值巧合在曲线复杂段相差很大。所以万能写法是val distance measure.length * progress measure.getPosTan(distance, pos, tan)progress 从 0 平滑过渡到 1确保速度和动画进度一致避免曲线不同位置速度忽快忽慢。2.3 getMatrix矩阵版“一步到位”用法getMatrix(float distance, Matrix matrix, int flags) 的功能和 getPosTan 类似区别在于它把位置和旋转直接封装进一个 Matrix 里。flags 可以自由组合例如 PathMeasure.POSITION_MATRIX_FLAG 代表只取位置PathMeasure.TANGENT_MATRIX_FLAG 代表位置加旋转都取。它的优势在“少写代码”配合 canvas.drawBitmap(bitmap, matrix, paint)一行就能把图标按照路径位置和方向画出来。劣势是灵活性稍差尤其当你想在路径方向上额外叠加缩放、镜像或者旋转偏移时你要去读矩阵内部值像是从 Matrix 中反解角度代码反而更加复杂。用 getMatrix 的另一个必踩坑是锚点。Matrix 默认是按图片左上角为基准进行平移与旋转的如果你直接把一张 100x100 的图标传给 drawBitmap图标会以左上角贴路径而不是中心贴路径。解决办法通常是构造单位矩阵后先 preTranslate(-bitmapWidth / 2f, -bitmapHeight / 2f)让原点钉在图标中心再调用 getMatrix。2.4 PathMeasure 各 API 适用场景速查方法作用典型场景setPath(path, forceClosed)绑定待测路径并决定是否按闭合测量任何使用前必须调用getLength()返回路径总长度确定动画总时长、计算 progress * lengthgetPosTan(dist, pos, tan)获取任意位置坐标与切线方向物体沿路径平滑移动、朝向跟随getMatrix(dist, matrix, flags)将位置与旋转写入矩阵直接用 Bitmap 实现路径移动与旋转getSegment(start, stop, dst, startWithMoveTo)截取路径子段笔迹回放、轨迹渐显、局部擦除nextContour()切换到下一条轮廓多子路径逐段处理这张表我一般会贴在项目需求评审文档里和设计师对齐动效时快速说明“这里可以用路径动画做、那里最好用属性动画做”沟通效率会高不少。3. 三个可直接上手的实战案例路径动画的常见形态3.1 加载圆弧动画不用 DashPathEffect 也能平滑描边许多加载动画的实现方式是给 Paint 设置 DashPathEffect用两个 length 参数控制“描边段 空白段”的比例再旋转整个画布制造转圈的效果。DashPathEffect 适合快速调味但如果你需要对“一根线从 0 慢慢长到完整圆弧”做细致的进度控制它的精度和可读性都不够好。用 Path PathMeasure 实现更清晰先通过 addArc 画一段完整圆弧让 PathMeasure 测出它的长度然后让动画进度 progress 从 0 到 1 变化每帧用 getSegment 截取出从起点到 length * progress 所对应的子路径最后用 drawPath 绘制截取出来的片段。因为截取的是片段线的端点可以自由控制圆角视觉上也更接近现代扁平化设计。这个案例的完整核心代码如下class LoadingArcView JvmOverloads constructor( context: Context, attrs: AttributeSet? null ) : View(context, attrs) { private val path Path() private val measure PathMeasure() private val paint Paint(Paint.ANTI_ALIAS_FLAG).apply { style Paint.Style.STROKE strokeWidth 4f * resources.displayMetrics.density strokeCap Paint.Cap.ROUND color 0xFF4CAF50.toInt() } private var progress 0f override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) val radius minOf(w, h) / 2f - paint.strokeWidth val rectF RectF( w / 2f - radius, h / 2f - radius, w / 2f radius, h / 2f radius ) path.reset() // 从 90 度12 点方向顺时针绘制一个完整圆 path.addArc(rectF, 90f, 360f) measure.setPath(path, false) } fun setProgress(value: Float) { progress value.coerceIn(0f, 1f) invalidate() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val len measure.length if (len 0f) return val segment Path() // 截取从起点到当前进度对应的路径片段 measure.getSegment(0f, len * progress, segment, true) canvas.drawPath(segment, paint) } }外部驱动动画时建议统一这样写val animator ValueAnimator.ofFloat(0f, 1f).apply { duration 1200 interpolator LinearInterpolator() addUpdateListener { loadingView.setProgress(it.animatedValue as Float) } } animator.start()注意这里有个细节动画的 progress 与路径的弧长不是线性对应关系。如果是简单圆弧线性插值看着没问题但如果路径里有急转弯最好把插值器放在 PathMeasure 之上做二次加工比如给 distance 做一个 easeInOut 映射。这类处理在复杂轨迹动画中特别重要。3.2 小飞机沿贝塞尔曲线移动getPosTan 控制位置和朝向路径移动类动画最典型的场景是“某个可绘制图标沿着固定轨迹滑过去”。这里用一只小飞机沿着二次贝塞尔曲线飞行举例。核心思路ValueAnimator 提供 0~1 的动画进度把进度乘以 PathMeasure.length 作为当前距离调用 getPosTan 拿到 pos[0]、pos[1] 和 tan[0]、tan[1]。再通过 atan2 计算旋转角度val degree Math.toDegrees( Math.atan2(tan[1].toDouble(), tan[0].toDouble()) ).toFloat()拿到坐标和角度后重写 onDraw先 canvas.save()再 translate 到 (pos[0], pos[1])rotate(degree)把飞机绘制在原点为了视觉居中会先平移半个图标宽高最后 restore。下面是一个完整可运行的自定义 Viewclass PathMoveView JvmOverloads constructor( context: Context, attrs: AttributeSet? null ) : View(context, attrs) { private val trackPath Path().apply { moveTo(100f, 500f) quadTo(300f, 200f, 700f, 500f) } private val measure PathMeasure() private val pos FloatArray(2) private val tan FloatArray(2) private val planePaint Paint(Paint.ANTI_ALIAS_FLAG).apply { color 0xFF2196F3.toInt() style Paint.Style.FILL } private val trackPaint Paint(Paint.ANTI_ALIAS_FLAG).apply { style Paint.Style.STROKE strokeWidth 2f color 0x22000000 } private var distance 0f init { measure.setPath(trackPath, false) } fun setDistance(dist: Float) { distance dist.coerceIn(0f, measure.length) invalidate() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) // 先画参考路径便于调试时确认轨迹 canvas.drawPath(trackPath, trackPaint) if (distance 0f) return measure.getPosTan(distance, pos, tan) val degree Math.toDegrees( Math.atan2(tan[1].toDouble(), tan[0].toDouble()) ).toFloat() canvas.save() canvas.translate(pos[0], pos[1]) canvas.rotate(degree) // 画一个带指向性的小飞机便于观察旋转是否生效 val arrow Path().apply { moveTo(18f, 0f) lineTo(-12f, -12f) lineTo(-12f, 12f) close() } canvas.drawPath(arrow, planePaint) canvas.restore() } }有几个细节值得说。第一PathMeasure 的 distance 参数是沿路径的弧长不是路径参数方程里的 t 值所以不要直接把动画进度当 distance 传入。第二如果曲线存在急转弯degree 会快速变化视觉上表现为飞机“瞬间甩头”这是符合几何规律的但如果你希望更平滑可以在代码里保存 lastDegree做一个角度差阈值判断差值过大时插入过渡角度。第三如果想让飞机同时有俯仰倾斜可以做二次 rotate先根据速度变化量计算附加角度再 baseRotate bankRotate这类效果在飞行类小游戏里很常见。3.3 签名笔迹回放getSegment 让笔迹一帧一帧“长”出来如果你见过柜员机里那种“请签名”的数字屏回放签名时并不是一次性渲染整张位图而是笔迹逐笔显现。用 Path PathMeasure 也能模拟这种效果。思路是先把用户手指滑过的轨迹收集成 Path再用 PathMeasure 测量其长度。回放时动画进度 progress 从 0 到 1用 getSegment(0, length * progress, dst, true) 拿到“已写过的片段”再整体 drawPath 出来。只要数据是手势收集的绘制结果就能精确匹配用户原来的笔迹连笔锋粗细也可以靠 strokeWidth 和 Paint 的 round cap 模拟。这里有一个容易被忽略的小细节getSegment 的第一个参数 start 并不需要一定是 0。比如你想做“橡皮擦回退”效果可以设 start length * offset这样截取片段就只会显示中间一段适合做高亮圈选或局部分析。同时要注意 getSegment 截取出来的 Path 会在每帧重新分配。如果动画帧率是 60fps一个 3 秒动画就要分配 180 个 Path 对象本身不算大但如果路径特别长、包含上百个点GC 压力会明显上升。优化办法是在 onAttachedToWindow 里提前分配一个 segmentPath 成员每帧先 path.reset() 再 getSegment 填充最后 draw避免反复 new Path。来看签名回放的简化版代码class SignatureReplayView JvmOverloads constructor( context: Context, attrs: AttributeSet? null ) : View(context, attrs) { private val measure PathMeasure() private val segmentPath Path() private val paint Paint(Paint.ANTI_ALIAS_FLAG).apply { style Paint.Style.STROKE strokeWidth 8f strokeCap Paint.Cap.ROUND strokeJoin Paint.Join.ROUND color 0xFF333333.toInt() } private var progress 0f private val signaturePath Path().apply { // 模拟一段手写轨迹实际项目可由手势采集得到 moveTo(100f, 400f) cubicTo(180f, 320f, 260f, 500f, 400f, 360f) quadTo(480f, 260f, 600f, 420f) } init { measure.setPath(signaturePath, false) } fun setProgress(value: Float) { progress value.coerceIn(0f, 1f) invalidate() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val len measure.length if (len 0f) return // 复用 segmentPath避免每帧创建新对象 segmentPath.reset() measure.getSegment(0f, len * progress, segmentPath, true) canvas.drawPath(segmentPath, paint) } }如果你还想让笔迹有一种“压感笔”的粗细变化可以在手势采集时同时保存每个点的压力值绘画阶段按压力换算成不同 strokeWidth 分段绘制。这个做起来麻烦一点但交互体验会明显上一个台阶。4. 工程化注意事项动画控制器的拆分与对象复用4.1 把动画时间与 UI 绘制解耦自定义 AnimatorController项目中路径动画通常不是只跑一次的。用力单击、下拉刷新、页面切换每次都要重新触发。如果把 ValueAnimator 直接写在自定义 View 内部你会发现每次进入页面都要处理动画启动、停止、cancel、防重复 enter 等琐事代码很容易膨胀。更好的办法是把“时间驱动”这部分抽出来做成一个轻量控制器。控制器持有 ValueAnimator通过回调把 progress 暴露给外部。这样 View 只关心“progress 到了多少就画什么”控制器只关心“什么时候开始、什么时候结束、采用哪种插值器”。一段最小实现长这样class PathAnimatorController( private val duration: Long 1500, private val interpolator: TimeInterpolator DecelerateInterpolator() ) { private var animator: ValueAnimator? null fun start( onProgress: (Float) - Unit, onEnd: (() - Unit)? null ) { cancel() val anim ValueAnimator.ofFloat(0f, 1f) anim.duration duration anim.interpolator interpolator anim.addUpdateListener { valueAnimator - onProgress(valueAnimator.animatedValue as Float) } anim.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator) { onEnd?.invoke() } }) animator anim anim.start() } fun cancel() { animator?.cancel() } }在自定义 View 中使用时只需初始化 controller在 onAnimationUpdate 回调里把 progress 传给 setProgress。这样做的好处是动画时长、插值器可以集中设置页面退出时统一 cancel避免产生内存泄漏或重复回调。如果你的项目里动画种类很多可以基于这个控制器再扩充“延迟启动”、“重复次数”、“动画分组控制”等能力通用性会更好。4.2 对象复用与 GC 优化路径动画的常见性能瓶颈路径动画有几个容易被忽略的内存细节。PathMeasure 自身是轻量对象但配套使用的 Path、FloatArray、Matrix 如果每帧都新建会带来不必要的 GC 压力。比如 getPosTan 需要两个 FloatArray 作为输出缓冲区你完全可以当作成员变量复用到整个生命周期getSegment 的 dst Path 也可以每帧先 reset 再复用。如果你还同时用到了 Paint 和 Matrix建议全部提到成员变量里初始化。真实项目的坑往往不在算法本身而在“低端设备 高频创建临时对象”的组合上。一个 3 秒的路径动画如果每帧都 new Path总共会有 180 个对象产生系统在低内存堆上触发一次 GC动画掉帧一次复用对象后这些开销都没了。还有一个树脂细节硬件加速开启时Canvas 会把 Path 转成特定图形指令Path 内部数据会被复制到 GPU 的指令队列中。如果在动画期间频繁 reset 并重新绘制同一个 Path可能造成额外的指令重传。对于中小型路径问题不大但在很复杂的路径动画中尽量让 Path 的节点数稳定在一个合理范围避免每帧大量改变路径结构。5. 常见问题与排查技巧实录5.1 动画结果不对先检查 forceClosed、moveTo 起点和 Path 方向第一位的问题是“截取出来的线段莫名多了一条连接线”或者“动画最后一段滞空”。几乎都是 forceClosed 参数造成的。我见过最典型的误用画了一个完整圆形setPath 时传 true其实圆本来就闭合传 true 会多做一次重复测量可能让 getLength 比预期略长一点动画轨迹明明视觉已经画完进度却还在中途。反过来画非闭合路径传 false一切正常。另一个常见的问题是 moveTo 起点设置不合理。PathMeasure 的 distance 从 moveTo 起点开始累积如果你在路径中间又穿插了一个 moveTo会导致路径被拆成多个不连续的段getPosTan 在跨段时可能跳变。此时应该用 nextContour() 逐段处理或者干脆把路径拆开、分别测量。5.2 图标不贴轨迹多半是锚点没居中用 getMatrix 做图标跟随经常出现图标“悬空”在轨迹外侧的情况。原因是矩阵默认基准是左上角你在 canvas.drawBitmap 前必须将锚点设置在图片中心。如果你用的是 getPosTan 自己算同样要注意 pos 给出的坐标是路径上的点而不是图标中心需要把图标宽高的一半作为偏置量再 translate。我习惯写一个小工具方法private fun applyCenterOffset(matrix: Matrix, bitmapWidth: Float, bitmapHeight: Float) { matrix.preTranslate(-bitmapWidth / 2f, -bitmapHeight / 2f) }在 getMatrix 之前调用后续绘制的 Bitmap 就能乖乖贴住路径。别小看这几行代码它能省掉很多“看起来偏移了几像素”的肉眼对不齐问题。5.3 高效调试法参考路径、采样点与角度标注复杂的路径动画尤其同时有多个曲线叠加时新手最容易看到一团黑线却不知道错在哪。我的建议分三步第一步先把原 Path 用半透明画笔画出来作为参考底稿确认几何形状。第二步把 PathMeasure 计算的 pos 坐标每隔一段距离打一个小圆点确认路径采样符合预期。第三步把旋转角度以文本形式标在点旁边观察角度变化是否符合曲线走势。这套“参考路径 采样点 角度标注”的调试三件套可以解决九成以上的路径动画偏差问题。比如小飞机动画如果发现朝向反了往往不是 getPosTan 写错而是绘制图形本身的朝向定义与切线方向不一致这时只要把绘制的起点几何方向调整为与切线方向一致即可。5.4 问题排查速查表现象可能原因优先检查项动画尾部有一段停滞forceClosed 传了 true测量长度多出虚拟闭合段检查 setPath 第二参数截取路径多了一条直线连接段getSegment 用 startWithMoveTofalse子路径起始丢失 moveTo改传 true或手动 moveTo图标悬在轨迹外侧矩阵默认按图片左上角锚定preTranslate 到图片中心图标方向时对时不对Path 中间有多个 moveTo 导致不连续拆分子路径逐段处理动画卡顿掉帧每帧 new Path、FloatArray 造成 GC复用成员变量、缓存 Path贝塞尔曲线速度忽快忽慢distance 直接用了动画 progress没有先乘以 length统一用 progress * length 作为 distance上面这些问题几乎都能在写完第一个路径动画练手项目时遇到。遇到时不用慌先对着表格过一遍大多数都能在几分钟内定位出来。最后再分享一个小技巧如果允许尽量把练习动画的控件尺寸固定下来再开发比如直径 200dp 的圆、700dp 宽的轨迹。路径动画一旦涉及百分比、权重、多尺寸适配调试难度会成倍增加固定尺寸能把变量锁住让核心的时长、插值器、路径方向问题得到充分验证。等这些基本盘稳定了再加入动态尺寸也不迟。 
长河君 · 2026/10/17 9:52:19 · 阅读 1.2k Android路径动画实战：PathMeasure核心API、原理与常见坑位
写自定义控件的时候大家基本都碰过 Path画一条直线、拼接几个贝塞尔曲线、给折线图加个闭合背景区域drawPath(Path, Paint) 一调就完事。但如果你想把“一条线是怎么画过来的”这个过程展示出来比如从 A 点到 B 点慢慢描线、让一个图标沿着曲线滑动、或者复现用户手写的笔迹单单 Path 就不够了——这时候需要 PathMeasure 参与计算。PathMeasure 的核心作用就一句话给你一把“尺子”量出路径的长度、任意位置对应的坐标、以及该位置的切线方向。有了长度和方向之后配合 ValueAnimator 把动画时间映射到路径长度就能做出非常顺滑的路径动画。这篇文章用练手项目的视角把 Path PathMeasure 这套组合的用法、案例和坑位完整展开希望对准备做自定义动画的 Android 开发者和面试前复习的同学们有点帮助。1. 动画设计思路拆解为什么 Path 是做动效的骨架1.1 路径动画的本质不是移动一张图而是移动一个“时间点”打开常用 App你会发现很多交互动效背后其实是同一套视觉模型一个点、一条线或一个图标沿着既定曲线运动并且在运动过程中留下痕迹。这个模型由三部分组成曲线形状本身、运动体当前所在位置、动画进行的时间进度。曲线形状让 Path 来定义是最自然的。moveTo、lineTo、quadTo、cubicTo、arcTo 这些方法几乎覆盖所有常见几何图形从直线、圆弧到连续折线、手掌轨迹都可以被完整的路径对象描述出来。位置和时间进度则由动画系统驱动ValueAnimator 提供 0 到 1 的归一化进度再把它映射到路径上某个具体的位置每一帧画出来的位置就构成运动动画。如果用自研的贝塞尔参数方程硬算坐标虽然也能实现但存在明显的维护问题曲线越多公式越散改一处形状要重新推导一堆数学公式稍不注意还会在曲线连接处出现视觉跳变。反之Path 描述形状PathMeasure 负责“对号入座”形状与逻辑分离后续调整动画速度或者路径形状都只是改一个参数。这也是几乎所有矢量动画库最终都向内使用 Path PathMeasure 驱动的原因之一。1.2 PathMeasure 的价值把“路程”翻译成“坐标与方向”我最开始绕了不少弯路试过自己在 Path 上做均匀采样攒一个 ListPointF 再用插值器获取位置也试过基于 Path 的 PathIterator 手工遍历线段节点。结果都不理想——要么把复杂曲线按弧长等分很难要么处理封闭图形与开放图形时逻辑无法统一。PathMeasure 的核心价值正在于此内部会按照路径做高精度采样并维护“路径长度到坐标”的换算关系。你只需要提供一个 distance 值它便能返回该点坐标、切线方向甚至能把对应子路径提取出来。配合 ValueAnimator 的时间进度变成路径距离天然形成了“距离-坐标”一整套的匹配机制。具体到实际动画类型大致可以分为三套手法getLength 动画进度驱动做描线、填充、轮廓渐显类动画getPosTan 每帧取得坐标与方向做物体沿路径移动类动画getSegment 按进度截取路径分段做笔迹回放、局部高亮、轨迹擦除类动画。这三套手法几乎能覆盖日常 90% 以上的路径动画需求。下面会看到它们之间并不是互斥的一个完整动效往往需要组合使用。2. PathMeasure 核心 API 细节解析动手前要吃透这几个方法2.1 setPath 与 forceClosed路径长度为什么和你想的不一样PathMeasure 使用前必须先调用 setPath(Path, boolean)给对象绑定一条待测量的路径。第二个参数 forceClosed 非常容易踩坑即使原 Path 画的是首尾不相连的开口曲线只要 forceClosed 传 truePathMeasure 也会按“闭合后的路径”来整体测量自动补出一段从终点到起点的虚拟线段。这会对 getLength、getPosTan、getSegment 三个 API 同时造成影响。最典型的症状是动画驱动了一段缓慢的“空白过程”——路径本身只绘制了一部分驱动进度却没有走完因为你测量的总长比真正要绘制的长度多了一截。我的建议是如果绘制与测量共用一条 Path除非它本身就是闭合图形否则统一传 false。如果确实需要把测量和绘制分开可以维护两条 Path一条用于 canvas.drawPath一条用于 PathMeasure.setPath。想实现“线头转圈但不想画连接线”的效果时同样不建议用 forceClosed 凑而是把闭合路径拆分成两条子路径分别测量再在代码里手动衔接。2.2 getPosTan位置 切线一帧搞定“平滑跟随”getPosTan(float distance, float[] pos, float[] tan) 是路径移动动画最核心的 API。给定沿路径的弧长距离后这个方法会返回两个数组pos[0] 与 pos[1] 是该点的世界坐标tan[0] 与 tan[1] 是该点的切线向量通常是一个单位向量。位置可以直接决定物体落在哪里切线方向则告诉我们物体应该朝哪个方向。常见的做法是通过 Math.atan2(tan[1], tan[0]) 算出方位角度再 canvas.translate 到 pos 之后 canvas.rotate 这个角度。比如商品加入购物车动画里的小车、地图上沿路线移动的定位点无一例外都是这个思路。这里要注意 distance 参数表示的是沿路径累计的弧长而不是贝塞尔公式的参数 t。两者只在极少情况下会出现数值巧合在曲线复杂段相差很大。所以万能写法是val distance measure.length * progress measure.getPosTan(distance, pos, tan)progress 从 0 平滑过渡到 1确保速度和动画进度一致避免曲线不同位置速度忽快忽慢。2.3 getMatrix矩阵版“一步到位”用法getMatrix(float distance, Matrix matrix, int flags) 的功能和 getPosTan 类似区别在于它把位置和旋转直接封装进一个 Matrix 里。flags 可以自由组合例如 PathMeasure.POSITION_MATRIX_FLAG 代表只取位置PathMeasure.TANGENT_MATRIX_FLAG 代表位置加旋转都取。它的优势在“少写代码”配合 canvas.drawBitmap(bitmap, matrix, paint)一行就能把图标按照路径位置和方向画出来。劣势是灵活性稍差尤其当你想在路径方向上额外叠加缩放、镜像或者旋转偏移时你要去读矩阵内部值像是从 Matrix 中反解角度代码反而更加复杂。用 getMatrix 的另一个必踩坑是锚点。Matrix 默认是按图片左上角为基准进行平移与旋转的如果你直接把一张 100x100 的图标传给 drawBitmap图标会以左上角贴路径而不是中心贴路径。解决办法通常是构造单位矩阵后先 preTranslate(-bitmapWidth / 2f, -bitmapHeight / 2f)让原点钉在图标中心再调用 getMatrix。2.4 PathMeasure 各 API 适用场景速查方法作用典型场景setPath(path, forceClosed)绑定待测路径并决定是否按闭合测量任何使用前必须调用getLength()返回路径总长度确定动画总时长、计算 progress * lengthgetPosTan(dist, pos, tan)获取任意位置坐标与切线方向物体沿路径平滑移动、朝向跟随getMatrix(dist, matrix, flags)将位置与旋转写入矩阵直接用 Bitmap 实现路径移动与旋转getSegment(start, stop, dst, startWithMoveTo)截取路径子段笔迹回放、轨迹渐显、局部擦除nextContour()切换到下一条轮廓多子路径逐段处理这张表我一般会贴在项目需求评审文档里和设计师对齐动效时快速说明“这里可以用路径动画做、那里最好用属性动画做”沟通效率会高不少。3. 三个可直接上手的实战案例路径动画的常见形态3.1 加载圆弧动画不用 DashPathEffect 也能平滑描边许多加载动画的实现方式是给 Paint 设置 DashPathEffect用两个 length 参数控制“描边段 空白段”的比例再旋转整个画布制造转圈的效果。DashPathEffect 适合快速调味但如果你需要对“一根线从 0 慢慢长到完整圆弧”做细致的进度控制它的精度和可读性都不够好。用 Path PathMeasure 实现更清晰先通过 addArc 画一段完整圆弧让 PathMeasure 测出它的长度然后让动画进度 progress 从 0 到 1 变化每帧用 getSegment 截取出从起点到 length * progress 所对应的子路径最后用 drawPath 绘制截取出来的片段。因为截取的是片段线的端点可以自由控制圆角视觉上也更接近现代扁平化设计。这个案例的完整核心代码如下class LoadingArcView JvmOverloads constructor( context: Context, attrs: AttributeSet? null ) : View(context, attrs) { private val path Path() private val measure PathMeasure() private val paint Paint(Paint.ANTI_ALIAS_FLAG).apply { style Paint.Style.STROKE strokeWidth 4f * resources.displayMetrics.density strokeCap Paint.Cap.ROUND color 0xFF4CAF50.toInt() } private var progress 0f override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) val radius minOf(w, h) / 2f - paint.strokeWidth val rectF RectF( w / 2f - radius, h / 2f - radius, w / 2f radius, h / 2f radius ) path.reset() // 从 90 度12 点方向顺时针绘制一个完整圆 path.addArc(rectF, 90f, 360f) measure.setPath(path, false) } fun setProgress(value: Float) { progress value.coerceIn(0f, 1f) invalidate() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val len measure.length if (len 0f) return val segment Path() // 截取从起点到当前进度对应的路径片段 measure.getSegment(0f, len * progress, segment, true) canvas.drawPath(segment, paint) } }外部驱动动画时建议统一这样写val animator ValueAnimator.ofFloat(0f, 1f).apply { duration 1200 interpolator LinearInterpolator() addUpdateListener { loadingView.setProgress(it.animatedValue as Float) } } animator.start()注意这里有个细节动画的 progress 与路径的弧长不是线性对应关系。如果是简单圆弧线性插值看着没问题但如果路径里有急转弯最好把插值器放在 PathMeasure 之上做二次加工比如给 distance 做一个 easeInOut 映射。这类处理在复杂轨迹动画中特别重要。3.2 小飞机沿贝塞尔曲线移动getPosTan 控制位置和朝向路径移动类动画最典型的场景是“某个可绘制图标沿着固定轨迹滑过去”。这里用一只小飞机沿着二次贝塞尔曲线飞行举例。核心思路ValueAnimator 提供 0~1 的动画进度把进度乘以 PathMeasure.length 作为当前距离调用 getPosTan 拿到 pos[0]、pos[1] 和 tan[0]、tan[1]。再通过 atan2 计算旋转角度val degree Math.toDegrees( Math.atan2(tan[1].toDouble(), tan[0].toDouble()) ).toFloat()拿到坐标和角度后重写 onDraw先 canvas.save()再 translate 到 (pos[0], pos[1])rotate(degree)把飞机绘制在原点为了视觉居中会先平移半个图标宽高最后 restore。下面是一个完整可运行的自定义 Viewclass PathMoveView JvmOverloads constructor( context: Context, attrs: AttributeSet? null ) : View(context, attrs) { private val trackPath Path().apply { moveTo(100f, 500f) quadTo(300f, 200f, 700f, 500f) } private val measure PathMeasure() private val pos FloatArray(2) private val tan FloatArray(2) private val planePaint Paint(Paint.ANTI_ALIAS_FLAG).apply { color 0xFF2196F3.toInt() style Paint.Style.FILL } private val trackPaint Paint(Paint.ANTI_ALIAS_FLAG).apply { style Paint.Style.STROKE strokeWidth 2f color 0x22000000 } private var distance 0f init { measure.setPath(trackPath, false) } fun setDistance(dist: Float) { distance dist.coerceIn(0f, measure.length) invalidate() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) // 先画参考路径便于调试时确认轨迹 canvas.drawPath(trackPath, trackPaint) if (distance 0f) return measure.getPosTan(distance, pos, tan) val degree Math.toDegrees( Math.atan2(tan[1].toDouble(), tan[0].toDouble()) ).toFloat() canvas.save() canvas.translate(pos[0], pos[1]) canvas.rotate(degree) // 画一个带指向性的小飞机便于观察旋转是否生效 val arrow Path().apply { moveTo(18f, 0f) lineTo(-12f, -12f) lineTo(-12f, 12f) close() } canvas.drawPath(arrow, planePaint) canvas.restore() } }有几个细节值得说。第一PathMeasure 的 distance 参数是沿路径的弧长不是路径参数方程里的 t 值所以不要直接把动画进度当 distance 传入。第二如果曲线存在急转弯degree 会快速变化视觉上表现为飞机“瞬间甩头”这是符合几何规律的但如果你希望更平滑可以在代码里保存 lastDegree做一个角度差阈值判断差值过大时插入过渡角度。第三如果想让飞机同时有俯仰倾斜可以做二次 rotate先根据速度变化量计算附加角度再 baseRotate bankRotate这类效果在飞行类小游戏里很常见。3.3 签名笔迹回放getSegment 让笔迹一帧一帧“长”出来如果你见过柜员机里那种“请签名”的数字屏回放签名时并不是一次性渲染整张位图而是笔迹逐笔显现。用 Path PathMeasure 也能模拟这种效果。思路是先把用户手指滑过的轨迹收集成 Path再用 PathMeasure 测量其长度。回放时动画进度 progress 从 0 到 1用 getSegment(0, length * progress, dst, true) 拿到“已写过的片段”再整体 drawPath 出来。只要数据是手势收集的绘制结果就能精确匹配用户原来的笔迹连笔锋粗细也可以靠 strokeWidth 和 Paint 的 round cap 模拟。这里有一个容易被忽略的小细节getSegment 的第一个参数 start 并不需要一定是 0。比如你想做“橡皮擦回退”效果可以设 start length * offset这样截取片段就只会显示中间一段适合做高亮圈选或局部分析。同时要注意 getSegment 截取出来的 Path 会在每帧重新分配。如果动画帧率是 60fps一个 3 秒动画就要分配 180 个 Path 对象本身不算大但如果路径特别长、包含上百个点GC 压力会明显上升。优化办法是在 onAttachedToWindow 里提前分配一个 segmentPath 成员每帧先 path.reset() 再 getSegment 填充最后 draw避免反复 new Path。来看签名回放的简化版代码class SignatureReplayView JvmOverloads constructor( context: Context, attrs: AttributeSet? null ) : View(context, attrs) { private val measure PathMeasure() private val segmentPath Path() private val paint Paint(Paint.ANTI_ALIAS_FLAG).apply { style Paint.Style.STROKE strokeWidth 8f strokeCap Paint.Cap.ROUND strokeJoin Paint.Join.ROUND color 0xFF333333.toInt() } private var progress 0f private val signaturePath Path().apply { // 模拟一段手写轨迹实际项目可由手势采集得到 moveTo(100f, 400f) cubicTo(180f, 320f, 260f, 500f, 400f, 360f) quadTo(480f, 260f, 600f, 420f) } init { measure.setPath(signaturePath, false) } fun setProgress(value: Float) { progress value.coerceIn(0f, 1f) invalidate() } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) val len measure.length if (len 0f) return // 复用 segmentPath避免每帧创建新对象 segmentPath.reset() measure.getSegment(0f, len * progress, segmentPath, true) canvas.drawPath(segmentPath, paint) } }如果你还想让笔迹有一种“压感笔”的粗细变化可以在手势采集时同时保存每个点的压力值绘画阶段按压力换算成不同 strokeWidth 分段绘制。这个做起来麻烦一点但交互体验会明显上一个台阶。4. 工程化注意事项动画控制器的拆分与对象复用4.1 把动画时间与 UI 绘制解耦自定义 AnimatorController项目中路径动画通常不是只跑一次的。用力单击、下拉刷新、页面切换每次都要重新触发。如果把 ValueAnimator 直接写在自定义 View 内部你会发现每次进入页面都要处理动画启动、停止、cancel、防重复 enter 等琐事代码很容易膨胀。更好的办法是把“时间驱动”这部分抽出来做成一个轻量控制器。控制器持有 ValueAnimator通过回调把 progress 暴露给外部。这样 View 只关心“progress 到了多少就画什么”控制器只关心“什么时候开始、什么时候结束、采用哪种插值器”。一段最小实现长这样class PathAnimatorController( private val duration: Long 1500, private val interpolator: TimeInterpolator DecelerateInterpolator() ) { private var animator: ValueAnimator? null fun start( onProgress: (Float) - Unit, onEnd: (() - Unit)? null ) { cancel() val anim ValueAnimator.ofFloat(0f, 1f) anim.duration duration anim.interpolator interpolator anim.addUpdateListener { valueAnimator - onProgress(valueAnimator.animatedValue as Float) } anim.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator) { onEnd?.invoke() } }) animator anim anim.start() } fun cancel() { animator?.cancel() } }在自定义 View 中使用时只需初始化 controller在 onAnimationUpdate 回调里把 progress 传给 setProgress。这样做的好处是动画时长、插值器可以集中设置页面退出时统一 cancel避免产生内存泄漏或重复回调。如果你的项目里动画种类很多可以基于这个控制器再扩充“延迟启动”、“重复次数”、“动画分组控制”等能力通用性会更好。4.2 对象复用与 GC 优化路径动画的常见性能瓶颈路径动画有几个容易被忽略的内存细节。PathMeasure 自身是轻量对象但配套使用的 Path、FloatArray、Matrix 如果每帧都新建会带来不必要的 GC 压力。比如 getPosTan 需要两个 FloatArray 作为输出缓冲区你完全可以当作成员变量复用到整个生命周期getSegment 的 dst Path 也可以每帧先 reset 再复用。如果你还同时用到了 Paint 和 Matrix建议全部提到成员变量里初始化。真实项目的坑往往不在算法本身而在“低端设备 高频创建临时对象”的组合上。一个 3 秒的路径动画如果每帧都 new Path总共会有 180 个对象产生系统在低内存堆上触发一次 GC动画掉帧一次复用对象后这些开销都没了。还有一个树脂细节硬件加速开启时Canvas 会把 Path 转成特定图形指令Path 内部数据会被复制到 GPU 的指令队列中。如果在动画期间频繁 reset 并重新绘制同一个 Path可能造成额外的指令重传。对于中小型路径问题不大但在很复杂的路径动画中尽量让 Path 的节点数稳定在一个合理范围避免每帧大量改变路径结构。5. 常见问题与排查技巧实录5.1 动画结果不对先检查 forceClosed、moveTo 起点和 Path 方向第一位的问题是“截取出来的线段莫名多了一条连接线”或者“动画最后一段滞空”。几乎都是 forceClosed 参数造成的。我见过最典型的误用画了一个完整圆形setPath 时传 true其实圆本来就闭合传 true 会多做一次重复测量可能让 getLength 比预期略长一点动画轨迹明明视觉已经画完进度却还在中途。反过来画非闭合路径传 false一切正常。另一个常见的问题是 moveTo 起点设置不合理。PathMeasure 的 distance 从 moveTo 起点开始累积如果你在路径中间又穿插了一个 moveTo会导致路径被拆成多个不连续的段getPosTan 在跨段时可能跳变。此时应该用 nextContour() 逐段处理或者干脆把路径拆开、分别测量。5.2 图标不贴轨迹多半是锚点没居中用 getMatrix 做图标跟随经常出现图标“悬空”在轨迹外侧的情况。原因是矩阵默认基准是左上角你在 canvas.drawBitmap 前必须将锚点设置在图片中心。如果你用的是 getPosTan 自己算同样要注意 pos 给出的坐标是路径上的点而不是图标中心需要把图标宽高的一半作为偏置量再 translate。我习惯写一个小工具方法private fun applyCenterOffset(matrix: Matrix, bitmapWidth: Float, bitmapHeight: Float) { matrix.preTranslate(-bitmapWidth / 2f, -bitmapHeight / 2f) }在 getMatrix 之前调用后续绘制的 Bitmap 就能乖乖贴住路径。别小看这几行代码它能省掉很多“看起来偏移了几像素”的肉眼对不齐问题。5.3 高效调试法参考路径、采样点与角度标注复杂的路径动画尤其同时有多个曲线叠加时新手最容易看到一团黑线却不知道错在哪。我的建议分三步第一步先把原 Path 用半透明画笔画出来作为参考底稿确认几何形状。第二步把 PathMeasure 计算的 pos 坐标每隔一段距离打一个小圆点确认路径采样符合预期。第三步把旋转角度以文本形式标在点旁边观察角度变化是否符合曲线走势。这套“参考路径 采样点 角度标注”的调试三件套可以解决九成以上的路径动画偏差问题。比如小飞机动画如果发现朝向反了往往不是 getPosTan 写错而是绘制图形本身的朝向定义与切线方向不一致这时只要把绘制的起点几何方向调整为与切线方向一致即可。5.4 问题排查速查表现象可能原因优先检查项动画尾部有一段停滞forceClosed 传了 true测量长度多出虚拟闭合段检查 setPath 第二参数截取路径多了一条直线连接段getSegment 用 startWithMoveTofalse子路径起始丢失 moveTo改传 true或手动 moveTo图标悬在轨迹外侧矩阵默认按图片左上角锚定preTranslate 到图片中心图标方向时对时不对Path 中间有多个 moveTo 导致不连续拆分子路径逐段处理动画卡顿掉帧每帧 new Path、FloatArray 造成 GC复用成员变量、缓存 Path贝塞尔曲线速度忽快忽慢distance 直接用了动画 progress没有先乘以 length统一用 progress * length 作为 distance上面这些问题几乎都能在写完第一个路径动画练手项目时遇到。遇到时不用慌先对着表格过一遍大多数都能在几分钟内定位出来。最后再分享一个小技巧如果允许尽量把练习动画的控件尺寸固定下来再开发比如直径 200dp 的圆、700dp 宽的轨迹。路径动画一旦涉及百分比、权重、多尺寸适配调试难度会成倍增加固定尺寸能把变量锁住让核心的时长、插值器、路径方向问题得到充分验证。等这些基本盘稳定了再加入动态尺寸也不迟。