HarmonyOS鸿蒙Next中motionPath的path字符串规则有没有更详细的文档

HarmonyOS鸿蒙Next中motionPath的path字符串规则有没有更详细的文档 这里的规则好像不完整

motionPath路径

6 回复

SVG 中的 <path> 的路径绘制规则如下，可以根据一下参考：

SVG 中的 <path> 元素通过一系列指令（命令）定义路径，这些指令由字母（命令类型）和数字（坐标或参数）组成，用于绘制直线、曲线、弧线等复杂图形。以下是核心规则和常用命令解析：

基本规则

  1. 坐标系统：默认使用用户坐标系（x 轴水平向右，y 轴垂直向下），坐标可以是绝对坐标（基于原点）或相对坐标（基于当前位置）。
  2. 命令区分大小写：
    • 大写字母（如 M、L）表示绝对坐标；
    • 小写字母（如 m、l）表示相对坐标（相对于上一个点的偏移量）。
  3. 参数格式：数字可带正负号，可用空格、逗号或混合方式分隔（例如 10,20 30 40 等价于 10,20 30,40）。
  4. 路径起点：所有路径必须以 M 或 m 开始，定义初始点。

常用命令及语法

1. 移动起点（M/m）

  • 作用：将画笔移动到指定点（不绘制线条），是路径的起始命令。
  • 语法：
    • 绝对：M x y（移动到 (x,y)）
    • 相对：m dx dy（从当前点移动 (dx, dy) 偏移量）
  • 示例：M 100 50 或 m 50 -20

2. 直线（L/l, H/h, V/v）

  • L/l（Line To）：从当前点绘制直线到目标点。
    • 绝对：L x y
    • 相对：l dx dy
    • 示例：L 200 100（从当前点画到 (200,100)）
  • H/h（Horizontal Line To）：绘制水平线（y 坐标不变）。
    • 绝对：H x（x 为目标横坐标，y 沿用当前点）
    • 相对：h dx（x 方向偏移 dx，y 不变）
    • 示例：H 300 或 h 50
  • V/v（Vertical Line To）：绘制垂直线（x 坐标不变）。
    • 绝对：V y（y 为目标纵坐标，x 沿用当前点）
    • 相对：v dy（y 方向偏移 dy，x 不变）
    • 示例：V 150 或 v -30

3. 贝塞尔曲线

  • 二次贝塞尔曲线（Q/q, T/t）
    • Q/q：通过一个控制点定义曲线。
      • 绝对：Q cx cy x y（控制点 (cx, cy)，终点 (x, y)）
      • 相对：q dcx dcy dx dy（控制点偏移 (dcx, dcy)，终点偏移 (dx, dy)）
    • T/t：简化二次贝塞尔曲线（控制点为上一个控制点的对称点）。
      • 绝对：T x y（终点 (x, y)，控制点自动计算）
      • 相对：t dx dy（终点偏移 (dx, dy)）
  • 三次贝塞尔曲线（C/c, S/s）
    • C/c：通过两个控制点定义曲线。
      • 绝对：C cx1 cy1 cx2 cy2 x y（控制点 1 (cx1, cy1)，控制点 2 (cx2, cy2)，终点 (x, y)）
      • 相对：c dcx1 dcy1 dcx2 dcy2 dx dy（偏移量版本）
    • S/s：简化三次贝塞尔曲线（第一个控制点为上一个终点的对称点）。
      • 绝对：S cx2 cy2 x y（仅需第二个控制点和终点）
      • 相对：s dcx2 dcy2 dx dy

4. 弧线（A/a）

  • 作用：绘制椭圆弧（可模拟圆弧），参数较复杂。
  • 语法：
    • 绝对：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
    • 相对：a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
  • 参数说明：
    • rx, ry：椭圆的 x、y 轴半径；
    • x-axis-rotation：椭圆绕 x 轴的旋转角度（度）；
    • large-arc-flag：0（小弧）或 1（大弧）；
    • sweep-flag：0（逆时针）或 1（顺时针）；
    • x, y（或 dx, dy）：弧线终点坐标（或偏移量）。

5. 闭合路径（Z/z）

  • 作用：将当前点与路径起点连接，形成闭合图形（不区分大小写）。
  • 语法：Z 或 z（无参数）。

如果有帮助，望采纳！

更多关于HarmonyOS鸿蒙Next中motionPath的path字符串规则有没有更详细的文档的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以参考一下 mdn 的文档：d - SVG：可缩放矢量图形 | MDN

MoveTo 路径命令

Moveto 指令可以被想象成拎起绘图笔，落脚到另一处。即，从当前位置（Po; {xo, yo}），移动到新的位置（Pn; {xn, yn}），且新的位置与 Po 之间不会绘制线段。

命令 参数 备注
M (x, y)+ 将当前位置移动到坐标 x,y。后续子坐标序列将被解释为隐式的绝对位置的 LineTo（L）命令的参数（见下方）。
公式： Pn = {x, y}
m (dx, dy)+ 将当前位置沿 x 轴移动 dx，沿 y 轴移动 dy。后续子坐标序列将被解释为隐式的相对位置的 LineTo（l）命令的参数（见下方）。
公式： Pn = {xo + dx, yo + dy}

Lineto 路径命令

Lineto 指令将绘制一条直线段。这个直线段从当前位置（Po; {xo, yo}）移到指定位置（Pn; {xn, yn}）。然后，指定位置（Pn）将变成下一个命令中的当前位置（Po′）。

命令 参数 备注
L (x, y)+ 在当前位置和指定位置 x,y 之间绘制一条线段。后续子坐标序列将被解释为隐式的绝对位置的 LineTo（L）命令的参数。
公式： Po′ = Pn = {x, y}
l (dx, dy)+ 在当前位置和指定位置之间绘制一条线段，指定位置为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处。后续子坐标序列将被解释为隐式的相对位置的 LineTo（L）命令的参数。
公式： Po′ = Pn = {xo + dx, yo + dy}
H x+ 在当前位置与指定位置之间绘制一条水平线段。指定位置由 x 参数和当前位置的 y 坐标指定。后续子序列的值将被解释为隐式的绝对位置的 LineTo（H）命令的参数。
公式： Po′ = Pn = {x, yo}
h dx+ 在当前位置与指定位置之间绘制一条水平线段。指定位置由当前位置沿 x 轴偏移 dx 的 x 坐标和当前位置的 y 坐标指定。后续子序列的值将被解释为隐式的相对位置的 LineTo（h）命令的参数。
公式： Po′ = Pn = {xo + dx, yo}
V y+ 在当前位置与指定位置之间绘制一条垂直线段。指定位置由 y 参数和当前位置的 x 坐标指定。后续子序列的值将被解释为隐式的绝对位置的 LineTo（V）命令的参数。
公式： Po′ = Pn = {xo, y}
v dy+ 在当前位置与指定位置之间绘制一条垂直线段。指定位置由当前位置沿 y 轴偏移 dy 的 y 坐标和当前位置的 x 坐标指定。后续子序列的值将被解释为隐式的相对位置的 LineTo（v）命令的参数。
公式： Po′ = Pn = {xo, yo + dy}

三次贝塞尔曲线

三次贝塞尔曲线是使用四个点定义的平滑曲线：

起始点（当前位置） (Po = {xo, yo})

终点 (Pn = {xn, yn})

起始控制点 (Pcs = {xcs, ycs})（控制在起点附近的曲线的曲率）

终点控制点 (Pce = {xce, yce})（控制在终点附近的曲线的曲率）

绘制后，终点（Pn）将成为下一个命令中的当前位置（Po′）。

命令 参数 备注
C (x1,y1, x2,y2, x,y)+ 在当前位置和终点 x,y 之间绘制一条三次贝塞尔曲线。起始控制点通过 x1,y1 指定，而终点控制点通过 x2,y2 指定。后续的三元组坐标序列将被解释为隐式的绝对位置的三次贝塞尔曲线（C）命令的参数。
公式：Po′ = Pn = {x, y} ;
Pcs = {x1, y1} ;
Pce = {x2, y2}
c (dx1,dy1, dx2,dy2, dx,dy)+ 在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条三次贝塞尔曲线。起始控制点为当前位置沿 x 轴偏移 dx1 以及沿 y 轴偏移 dy1 处；而终点控制点为当前位置沿 x 轴偏移 dx2 以及沿 y 轴偏移 dy2 处。后续的三元组坐标序列将被解释为隐式的相对位置的三次贝塞尔曲线（c）命令的参数。
公式：Po′ = Pn = {xo + dx, yo + dy} ;
Pcs = {xo + dx1, yo + dy1} ;
Pce = {xo + dx2, yo + dy2}
S (x2,y2, x,y)+ 在当前位置和终点 x,y 之间绘制一条平滑的三次贝塞尔曲线。终点控制点通过 x2,y2 指定。起始控制点是上一条曲线命令的终点控制点在当前位置上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（当前位置）相同。后续成对的坐标序列将被解释为隐式的绝对位置的平滑三次贝塞尔曲线（S）命令的参数。
s (dx2,dy2, dx,dy)+ 在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条平滑的三次贝塞尔曲线。终点控制点为当前位置沿 x 轴偏移 dx2 以及沿 y 轴偏移 dy2 处。起始控制点是上一条曲线命令的终点控制点在当前位置上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（当前位置）相同。后续成对的坐标序列将被解释为隐式的相对位置的平滑三次贝塞尔曲线（s）命令的参数。

二次贝塞尔曲线

二次贝塞尔曲线是使用三个点定义的平滑曲线：

起始点（当前位置） Po = {xo, yo}

终点 Pn = {xn, yn}

控制点 Pc = {xc, yc}（控制曲率）

绘制后，终点（Pn）将成为下一个命令中的当前位置（Po′）。

命令 参数 备注
Q (x1,y1, x,y)+ 在当前位置和终点 x,y 之间绘制一条二次贝塞尔曲线。控制点通过 x1,y1 指定。后续成对的坐标序列将被解释为隐式的绝对位置的二次贝塞尔曲线（Q）命令的参数。
公式：Po′ = Pn = {x, y} ;
Pc = {x1, y1}
q (dx1,dy1, dx,dy)+ 在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条二次贝塞尔曲线。控制点为当前位置（曲线的起始点）沿 x 轴偏移 dx1 以及沿 y 轴偏移 dy1 处。后续成对的坐标序列将被解释为隐式的相对位置的二次贝塞尔曲线（q）命令的参数。
公式：Po′ = Pn = {xo + dx, yo + dy} ;
Pc = {xo + dx1, yo + dy1}
T (x,y)+ 在当前位置和终点 x,y 之间绘制一条平滑的二次贝塞尔曲线。控制点是上一条曲线命令的控制点在当前位置上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（当前位置）相同。后续的坐标序列将被解释为隐式的绝对位置的平滑二次贝塞尔曲线（T）命令的参数。
公式：Po′ = Pn = {x, y}
t (dx,dy)+ 在当前位置和终点（终点为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处）之间绘制一条平滑的二次贝塞尔曲线。控制点是上一条曲线命令的控制点在当前位置上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（当前位置）相同。后续的坐标序列将被解释为隐式的相对位置的平滑二次贝塞尔曲线（t）命令的参数。
公式：Po′ = Pn = {xo + dx, yo + dy}

椭圆曲线

椭圆曲线是定义为椭圆的一部分的曲线。有时，使用椭圆曲线绘制高度规则的曲线会比使用贝塞尔曲线更容易。

命令 参数 备注
A (rx ry angle large-arc-flag sweep-flag x y)+ 在当前位置和坐标 x,y 之间绘制一条椭圆曲线。用于绘制圆弧的椭圆中心根据命令的其他参数确定：
- rx 和ry 是椭圆的两个半径；
- angle 表示椭圆相对于 x 轴的旋转角度；
- large-arc-flag 和 sweep-flag 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线。
- large-arc-flag 允许选择一个大弧线（1）或一个小弧线（0
  1. SVG 官方规范：推荐参考MDN SVG Path 文档，其中详细解释了所有命令的语法和示例，基本适用于 ArkUI 的 motionPath。

以下是 ArkUI 中 motionPath 常用的 SVG Path 命令（覆盖绝大多数动画场景）：

命令 含义 语法格式 示例（绝对坐标） 示例（相对坐标）
M/m 移动到起点（不绘制） M x y 或 m dx dy M 100 200（移动到 (100,200)） m 50 30（相对于当前点右移 50，下移 30）
L/l 画直线到目标点 L x y 或 l dx dy L 300 200（从起点直线到 (300,200)） l 200 0（相对当前点右移 200，y 不变）
H/h 画水平直线 H x 或 h dx（仅 x 坐标变化，y 不变） H 400（水平直线到 x=400，y 不变） h 100（相对当前点 x 增加 100）
V/v 画垂直直线 V y 或 v dy（仅 y 坐标变化，x 不变） V 300（垂直直线到 y=300，x 不变） v 100（相对当前点 y 增加 100）
C/c 三次贝塞尔曲线 C x1 y1 x2 y2 x y（x1,y1：起点控制点；x2,y2：终点控制点；x,y：终点） C 150 100 250 300 300 200 c 50 -100 150 100 200 0
S/s 平滑三次贝塞尔曲线 S x2 y2 x y（复用前一个曲线的终点控制点镜像） S 250 300 300 200 s 150 100 200 0
Q/q 二次贝塞尔曲线 Q x1 y1 x y（x1,y1：控制点；x,y：终点） Q 200 100 300 200 q 100 -100 200 0
T/t 平滑二次贝塞尔曲线 T x y（复用前一个曲线的控制点镜像） T 300 200 t 200 0
A/a 椭圆弧 A rx ry x-axis-rotation large-arc-flag sweep-flag x y（参数较多，见说明） A 50 50 0 0 1 300 200 a 50 50 0 0 1 200 0
Z/z 闭合路径（连接起点） 无参数（将终点与起点用直线连接） Z（闭合当前路径） z（同上）

这个就是svg路径规则，用法基本就这些，也可以百度了解下，个人认为这个路径动画确实不好用

cke_321.png

目前HarmonyOS官方文档中关于motionPath的path字符串规则尚未提供独立详细说明。该属性遵循SVG路径数据格式规范，使用Moveto(M)、Lineto(L)、Curveto©等命令字符配合坐标参数构成路径数据。具体参数格式可参考W3C SVG Paths标准中关于路径数据的定义方式，路径字符串通过命令字符和数值序列描述运动轨迹的几何形状。

在HarmonyOS Next中，motionPath的路径字符串遵循SVG路径规范（W3C标准），与HarmonyOS 3.x版本基本一致。路径字符串规则如下：

  1. 基本命令（区分大小写）：

    • M/m：移动到指定坐标（M绝对坐标，m相对坐标）
    • L/l：绘制直线到目标点
    • H/h：水平线（H绝对坐标，h相对位移）
    • V/v：垂直线（V绝对坐标，v相对位移）
    • C/c：三次贝塞尔曲线（C绝对坐标，c相对位移）
    • S/s：连续三次贝塞尔曲线
    • Q/q：二次贝塞尔曲线
    • T/t：连续二次贝塞尔曲线
    • A/a：椭圆弧线
    • Z/z：闭合路径

  2. 参数规则：

    • 坐标支持整数/浮点数（如M 100 200）
    • 命令与参数间可用空格/逗号分隔（建议用空格）
    • 连续相同命令可省略重复标识（如L 100 200 150 300等效于L 100 200 L 150 300）

  3. Next版本注意事项：

    • 路径必须包含至少一个M/m起始点
    • 使用Z/z闭合路径时自动连接首尾点
    • 特殊曲线（如贝塞尔曲线）需确保控制点坐标有效

示例：

/* 三角形路径 */
motionPath: 'M 100 100 L 200 100 L 150 200 Z'
/* 曲线路径 */
motionPath: 'M 50 50 C 100 0 150 100 200 50'

若需完整规范，建议直接查阅W3C SVG Paths标准文档，其语法与HarmonyOS实现完全兼容。

回到顶部