路径动画 motionPath
设置组件进行位移动画时的运动路径
- 由于布局改变引起的空间位置变化
- 位移动画引起的位置变化
@ComponentV2
export struct MotionPathComponent {
@Local isLine: boolean = true;
@Local _x: number = 0
build() {
NavDestination() {
Column() {
Button('', { type: ButtonType.Capsule })
.backgroundColor(Color.Orange)
.fontSize(10)
.width(100)
.height(20)
.translate({ x: this._x })
// 设置组件进行位移动画时的运动路径
.motionPath({
// 位移动画的运动路径，使用svg路径字符串
path: `Mstart.x start.y L100 100 L0 200 L200 300 L0 400 L300 500 L0 600 L400 700 L0 800 L500 900 L600 0 L0 1200 L0 0 L1000 2000 Lend.x end.y`,
// 运动路径的起点
from: 0.0,
// 运动路径的终点
to: 1.0,
// 是否跟随路径进行旋转
rotatable: false
})
.onClick(() => {
this.getUIContext().animateTo({
duration: 5000
}, () => {
// 1、布局改变引起的空间位置变化
this.isLine = !this.isLine;
// 2、位移动画引起的位置变化
this._x = 200
})
})
}
.width('100%')
.height('100%')
.justifyContent(this.isLine ? FlexAlign.Start : FlexAlign.End)
.alignItems(this.isLine ? HorizontalAlign.Start : HorizontalAlign.End)
}
.width('100%')
.height('100%')
}
}
