未验证 提交 9a9e637f 编写于 作者: O openharmony_ci 提交者: Gitee

!16478 组件规格同步2

Merge pull request !16478 from 田雨/master
......@@ -14,13 +14,13 @@ animation(value: {duration?: number, tempo?: number, curve?: string | Curve | IC
| 名称 | 参数类型 | 必填 | 描述 |
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
| duration | number | 否 | 设置动画时长。单位为毫秒,默认动画时长为1000毫秒。<br/>默认值:1000<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>- 在ArkTS卡片上最大动画持续时间为1000毫秒,若超出则固定为1000毫秒。 |
| tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢<br/>值为0时,表示不存在动画。<br/>默认值:1 |
| duration | number | 否 | 设置动画时长。<br/>默认值:1000<br/>单位:毫秒<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:**<br/>- 在ArkTS卡片上最大动画持续时间为1000毫秒。<br/>-&nbsp;设置小于1的值时按0处理。<br>-&nbsp;设置浮点型类型的值时,向下取整;设置值为1.2,按照1处理。 |
| tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢<br/>值为0时,表示不存在动画。<br/>默认值:1<br/>**说明:** <br/>当设置小于1的值时按值为1处理。 |
| curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;ICurve<sup>9+</sup> | 否 | 设置动画曲线。默认曲线为线性。<br/>默认值:Curve.Linear<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒,默认不延时播放。<br/>默认值:0 |
| iterations | number | 否 | 设置播放次数。默认播放一次,设置为-1时表示无限次播放。<br/>默认值:1 |
| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒,默认不延时播放。<br/>默认值:0<br/>取值范围:[0, +∞)<br/>**说明:** <br/>当设置的值小于1时按0处理。设置浮点型类型的值时,向下取整。例如,设置值为1.2,按照1处理。 |
| iterations | number | 否 | 设置播放次数。<br/>默认值:1<br/>取值范围:[-1, +∞)<br/>**说明:** <br/>设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 否 | 设置动画播放模式,默认播放完成后重头开始播放。<br/>默认值:PlayMode.Normal<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onFinish | () => void | 否 | 状态回调,动画播放完成时触发。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onFinish | () => void | 否 | 状态回调,动画播放完成时触发。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>当iterations设置为-1时,动画效果无限循环不会停止,所以不会触发此回调。 |
## 示例
......
......@@ -237,8 +237,8 @@
| 名称 | 描述 |
| ------ | -------------------------------------------------- |
| All | 指定当前的Transition动效生效在组件的所有变化场景。 |
| Insert | 指定当前的Transition动效生效在组件的插入场景。 |
| Delete | 指定当前的Transition动效生效在组件的删除场景。 |
| Insert | 指定当前的Transition动效生效在组件的插入显示场景。 |
| Delete | 指定当前的Transition动效生效在组件的删除隐藏场景。 |
## RelateType
......@@ -520,30 +520,30 @@
该接口支持在ArkTS卡片中使用。
| 名称 | 描述 |
| ------- | ---------- |
| Thin | 轻薄材质模糊。 |
| Regular | 普通厚度材质模糊。 |
| Thick | 厚材质模糊。 |
| BackgroundThin | 近距景深模糊。 |
| BackgroundRegular | 中距景深模糊。 |
| BackgroundThick | 远距景深模糊。 |
| BackgroundUltraThick | 超远距景深模糊。 |
| 名称 | 描述 |
| ------- | ---------- |
| Thin | 轻薄材质模糊。 |
| Regular | 普通厚度材质模糊。 |
| Thick | 厚材质模糊。 |
| BackgroundThin | 近距景深模糊。 |
| BackgroundRegular | 中距景深模糊。 |
| BackgroundThick | 远距景深模糊。 |
| BackgroundUltraThick | 超远距景深模糊。 |
## ThemeColorMode<sup>10+</sup>
| 名称 | 描述 |
| ------- | ---------- |
| System | 跟随系统深浅色模式。 |
| Light | 固定使用浅色模式。 |
| Dark | 固定使用深色模式。 |
| 名称 | 描述 |
| ------- | ---------- |
| System | 跟随系统深浅色模式。 |
| Light | 固定使用浅色模式。 |
| Dark | 固定使用深色模式。 |
## AdaptiveColor<sup>10+</sup>
| 名称 | 描述 |
| ------- | ----------- |
| Default | 不使用取色模糊。使用默认的颜色作为蒙版颜色。 |
| Average | 使用取色模糊。将取色区域的颜色平均值作为蒙版颜色。 |
| 名称 | 描述 |
| ------- | ----------- |
| Default | 不使用取色模糊。使用默认的颜色作为蒙版颜色。 |
| Average | 使用取色模糊。将取色区域的颜色平均值作为蒙版颜色。 |
## TextHeightAdaptivePolicy<sup>10+</sup>
......
......@@ -17,7 +17,7 @@ PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: numb
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| fingers | number | 否 | 触发拖动的最少手指数,最小为1指,&nbsp;最大取值为10指。<br/>默认值:1 |
| fingers | number | 否 | 触发拖动的最少手指数,最小为1指,&nbsp;最大取值为10指。<br/>默认值:1<br/>取值范围:[1,10]<br/>**说明:** <br/>当设置的值小于1或不设置时,会被转化为默认值。 |
| direction | PanDirection | 否 | 触发拖动的手势方向,此枚举值支持逻辑与(&amp;)和逻辑或(\|)运算。<br/>默认值:PanDirection.All |
| distance | number | 否 | 最小拖动识别距离,单位为vp。<br/>默认值:5<br/>**说明:**<br/>[Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时,可将distance值设为1,使拖动更灵敏,避免造成事件错乱。 |
......
# TapGesture
支持单次或多次点击识别。
支持单击、双击和多次点击事件的识别。
> **说明:**
>
......@@ -15,8 +15,8 @@ TapGesture(value?: { count?: number, fingers?: number })
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| count | number | 否 | 识别的连续点击次数。如果设置小于1,会被转化为默认值。<br/>默认值:1<br/>**说明:**<br/>如配置多击,上一次抬起和下一次按下的超时时间为300毫秒。 |
| fingers | number | 否 | 触发点击的手指数,最小为1指,&nbsp;最大为10指。<br/>默认值:1<br/>**说明:**<br/>1. 当配置多指时,第一根手指按下后300毫秒内未有足够的手指数按下,手势识别失败。<br/>2. 实际点击手指数超过配置值,手势识别失败。 |
| count | number | 否 | 识别的连续点击次数。当设置的值小于1或不设置时,会被转化为默认值。<br/>默认值:1<br/>**说明:**<br/>如配置多击,上一次抬起和下一次按下的超时时间为300毫秒。 |
| fingers | number | 否 | 触发点击的手指数,最小为1指,&nbsp;最大为10指。当设置小于1的值或不设置时,会被转化为默认值。<br/>默认值:1<br/>**说明:**<br/>1. 当配置多指时,第一根手指按下后300毫秒内未有足够的手指数按下,手势识别失败。<br/>2. 实际点击手指数超过配置值,手势识别失败。 |
## 事件
......
......@@ -11,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',更多说明请参考[绘制路径](../../ui/ui-js-components-svg-path.md)。 | {<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',更多说明请参考[绘制路径](../../ui/ui-js-components-svg-path.md)。 | {<br/>'',<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径,入参说明如下:<br/>-&nbsp;path:位移动画的运动路径,使用svg路径字符串。<br/>-&nbsp;from:运动路径的起点<br/>默认值:0.0<br/>取值范围:[0, 1]<br/>设置小于0的值时,按值为0处理。设置大于1的值时,按值为1处理。<br/>-&nbsp;to:运动路径的终点。<br/>默认值:1.0<br/>取值范围:[0, 1]<br/>设置小于0的值时,按值为0处理。设置大于1的值时,按值为1处理<br/>-&nbsp;rotatable:是否跟随路径进行旋转。 |
## 示例
......
# 页面间转场
在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。
当路由进行切换时,可以通过 在pageTransition中自定义页面入场和页面退场的转场动效。
> **说明:**
>
......@@ -10,8 +10,8 @@
| 名称 | 参数 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| PageTransitionEnter | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;string,<br>delay?: number<br/>} | 设置当前页面的自定义入场动效。<br/>-&nbsp;type:页面转场效果生效的路由类型。<br/>默认值:RouteType.None。<br/>**说明:** 没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。<br/>默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| PageTransitionExit | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;string,<br/>delay?: number<br/>} | 设置当前页面的自定义退场动效。<br/>-&nbsp;type:页面转场效果生效的路由类型。<br/>默认值:RouteType.None。<br/>**说明:** 没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,string类型取值与PageTransitionEnter相同。<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| PageTransitionEnter | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;string,<br>delay?: number<br/>} | 设置当前页面的自定义入场动效。<br/>-&nbsp;type:页面转场效果生效的路由类型。<br/>默认值:RouteType.None。<br/>**说明:** <br/>没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。<br/>-&nbsp;duration:动画的时长<br/>单位:毫秒<br/>-&nbsp;curve:动画曲线。string类型的取值支持"ease"、"ease-in"、"ease-out"、"ease-in-out"、"extreme-deceleration"、"fast-out-linear-in"、"fast-out-slow-in"、"friction"、"linear"、"linear-out-slow-in"、"rhythm"、"sharp"、"smooth"。<br/>默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长。<br/>默认值:0<br/>单位:毫秒 |
| PageTransitionExit | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: [Curve](ts-appendix-enums.md#curve)&nbsp;\|&nbsp;string,<br/>delay?: number<br/>} | 设置当前页面的自定义退场动效。<br/>-&nbsp;type:页面转场效果生效的路由类型。<br/>默认值:RouteType.None。<br/>**说明:** <br/>没有匹配时使用系统默认的页面转场效果(根据设备可能会有差异),如需禁用系统默认页面转场效果,可以指定duration为0。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,string类型取值与PageTransitionEnter相同。<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长。<br/>默认值:0<br/>单位:毫秒 |
## RouteType枚举说明
......@@ -45,8 +45,8 @@
| 事件 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 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:当前进度。 |
| onEnter(event: (type?:&nbsp;RouteType,&nbsp;progress?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。<br/>触发该事件的条件:<br/>逐帧回调,直到入场动画结束,progress从0变化到1。 |
| onExit(event: (type?:&nbsp;RouteType,&nbsp;progress?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。<br/>触发该事件的条件:<br/>逐帧回调,直到退场动画结束,progress从0变化到1。 |
## 示例
......
......@@ -12,14 +12,14 @@
| 名称 | 参数类型 | 参数描述 |
| -------- | -------- | -------- |
| transition | TransitionOptions | 所有参数均为可选参数,详细描述见TransitionOptions参数说明。 |
| transition | TransitionOptions | 设置组件插入显示和删除隐藏的过渡效果。<br/>默认值:不设置任何过渡效果时,默认有透明度从0到1的过渡效果。若设置了其他过渡效果,以设置的过渡效果为准。<br/>**说明:** <br/>所有参数均为可选参数,详细描述见TransitionOptions参数说明。 |
## TransitionOptions参数说明
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 默认包括组件新增和删除。<br/>默认值:TransitionType.All<br/>**说明:**<br/>不指定Type时说明插入删除使用同一种效果。 |
| opacity | number | 否 | 设置组件转场时的透明度效果,为插入时起点和删除时终点的值。<br/>默认值:1 |
| opacity | number | 否 | 设置组件转场时的透明度效果,为插入时起点和删除时终点的值。<br/>默认值:1<br/>取值范围: [0, 1]<br/>**说明:** <br/>设置小于0的值时,按值为0处理;设置大于1的值时,按值为1处理。 |
| 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/>} | 否 | 设置组件转场时的平移效果,为插入时起点和删除时终点的值。<br/>-x:横向的平移距离。<br/>-y:纵向的平移距离。<br/>-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/>-x:横向放大倍数(或缩小比例)。<br/>-y:纵向放大倍数(或缩小比例)。<br/>-z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY指缩放中心点,centerX和centerY默认值是"50%"。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。<br/> |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerX?:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置组件转场时的旋转效果,为插入时起点和删除时终点的值。<br/>-x:横向的旋转向量。<br/>-y:纵向的旋转向量。<br/>-z:竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点,centerX和centerY默认值是"50%"。<br/>-&nbsp;中心点为(0,0)时,默认的是组件的左上角。 |
......
# 共享元素转场
设置页面间转场时共享元素的转场动效。
当路由进行切换时,可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。
> **说明:**
>
......@@ -12,7 +12,7 @@
| 名称 | 参数 | 参数描述 |
| ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| sharedTransition | id:&nbsp;string,<br/>{<br/>&nbsp;duration?: number,<br/>&nbsp;curve?: Curve&nbsp;\|&nbsp;string,<br/>&nbsp;delay?: number,<br/>&nbsp;motionPath?: <br/>{<br/>&nbsp;path: string,<br/>&nbsp;form?: number,<br/>&nbsp;to?: number,<br/>&nbsp;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)说明。<br/>-&nbsp;delay:单位为毫秒,默认不延时播放<br/>-&nbsp;motionPath:运动路径信息,详细说明请参考[路径动画](ts-motion-path-animation.md)。<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/>&nbsp;duration?: number,<br/>&nbsp;curve?: Curve&nbsp;\|&nbsp;string,<br/>&nbsp;delay?: number,<br/>&nbsp;motionPath?: <br/>{<br/>&nbsp;path: string,<br/>&nbsp;form?: number,<br/>&nbsp;to?: number,<br/>&nbsp;rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。<br/>-&nbsp;id:设置组件的id。<br/>-&nbsp;duration:描述共享元素转场动效播放时长。<br/>默认值:1000<br/>单位:毫秒<br/>取值范围:[0, +∞)<br/>值为0时表示无动画。设置小于0的值时,按值为0处理。<br/>-&nbsp;curve:默认曲线为Linear,有效值参见[Curve](ts-animatorproperty.md)说明。<br/>-&nbsp;delay:用来描述共享元素转场动效延迟播放的时长。<br/>默认值:0<br/>单位:毫秒<br/>取值范围:[0, +∞)<br/>设置小于0的值时,按值为0处理。<br/>-&nbsp;motionPath:运动路径信息,详细说明请参考[路径动画](ts-motion-path-animation.md)<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.
先完成此消息的编辑!
想要评论请 注册