From b6554956ee26b79db00d81060059f0e80fee94cc Mon Sep 17 00:00:00 2001 From: HelloCrease Date: Fri, 23 Sep 2022 17:00:28 +0800 Subject: [PATCH] update docs Signed-off-by: HelloCrease --- .../arkui-ts/ts-basic-components-textinput.md | 42 ++++++++--------- .../arkui-ts/ts-canvasrenderingcontext2d.md | 6 +-- .../reference/arkui-ts/ts-container-column.md | 14 +++--- .../reference/arkui-ts/ts-container-scroll.md | 46 +++++++++---------- .../arkui-ts/ts-media-components-video.md | 20 ++++---- .../arkui-ts/ts-motion-path-animation.md | 14 +++--- .../arkui-ts/ts-page-transition-animation.md | 42 ++++++++--------- ...ts-transition-animation-shared-elements.md | 6 +-- 8 files changed, 95 insertions(+), 95 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index 1d2f8efdfa..fe6621d7dc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -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) | 否 | 设置输入框当前的文本内容。 | | controller8+ | [TextInputController](#textinputcontroller8) | 否 | 设置TextInput控制器。 | ## 属性 除支持通用属性外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| type | InputType | 设置输入框类型。
默认值：InputType.Normal | -| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 | -| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：
- size: 设置文本尺寸，Length为number类型时，使用fp单位。
- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
- style: 设置文本的字体样式。 | -| enterKeyType | EnterKeyType | 设置输入法回车键类型。
默认值：EnterKeyType.Done | -| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 | -| maxLength | number | 设置文本的最大输入字符数。 | -| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr8)8+,
error?: (value: string) => void
} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。
- value：设置正则表达式。
- error：正则匹配失败时，返回被忽略的内容。 | +| 名称 | 参数类型 | 描述 | +| ------------------------ | ---------------------------------------- | ---------------------------------------- | +| type | InputType | 设置输入框类型。
默认值：InputType.Normal | +| placeholderColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置placeholder颜色。 | +| placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式：
- size: 设置文本尺寸，Length为number类型时，使用fp单位。
- weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
- family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
- style: 设置文本的字体样式。 | +| enterKeyType | EnterKeyType | 设置输入法回车键类型。
默认值：EnterKeyType.Done | +| caretColor | [ResourceColor](ts-types.md#resourcecolor8) | 设置输入框光标颜色。 | +| maxLength | number | 设置文本的最大输入字符数。 | +| inputFilter8+ | {
value: [ResourceStr](ts-types.md#resourcestr8)8+,
error?: (value: string) => void
} | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。
- value：设置正则表达式。
- 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?: | onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。
value：剪切的文本内容。 | | onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。
value：粘贴的文本内容。 | -### TextInputController8+ +## TextInputController8+ TextInput组件的控制器。 -#### 导入对象 +### 导入对象 ``` controller: TextInputController = new TextInputController() ``` -#### caretPosition +### caretPosition caretPosition(value: number): void @@ -85,9 +85,9 @@ caretPosition(value: number): void **参数：** -| 参数名 | 参数类型 | 必填 | 参数描述 | -| ------ | -------- | ---- | ------------------------------------------------------------ | -| value | number | 是 | 设置输入光标的位置。
value：从字符串开始到光标所在位置的字符长度。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ----- | ------ | ---- | ---------------------------------------- | +| value | number | 是 | 设置输入光标的位置。
value：从字符串开始到光标所在位置的字符长度。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index d1a50d55c7..925922055c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -36,14 +36,14 @@ RenderingContextSettings(antialias?: boolean) | 名称 | 类型 | 描述 | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 指定绘制的填充色。
- 类型为string时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [fillStyle](#fillstyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \|
 [CanvasPattern](#canvaspattern) | 指定绘制的填充色。
- 类型为string时，表示设置填充区域的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 | -| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | 设置描边的颜色。
- 类型为string时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | +| [strokeStyle](#strokestyle) | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| 
[CanvasPattern](#canvaspattern) | 设置描边的颜色。
- 类型为string时，表示设置描边使用的颜色。
- 类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。
- 类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。 | | [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：
- 'butt'：线端点以方形结束。
- 'round'：线端点以圆形结束。
- 'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
默认值：'butt'。 | | [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：
- 'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
- 'bevel'：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
- 'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
默认值：'miter'。 | | [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。
默认值：10。 | | [font](#font) | string | 设置文本绘制中的字体样式。
语法：ctx.font='font-size font-family'
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列。
语法：ctx.font='font-style font-weight font-size font-family'
- font-style(可选)，用于指定字体样式，支持如下几种样式：'normal','italic'。
- font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900。
- font-size(可选)，指定字号和行高，单位只支持px。
- font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif', 'serif', 'monospace'。
默认值：'normal normal 14px sans-serif'。 | -| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
默认值：'left'。 | +| [textAlign](#textalign) | CanvasTextAlign | 设置文本绘制中的文本对齐方式，可选值为：
- 'left'：文本左对齐。
- 'right'：文本右对齐。
- 'center'：文本居中对齐。
- 'start'：文本对齐界线开始的地方。
- 'end'：文本对齐界线结束的地方。
**说明：**
ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。
默认值：'left'。 | | [textBaseline](#textbaseline) | CanvasTextBaseline | 设置文本绘制中的水平对齐方式，可选值为：
- 'alphabetic'：文本基线是标准的字母基线。
- 'top'：文本基线在文本块的顶部。
- 'hanging'：文本基线是悬挂基线。
- 'middle'：文本基线在文本块的中间。
- 'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。
- 'bottom'：文本基线在文本块的底部。 与ideographic基线的区别在于ideographic基线不需要考虑下行字母。
默认值：'alphabetic'。 | | [globalAlpha](#globalalpha) | number | 设置透明度，0.0为完全透明，1.0为完全不透明。 | | [lineDashOffset](#linedashoffset) | number | 设置画布的虚线偏移量，精度为float。
默认值：0.0。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index 470174aa5a..63a7bb0165 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -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 | 设置子组件在水平方向上的对齐格式。 | -| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| --------------------------- | ---------------------------------------- | ---------------------- | ----------------- | +| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 | +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 1312e57272..cab4ac8ce5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -20,21 +20,21 @@ Scroll(scroller?: Scroller) ## 属性 -| 名称 | 参数类型 | 描述 | -| -------------- | ---------------------------------------- | --------- | +| 名称 | 参数类型 | 描述 | +| -------------- | ---------------------------------------- | ---------------------------------------- | | scrollable | ScrollDirection | 设置滑动方法。
默认值：ScrollDirection.Vertical | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。
默认值：BarState.Off | -| scrollBarColor | string \| number \| Color | 设置滑动条的颜色。 | -| scrollBarWidth | string \| number | 设置滑动条的宽度。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。
默认值：BarState.Off | +| scrollBarColor | string \| number \| Color | 设置滑动条的颜色。 | +| scrollBarWidth | string \| number | 设置滑动条的宽度。 | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.Spring | ## ScrollDirection枚举说明 -| 名称 | 描述 | -| ---------- | ------------------------ | -| Horizontal | 仅支持水平方向滚动。 | -| Vertical | 仅支持竖直方向滚动。 | -| None | 不可滚动。 | +| 名称 | 描述 | +| ---------- | ------------ | +| Horizontal | 仅支持水平方向滚动。 | +| Vertical | 仅支持竖直方向滚动。 | +| None | 不可滚动。 | | Free | 支持竖直或水平方向滚动。 | ## 事件 @@ -43,7 +43,7 @@ Scroll(scroller?: Scroller) | ---------------------------------------- | ----------------------------- | | onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | | 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 \| string | 是 | 水平滑动偏移。 | -| yOffset | number \| string | 是 | 竖直滑动偏移。 | -| animation | {
duration: number,
curve: [Curve](ts-animatorproperty.md) 
} | 否 | 动画配置：
- duration: 滑动时长设置。
- curve: 滑动曲线设置。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| xOffset | number \| string | 是 | 水平滑动偏移。 | +| yOffset | number \| string | 是 | 竖直滑动偏移。 | +| animation | {
duration: number,
curve: [Curve](ts-appendix-enums.md#curve) 
} | 否 | 动画配置：
- duration: 滑动时长设置。
- curve: 滑动曲线设置。 | ### 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 | 是 | 要滑动到的列表项在列表中的索引值。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md index ab13efc314..ce1f699284 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md @@ -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:() => void) | 播放时触发该事件。 | -| onPause(event:() => void) | 暂停时触发该事件。 | -| onFinish(event:() => void) | 播放结束时触发该事件。 | -| onError(event:() => void) | 播放失败时触发该事件。 | +| 名称 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | +| onStart(event:() => void) | 播放时触发该事件。 | +| onPause(event:() => void) | 暂停时触发该事件。 | +| onFinish(event:() => void) | 播放结束时触发该事件。 | +| onError(event:() => void) | 播放失败时触发该事件。 | | onPrepared(callback:(event?: { duration: number }) => void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。
- duration: 视频的时长。 | -| onSeeking(callback:(event?: { time: number }) => void) | 操作进度条过程时上报时间信息，单位为s。 | -| onSeeked(callback:(event?: { time: number }) => void) | 操作进度条完成后，上报播放时间信息，单位为s。 | -| onUpdate(callback:(event?: { time: number }) => void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 | +| onSeeking(callback:(event?: { time: number }) => void) | 操作进度条过程时上报时间信息，单位为s。 | +| onSeeked(callback:(event?: { time: number }) => void) | 操作进度条完成后，上报播放时间信息，单位为s。 | +| onUpdate(callback:(event?: { time: number }) => void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 | ## VideoController diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md index 022e2efe6d..a1e1d606f9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md @@ -1,17 +1,17 @@ # 路径动画 -> **说明：** -> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 设置组件进行位移动画时的运动路径。 +> **说明：** +> +> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
>  **说明：**
> path中支持通过start和end进行起点和终点的替代，如：
> 
> 'Mstart.x start.y L50 50 Lend.x end.y Z'。 | {
"",
0.0,
1.0,
false
} | 设置组件的运动路径，入参说明如下：
- path：位移动画的运动路径，使用svg路径字符串。
- from：运动路径的起点，默认为0.0。
- to：运动路径的终点，默认为1.0。
- rotatable：是否跟随路径进行旋转。 | +| 名称 | 参数类型 | 默认值 | 描述 | +| ---------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | +| motionPath | {
path: string,
from?: number,
to?: number,
rotatable?: boolean
}
**说明：**
path中支持通过start和end进行起点和终点的替代，如： 'Mstart.x start.y L50 50 Lend.x end.y Z'。 | {
"",
0.0,
1.0,
false
} | 设置组件的运动路径，入参说明如下：
- path：位移动画的运动路径，使用svg路径字符串。
- from：运动路径的起点，默认为0.0。
- to：运动路径的终点，默认为1.0。
- rotatable：是否跟随路径进行旋转。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md index cd049e3a2c..27d2a53cb1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md @@ -6,43 +6,43 @@ > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -| 名称 | 参数 | 参数描述 | -| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: Curve \| string,
delay?:number
} | 设置当前页面的自定义入场动效。
- type：不配置时表明pop为push时效果的逆播。
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，有效值参见[Curve](ts-animatorproperty.md) 。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | -| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: Curve \| string,
delay?: number
} | 设置当前页面的自定义退场动效。
- type：不配置时表明pop为push时效果的逆播
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，有效值参见[Curve](ts-animatorproperty.md) 。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | +| 名称 | 参数 | 参数描述 | +| ------------------- | ---------------------------------------- | ---------------------------------------- | +| PageTransitionEnter | {
type?: RouteType,
duration?: number,
curve?: Curve \| string,
delay?:number
} | 设置当前页面的自定义入场动效。
- type：不配置时表明pop为push时效果的逆播。
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，有效值参见[Curve](ts-appendix-enums.md#curve) 。
 默认值：Curve.Linear
- delay：动画延迟时长，单位为毫秒，默认不延迟播放。 | +| PageTransitionExit | {
type?: RouteType,
duration?: number,
curve?: Curve \| string,
delay?: number
} | 设置当前页面的自定义退场动效。
- type：不配置时表明pop为push时效果的逆播
- duration：动画的时长，单位为毫秒。
- curve：动画曲线，有效值参见[Curve](ts-appendix-enums.md#curve) 。
 默认值：Curve.Linear
- 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 | 否 | 设置页面转场时的滑入滑出效果。
默认值：SlideEffect.Right | -| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。
- x：横向的平移距离。
- y：纵向的平移距离。
- z：竖向的平移距离。 | -| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。
- x：横向放大倍数（或缩小比例）。
- y：纵向放大倍数（或缩小比例）。
- z：竖向放大倍数（或缩小比例）。
- centerX、centerY缩放中心点。
- 中心点为0时，默认的是组件的左上角。 | -| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。
默认值：1 | +| 参数名称 | 参数类型 | 必填 | 参数描述 | +| --------- | ---------------------------------------- | ---- | ---------------------------------------- | +| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。
默认值：SlideEffect.Right | +| translate | {
x? : number \| string,
y? : number \| string,
z? : number \| string
} | 否 | 设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。
- x：横向的平移距离。
- y：纵向的平移距离。
- z：竖向的平移距离。 | +| scale | {
x? : number,
y? : number,
z? : number,
centerX? : number \| string,
centerY? : number \| string
} | 否 | 设置页面转场时的缩放效果，为入场时起点和退场时终点的值。
- x：横向放大倍数（或缩小比例）。
- y：纵向放大倍数（或缩小比例）。
- z：竖向放大倍数（或缩小比例）。
- centerX、centerY缩放中心点。
- 中心点为0时，默认的是组件的左上角。 | +| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。
默认值：1 | ## SlideEffect枚举说明 -| 名称 | 描述 | -| -------- | -------- | -| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | -| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | -| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | +| 名称 | 描述 | +| ------ | ------------------------- | +| Left | 设置到入场时表示从左边滑入，出场时表示滑出到左边。 | +| Right | 设置到入场时表示从右边滑入，出场时表示滑出到右边。 | +| Top | 设置到入场时表示从上边滑入，出场时表示滑出到上边。 | | Bottom | 设置到入场时表示从下边滑入，出场时表示滑出到下边。 | ## 事件 -| 事件 | 功能描述 | -| -------- | -------- | +| 事件 | 功能描述 | +| ---------------------------------------- | ---------------------------------------- | | onEnter(event: (type: RouteType, progress: number) => void) | 回调入参为当前入场动画的归一化进度[0 - 1]。
- type：跳转方法。
- progress：当前进度。 | | onExit(event: (type: RouteType, progress: number) => void) | 回调入参为当前退场动画的归一化进度[0 - 1]。
- type：跳转方法。
- progress：当前进度。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index d08ba2205c..dfdb662cfc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -9,9 +9,9 @@ ## 属性 -| 名称 | 参数 | 参数描述 | -| -------- | -------- | -------- | -| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
-  id：设置组件的id。
-  duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | +| 名称 | 参数 | 参数描述 | +| ---------------- | ---------------------------------------- | ---------------------------------------- | +| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
-  id：设置组件的id。
-  duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-appendix-enums.md#curve) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | ## 示例 -- GitLab