Skip to content

D
Docs

Coping0606 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 4fb6266c 编写于 作者: L luoying_ace_admin
浏览文件
操作

fix doc 

Signed-off-by: Nluoying_ace_admin <luoying19@huawei.com>
上级 0a08c5e5
隐藏空白更改
内联 并排
Showing with 26 addition and 21 deletion
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @ 4fb6266c
# 属性动画
组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。
组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
animation(value: {duration?: number, tempo?: number, curve?: string | Curve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration | number | 1000 | 单位为毫秒，默认动画时长为1000毫秒。 |
| curve | [Curve](ts-appendix-enums.md#curve) | Curve.Linear | 默认曲线为线性。 |
| delay | number | 0 | 单位为毫秒，默认不延时播放。 |
| iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
**参数：**
| 名称 | 参数类型 | 必填 | 描述 |
| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| duration | number | 否 | 设置动画时长。单位为毫秒，默认动画时长为1000毫秒。<br/>默认值：1000 |
| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢<br/>值为0时，表示不存在动画。<br/>默认值：1 |
| curve | string&nbsp;\|&nbsp;[Curve](ts-appendix-enums.md#curve) | 否 | 设置动画曲线。默认曲线为线性。<br/>默认值：Curve.Linear |
| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。<br/>默认值：0 |
| iterations | number | 否 | 设置播放次数。默认播放一次，设置为-1时表示无限次播放。<br/>默认值：1 |
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 否 | 设置动画播放模式，默认播放完成后重头开始播放。<br/>默认值：PlayMode.Normal |
| onFinish | () => void | 否 | 状态回调，动画播放完成时触发。 |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
浏览文件 @ 4fb6266c
......@@ -103,10 +103,10 @@
| 名称 | 描述 |
| --------- | -------------------------------------------------------- |
| None | 播放完成后恢复初始状态。 |
| Forwards | 播放完成后保持动画结束时的状态。 |
| Backwards | 在显示动画之前，为动画延迟指定的时间段应用“开始”属性值。 |
| Both | 应用正向和反向填充模式。 |
| None | 动画未执行时不会将任何样式应用于目标，动画播放完成之后恢复初始默认状态。 |
| Forwards | 目标将保留动画执行期间最后一个关键帧的状态。 |
| Backwards | 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在delay期间保留此值。第一个关键帧取决于playMode，playMode为Normal或Alternate时为from的状态，playMode为Reverse或AlternateReverse时为to的状态。 |
| Both | 动画将遵循Forwards和Backwards的规则，从而在两个方向上扩展动画属性。 |
## PlayMode
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 4fb6266c
......@@ -29,7 +29,7 @@ Image(src: string | PixelMap | Resource)
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](ts-types.md#resource) | - | 加载时显示的占位图。支持本地图片和网络路径。 |
| alt | string \| [Resource](ts-types.md#resource) | - | 加载时显示的占位图。仅支持本地图片。 |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置图片的缩放类型。 |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 4fb6266c
......@@ -27,7 +27,7 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ---- | --------------------- |
| start | boolean | 是 | - | 控制是否进入播放状态。 |
| step | number | 否 | 6 | 滚动动画文本滚动步长。 |
| step | number | 否 | 6 | 滚动动画文本滚动步长，单位vp。 |
| loop | number | 否 | -1 | 设置重复滚动的次数，小于等于零时无限循环。 |
| fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 |
| src | string | 是 | - | 需要滚动的文本。 |
......@@ -89,7 +89,7 @@ struct MarqueeExample {
Button('start')
.onClick(() => {
this.start = true
})
})
.width(200)
.height(60)
.margin({bottom:20})
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ 4fb6266c
......@@ -14,9 +14,9 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?:&nbsp;number\|string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;Color&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point, <br/>start?:&nbsp;number\|string,<br/>end?:&nbsp;number\|string,rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;Color&gt;<br/>, repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center：为角度渐变的中心点。<br/>start：角度渐变的起点。<br/>end：角度渐变的终点。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;Color&gt;<br/>, repeating:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center：径向渐变的中心点。<br/>radius：径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center：为角度渐变的中心点。<br/>start：角度渐变的起点。<br/>end：角度渐变的终点。<br/>rotation:&nbsp;角度渐变的旋转角度。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center：径向渐变的中心点。<br/>radius：径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
## 示例
......
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @ 4fb6266c
......@@ -71,7 +71,7 @@
Text('1')
.useSizeType({
xs: { span: 2},
sm: { span: 3, offset: 1 },
sm: { span: 3, offset: 0 },
md: { span: 6, offset: 2 },
lg: { span: 8, offset: 2 },
})
......@@ -91,14 +91,14 @@ GridContainer() {
Text('1')
.useSizeType({
xs: { span: 2},
sm: { span: 3, offset: 1 },
sm: { span: 2, offset: 0 },
md: { span: 6, offset: 2 },
lg: { span: 8, offset: 2 },
})
}
}
```
其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用2列，且放在栅格容器的第1列上。
## 场景示例
使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或