Qml中的PathAnimation可以让目标沿着一个指定路径运行。

PathAnimation的属性

• anchorPoint：使用"x,y"来指定运动的锚定点。
• orientation：指定控制目标对象沿着路径运动的旋转策略。
• path属性的类型为Path，选择你要构造的路径。
  • startX，startY是路径的起点
  • pathElements包括PathLine，PathQuad（二阶），PathCubic（三阶），PathArc（弧线），PathCurve（曲线）。

实例代码如下

import QtQuick 2.0Canvas {width: 400height: 240onPaint: {//绘制弧线-只是形象来表示控件的运动轨迹var ctx=getContext("2d")ctx.lineWidth=4ctx.strokeStyle="red"ctx.arc(200, 0, 160, Math.PI*2, 0, false)ctx.stroke()}Rectangle{id:rectwidth: 40height: 40color: "blue"x:20y:0MouseArea{id:mouseAreaanchors.fill: parentonClicked: {//启动动画pathAim.start() }}PathAnimation{id:pathAimtarget: rectduration: 6000//运动控件上的锚定点anchorPoint: "20,20"//运动策略orientation: PathAnimation.TopFirst//运动开始/结束与设定值不匹配到匹配的运动周期orientationEntryDuration: 200orientationExitDuration: 200easing.type: Easing.InOutCubicpath: Path{//起始点startX: 40startY: 0//绘制弧线PathArc{//终点x:360y:0//使用大弧，指定半径useLargeArc: trueradiusX: 160radiusY: 160//逆时针方向direction: PathArc.Counterclockwise}}}}
}

结果如下图