diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md index 057e4fc2facf40ec489a1ee46a75d18e5b8b0ef5..6ee070f0cd6c91f194edd4be8f85dcf797e6d135 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md @@ -1,19 +1,24 @@ # 属性动画 -组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 +组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提升用户体验。支持的属性包括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毫秒。
默认值：1000 | +| tempo | number | 否 | 动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢
值为0时，表示不存在动画。
默认值：1 | +| curve | string \| [Curve](ts-appendix-enums.md#curve) | 否 | 设置动画曲线。默认曲线为线性。
默认值：Curve.Linear | +| delay | number | 否 | 设置动画延迟执行的时长。单位为毫秒，默认不延时播放。
默认值：0 | +| iterations | number | 否 | 设置播放次数。默认播放一次，设置为-1时表示无限次播放。
默认值：1 | +| playMode | [PlayMode](ts-appendix-enums.md#playmode) | 否 | 设置动画播放模式，默认播放完成后重头开始播放。
默认值：PlayMode.Normal | +| onFinish | () => void | 否 | 状态回调，动画播放完成时触发。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index 62db1a023a01f369b6fa4d4421aecda83a79f840..90fae39f3117d042d1943eb5044f6ee3924fcab5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -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 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index fec0766922fbca69af801de208b2a01c04aa552f..091fe67c47dc8617c31a9406cb7c628c30107ded 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -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 | 设置图片的重复样式。
>  **说明：**
> - svg类型图源不支持该属性。 | | interpolation | ImageInterpolation | None | 设置图片的插值效果，即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值。
>  **说明：**
> - svg类型图源不支持该属性。
> - PixelMap资源不支持该属性。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md index 88fb2c94bdba399fc29831c0c363c319345a9336..de5b17d9d6b41b464732405489da5c67d5c43490 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -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}) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index bc8b235a2821773e0a16e7f1e9c924f9ddedf5d9..756f1d9e0fbac50724aeecf2c8f916b939327939 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -14,9 +14,9 @@ | 名称 | 参数类型 | 默认值 | 描述 | | -------- | -------- | -------- | -------- | -| linearGradient | {
angle?: number\|string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<Color>
, repeating?: boolean
} | - | 线性渐变。
angle: 线性渐变的角度。
direction: 线性渐变的方向，设置angle后不生效。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | -| sweepGradient | {
center: Point,
start?: number\|string,
end?: number\|string,rotation?: number\|string,
colors: Array<Color>
, repeating?: boolean
} | - | 角度渐变。
center：为角度渐变的中心点。
start：角度渐变的起点。
end：角度渐变的终点。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | -| radialGradient | {
center: Point,
radius: number\|string,
colors: Array<Color>
, repeating: boolean
} | - | 径向渐变。
center：径向渐变的中心点。
radius：径向渐变的半径。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | +| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | 线性渐变。
angle: 线性渐变的角度。
direction: 线性渐变的方向，设置angle后不生效。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | +| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | 角度渐变。
center：为角度渐变的中心点。
start：角度渐变的起点。
end：角度渐变的终点。
rotation: 角度渐变的旋转角度。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | +| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | 径向渐变。
center：径向渐变的中心点。
radius：径向渐变的半径。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | ## 示例 diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md index e32f4b0b2c140bd70006b4e0fdb2879812fadcfc..d0d7e2da3af574862b38f24dab6ea874f65239da 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md @@ -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列上。 ## 场景示例 使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。