未验证 提交 13a0e536 编写于 作者: O openharmony_ci 提交者: Gitee

!9886 链接修改

Merge pull request !9886 from LiAn/OpenHarmony-3.1-Release
......@@ -20,28 +20,28 @@ TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?:
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------------------- | ---------------------------------------- | ---- | --------------- |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 |
| placeholder | [ResourceStr](ts-types.md#resourcestr8) | 否 | 无输入时的提示文本。 |
| text | [ResourceStr](ts-types.md#resourcestr8) | 否 | 设置输入框当前的文本内容。 |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 |
## 属性
除支持通用属性外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| type | InputType | 设置输入框类型。<br/>默认值:InputType.Normal |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式:<br/>-&nbsp;size:&nbsp;设置文本尺寸,Length为number类型时,使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型。<br/>默认值:EnterKeyType.Done |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
| 名称 | 参数类型 | 描述 |
| ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | 设置输入框类型。<br/>默认值:InputType.Normal |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 |
| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式:<br/>-&nbsp;size:&nbsp;设置文本尺寸,Length为number类型时,使用fp单位。<br/>-&nbsp;weight:&nbsp;设置文本的字体粗细,number类型取值[100,&nbsp;900],取值间隔为100,默认为400,取值越大,字体越粗。<br/>-&nbsp;family:&nbsp;设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效。例如:'Arial,&nbsp;sans-serif'。<br/>-&nbsp;style:&nbsp;设置文本的字体样式。 |
| enterKeyType | EnterKeyType | 设置输入法回车键类型。<br/>默认值:EnterKeyType.Done |
| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 |
| maxLength | number | 设置文本的最大输入字符数。 |
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr8)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void<br/>} | 正则表达式,满足表达式的输入允许显示,不满足正则表达式的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$,8到10位的强密码不支持过滤。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被忽略的内容。 |
## EnterKeyType枚举说明
| 名称 | 描述 |
| ------------------- | --------- |
| 名称 | 描述 |
| ------ | --------- |
| Go | 显示Go文本。 |
| Search | 显示为搜索样式。 |
| Send | 显示为发送样式。 |
......@@ -50,8 +50,8 @@ TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?:
## InputType枚举说明
| 名称 | 描述 |
| ------------------ | ------------- |
| 名称 | 描述 |
| -------- | ------------- |
| Normal | 基本输入模式。 |
| Password | 密码输入模式。 |
| Email | e-mail地址输入模式。 |
......@@ -69,15 +69,15 @@ TextInput(value?:{placeholder?: [ResourceStr](ts-types.md#resourcestr8), text?:
| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发回调。<br/>value:剪切的文本内容。 |
| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发回调。<br/>value:粘贴的文本内容。 |
### TextInputController<sup>8+</sup>
## TextInputController<sup>8+</sup>
TextInput组件的控制器。
#### 导入对象
### 导入对象
```
controller: TextInputController = new TextInputController()
```
#### caretPosition
### caretPosition
caretPosition(value:&nbsp;number): void
......@@ -85,9 +85,9 @@ caretPosition(value:&nbsp;number): void
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| value | number | 是 | 设置输入光标的位置。<br/>value:从字符串开始到光标所在位置的字符长度。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| value | number | 是 | 设置输入光标的位置。<br/>value:从字符串开始到光标所在位置的字符长度。 |
## 示例
......
......@@ -36,14 +36,14 @@ RenderingContextSettings(antialias?: boolean)
| 名称 | 类型 | 描述 |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [fillStyle](#fillstyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|<br>&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时,表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|&nbsp;[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;<br>[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时,表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时,表示渐变对象,使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时,使用[createPattern](#createpattern)方法创建。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式,可选值为:<br/>-&nbsp;'butt':线端点以方形结束。<br/>-&nbsp;'round':线端点以圆形结束。<br/>-&nbsp;'square':线端点以方形结束,该样式下会增加一个长度和线段厚度相同,宽度是线段厚度一半的矩形。<br/>默认值:'butt'。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式,可选值为:<br/>-&nbsp;'round':在线段相连处绘制一个扇形,扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel':在线段相连处使用三角形为底填充,&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter':在相连部分的外边缘处进行延伸,使其相交于一点,形成一个菱形区域,该属性可以通过设置miterLimit属性展现效果。<br/>默认值:'miter'。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值,该值指定了线条相交处内角和外角的距离。 <br/>默认值:10。 |
| [font](#font) | string | 设置文本绘制中的字体样式。<br/>语法:ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列。<br/>语法:ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选),用于指定字体样式,支持如下几种样式:'normal','italic'。<br/>-&nbsp;font-weight(可选),用于指定字体的粗细,支持如下几种类型:'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选),指定字号和行高,单位只支持px。<br/>-&nbsp;font-family(可选),指定字体系列,支持如下几种类型:'sans-serif',&nbsp;'serif',&nbsp;'monospace'。<br/>默认值:'normal normal 14px sans-serif'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式,可选值为:<br/>-&nbsp;'left':文本左对齐。<br/>-&nbsp;'right':文本右对齐。<br/>-&nbsp;'center':文本居中对齐。<br/>-&nbsp;'start':文本对齐界线开始的地方。<br/>-&nbsp;'end':文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明:**<br/>>&nbsp;ltr布局模式下'start'和'left'一致,rtl布局模式下'start'和'right'一致·。<br/>默认值:'left'。 |
| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式,可选值为:<br/>-&nbsp;'left':文本左对齐。<br/>-&nbsp;'right':文本右对齐。<br/>-&nbsp;'center':文本居中对齐。<br/>-&nbsp;'start':文本对齐界线开始的地方。<br/>-&nbsp;'end':文本对齐界线结束的地方。<br/>**说明:**<br/>ltr布局模式下'start'和'left'一致,rtl布局模式下'start'和'right'一致·。<br/>默认值:'left'。 |
| [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式,可选值为:<br/>-&nbsp;'alphabetic':文本基线是标准的字母基线。<br/>-&nbsp;'top':文本基线在文本块的顶部。<br/>-&nbsp;'hanging':文本基线是悬挂基线。<br/>-&nbsp;'middle':文本基线在文本块的中间。<br/>-&nbsp;'ideographic':文字基线是表意字基线;如果字符本身超出了alphabetic基线,那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom':文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。<br/>默认值:'alphabetic'。 |
| [globalAlpha](#globalalpha) | number | 设置透明度,0.0为完全透明,1.0为完全不透明。 |
| [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量,精度为float。 <br/>默认值:0.0。 |
......
......@@ -23,16 +23,16 @@ Column(value?:{space?: string | number})
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------- | ---- | ------ | ------------------ |
| space | string\|number | 否 | 0 | 纵向布局元素间距。 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ----- | -------------- | ---- | ---- | --------- |
| space | string\|number | 否 | 0 | 纵向布局元素间距。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------- | --------------------------------- | ---------------------- | ----------------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 |
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------------- | ---------------------------------------- | ---------------------- | ----------------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 |
## 示例
......
......@@ -20,21 +20,21 @@ Scroll(scroller?: Scroller)
## 属性
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | --------- |
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| scrollable | ScrollDirection | 设置滑动方法。<br/>默认值:ScrollDirection.Vertical |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。<br/>默认值:BarState.Off |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滑动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滑动条的宽度。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。<br/>默认值:BarState.Off |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滑动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滑动条的宽度。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.Spring |
## ScrollDirection枚举说明
| 名称 | 描述 |
| ---------- | ------------------------ |
| Horizontal | 仅支持水平方向滚动。 |
| Vertical | 仅支持竖直方向滚动。 |
| None | 不可滚动。 |
| 名称 | 描述 |
| ---------- | ------------ |
| Horizontal | 仅支持水平方向滚动。 |
| Vertical | 仅支持竖直方向滚动。 |
| None | 不可滚动。 |
| Free | 支持竖直或水平方向滚动。 |
## 事件
......@@ -43,7 +43,7 @@ Scroll(scroller?: Scroller)
| ---------------------------------------- | ----------------------------- |
| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调,&nbsp;返回滚动时水平、竖直方向偏移量。 |
| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 |
| onScrollEnd(event: () => void) | 滚动停止事件回调。 |
| onScrollEnd(event: () => void) | 滚动停止事件回调。 |
## Scroller
......@@ -66,11 +66,11 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | number&nbsp;\|&nbsp;string | 是 | 水平滑动偏移。 |
| yOffset | number&nbsp;\|&nbsp;string | 是 | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;<br/>} | 否 | 动画配置:<br/>-&nbsp;duration:&nbsp;滑动时长设置。<br/>-&nbsp;curve:&nbsp;滑动曲线设置。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| xOffset | number&nbsp;\|&nbsp;string | 是 | 水平滑动偏移。 |
| yOffset | number&nbsp;\|&nbsp;string | 是 | 竖直滑动偏移。 |
| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;<br/>} | 否 | 动画配置:<br/>-&nbsp;duration:&nbsp;滑动时长设置。<br/>-&nbsp;curve:&nbsp;滑动曲线设置。 |
### scrollEdge
......@@ -87,10 +87,10 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | --------------------------------- | ---- | --------------------------------------------------- |
| next | boolean | 是 | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动方向为水平或竖直方向。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | --------------------------------- | ---- | ------------------------------ |
| next | boolean | 是 | 是否向下翻页。true表示向下翻页,false表示向上翻页。 |
| direction | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动方向为水平或竖直方向。 |
### currentOffset
......@@ -112,9 +112,9 @@ scrollToIndex(value: number): void
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | ---------------------------------- |
| value | number | 是 | 要滑动到的列表项在列表中的索引值。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ----------------- |
| value | number | 是 | 要滑动到的列表项在列表中的索引值。 |
## 示例
......
......@@ -46,22 +46,22 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
| muted | boolean | false | 是否静音。 |
| autoPlay | boolean | false | 是否自动播放。 |
| controls | boolean | true | 控制视频播放的控制栏是否显示。 |
| objectFit | [ImageFit](ts-basic-components-image.md) | Cover | 设置视频显示模式。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置视频显示模式。 |
| loop | boolean | false | 是否单个视频循环播放。 |
## 事件
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onStart(event:()&nbsp;=&gt;&nbsp;void) | 播放时触发该事件。 |
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onStart(event:()&nbsp;=&gt;&nbsp;void) | 播放时触发该事件。 |
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| onPrepared(callback:(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为s。<br/>- duration: 视频的时长。 |
| onSeeking(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息,单位为s。 |
| onSeeked(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后,上报播放时间信息,单位为s。 |
| onUpdate(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 |
| onSeeking(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息,单位为s。 |
| onSeeked(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后,上报播放时间信息,单位为s。 |
| onUpdate(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 |
## VideoController
......
# 路径动画
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
设置组件进行位移动画时的运动路径。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;path中支持通过start和end进行起点和终点的替代,如:<br/>>&nbsp;<br/>>&nbsp;'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进行起点和终点的替代,如:&nbsp;'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:是否跟随路径进行旋转。 |
## 示例
......
......@@ -6,43 +6,43 @@
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
| 名称 | 参数 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| PageTransitionEnter | { <br/>type?: RouteType,<br/>duration?: number,<br/> curve?: Curve \| string,<br/> delay?:number <br/>} | 设置当前页面的自定义入场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| PageTransitionExit | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number<br/>} | 设置当前页面的自定义退场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| 名称 | 参数 | 参数描述 |
| ------------------- | ---------------------------------------- | ---------------------------------------- |
| PageTransitionEnter | { <br/>type?: RouteType,<br/>duration?: number,<br/> curve?: Curve \| string,<br/> delay?:number <br/>} | 设置当前页面的自定义入场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-appendix-enums.md#curve)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| PageTransitionExit | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number<br/>} | 设置当前页面的自定义退场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-appendix-enums.md#curve)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
## RouteType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| 名称 | 描述 |
| ---- | ---------------------------------------- |
| Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| Push | 跳转到下一页面。PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
| None | 页面未重定向。 |
| None | 页面未重定向。 |
## 属性
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。<br/>默认值:SlideEffect.Right |
| translate | {<br/>x?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>y?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>z?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。<br/>-&nbsp;x:横向的平移距离。<br/>-&nbsp;y:纵向的平移距离。<br/>-&nbsp;z:竖向的平移距离。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的缩放效果,为入场时起点和退场时终点的值。<br/>-&nbsp;x:横向放大倍数(或缩小比例)。<br/>-&nbsp;y:纵向放大倍数(或缩小比例)。<br/>-&nbsp;z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。 |
| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。<br/>默认值:1 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。<br/>默认值:SlideEffect.Right |
| translate | {<br/>x?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>y?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>z?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。<br/>-&nbsp;x:横向的平移距离。<br/>-&nbsp;y:纵向的平移距离。<br/>-&nbsp;z:竖向的平移距离。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的缩放效果,为入场时起点和退场时终点的值。<br/>-&nbsp;x:横向放大倍数(或缩小比例)。<br/>-&nbsp;y:纵向放大倍数(或缩小比例)。<br/>-&nbsp;z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。 |
| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。<br/>默认值:1 |
## SlideEffect枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
| 名称 | 描述 |
| ------ | ------------------------- |
| Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
| Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
## 事件
| 事件 | 功能描述 |
| -------- | -------- |
| 事件 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onEnter(event: (type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。 |
| onExit(event: (type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。 |
......
......@@ -9,9 +9,9 @@
## 属性
| 名称 | 参数 | 参数描述 |
| -------- | -------- | -------- |
| sharedTransition | id:&nbsp;string,<br/>{<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number,<br/>motionPath?: <br/>{<br/>path: string,<br/>form?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。<br/>-&nbsp; id:设置组件的id。<br/>-&nbsp; duration:单位为毫秒,默认动画时长为1000毫秒。<br/>-&nbsp;curve:默认曲线为Linear,有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。<br/>-&nbsp;delay:单位为毫秒,默认不延时播放。<br/>-&nbsp;motionPath:运动路径信息。<br/>-&nbsp;path:设置路径。<br/>-&nbsp;from:设置起始值。<br/>-&nbsp;to:设置终止值。<br/>-&nbsp;rotatable:是否旋转。<br/>-&nbsp;zIndex:设置Z轴。<br/>-&nbsp;type:动画类型。 |
| 名称 | 参数 | 参数描述 |
| ---------------- | ---------------------------------------- | ---------------------------------------- |
| sharedTransition | id:&nbsp;string,<br/>{<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number,<br/>motionPath?: <br/>{<br/>path: string,<br/>form?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。<br/>-&nbsp; id:设置组件的id。<br/>-&nbsp; duration:单位为毫秒,默认动画时长为1000毫秒。<br/>-&nbsp;curve:默认曲线为Linear,有效值参见[Curve](ts-appendix-enums.md#curve)&nbsp;说明。<br/>-&nbsp;delay:单位为毫秒,默认不延时播放。<br/>-&nbsp;motionPath:运动路径信息。<br/>-&nbsp;path:设置路径。<br/>-&nbsp;from:设置起始值。<br/>-&nbsp;to:设置终止值。<br/>-&nbsp;rotatable:是否旋转。<br/>-&nbsp;zIndex:设置Z轴。<br/>-&nbsp;type:动画类型。 |
## 示例
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册