未验证 提交 216f783d 编写于 作者: L luoying_ace 提交者: Gitee

update zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md.

Signed-off-by: Nluoying_ace <luoying19@huawei.com>
上级 3eee8fa1
......@@ -3,6 +3,7 @@
设置组件进行位移动画时的运动路径。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
......@@ -10,7 +11,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>**说明:**<br/>path中支持通过start和end进行起点和终点的替代,如:<br/>'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'| {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径,入参说明如下:<br/>-&nbsp;path:位移动画的运动路径,使用svg路径字符串。<br/>-&nbsp;from:运动路径的起点,默认为0.0。<br/>-&nbsp;to:运动路径的终点,默认为1.0。<br/>-&nbsp;rotatable:是否跟随路径进行旋转。 |
| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>**说明:**<br/>path中支持使用start和end进行起点和终点的替代,如:<br/>'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'| {<br/>'',<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径,入参说明如下:<br/>-&nbsp;path:位移动画的运动路径,使用svg路径字符串。<br/>-&nbsp;from:运动路径的起点,默认为0.0。<br/>-&nbsp;to:运动路径的终点,默认为1.0。<br/>-&nbsp;rotatable:是否跟随路径进行旋转。 |
## 示例
......@@ -25,13 +26,13 @@ struct MotionPathExample {
build() {
Column() {
Button('click me')
// 执行动画:从起点滑到(300,200),再到(300,500),再到终点。
// 执行动画:从起点移动到(300,200),再到(300,500),再到终点
.motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
.onClick((event: ClickEvent) => {
.onClick(() => {
animateTo({ duration: 4000, curve: Curve.Linear }, () => {
this.toggle = !this.toggle;
this.toggle = !this.toggle // 通过this.toggle变化组件的位置
})
}).backgroundColor(0x317aff)
})
}.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册