diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif index 0a924f85501f74700c590b7d2d47c3ab3663c164..385f74880681c94b25c0fb8683fe78556ccd3de1 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif differ 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 023c44618a7f545d2667404b8928b6268667b637..902c9b5e14d91a8c470cc3810cf8280c0f02d659 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 @@ -85,7 +85,7 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation? | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | xOffset | number \| string | 是 | 水平滑动偏移。
**说明：**
该参数值不支持设置百分比。
仅滚动轴为x轴时生效。 | | yOffset | number \| string | 是 | 垂直滑动偏移。
**说明：**
该参数值不支持设置百分比。
仅滚动轴为y轴时生效。 | -| animation | {duration?: number, curve?: [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)10+ } \| boolean10+ | 否 | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。
- boolean: 使能默认弹簧动效。
默认值：
{
duration: 1000,
curve: Curve.Ease
}
boolean: false
**说明：**
设置为小于0的值时，按默认值显示。
当前仅List组件支持boolean类型和ICurve曲线。 | +| animation | {duration?: number, curve?: [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)10+ } \| boolean10+ | 否 | 动画配置：
- duration: 滚动时长设置。
- curve: 滚动曲线设置。
- boolean: 使能默认弹簧动效。
默认值：
{
duration: 1000,
curve: Curve.Ease
}
boolean: false
**说明：**
设置为小于0的值时，按默认值显示。
当前List、Scroll、Grid、WaterFlow均支持boolean类型和ICurve曲线。 | ### scrollEdge @@ -184,6 +184,8 @@ scrollBy(dx: Length, dy: Length): void ```ts // xxx.ets +import Curves from '@ohos.curves' + @Entry @Component struct ScrollExample { @@ -224,7 +226,7 @@ struct ScrollExample { Button('scroll 150') .height('5%') .onClick(() => { // 点击后下滑指定距离150.0vp - this.scroller.scrollBy(0,150) + this.scroller.scrollBy(0, 150) }) .margin({ top: 10, left: 20 }) Button('scroll 100') @@ -233,18 +235,25 @@ struct ScrollExample { this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) }) .margin({ top: 60, left: 20 }) + Button('scroll 100') + .height('5%') + .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离，滑动过程配置有动画 + let curve = Curves.interpolatingSpring(100, 1, 228, 30) //创建一个阶梯曲线 + this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100, animation: { duration: 1000, curve: curve }}) + }) + .margin({ top: 110, left: 20 }) Button('back top') .height('5%') .onClick(() => { // 点击后回到顶部 this.scroller.scrollEdge(Edge.Top) }) - .margin({ top: 110, left: 20 }) + .margin({ top: 160, left: 20 }) Button('next page') .height('5%') .onClick(() => { // 点击后滑到下一页 this.scroller.scrollPage({ next: true }) }) - .margin({ top: 170, left: 20 }) + .margin({ top: 210, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md index f3cdf5b0abe96bd4d045562f796f7a8d31028118..acd61622968079f481b7e07914cefd421e148b7b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md @@ -13,7 +13,6 @@ | 名称 | 参数类型 | 默认值 | 描述 | | -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | blur | number | - | 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, +∞)
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 | | backdropBlur | number | - | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
取值范围：[0, +∞)
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | shadow | [ShadowOptions](#shadowoptions对象说明) \| [ShadowStyle](#shadowstyle10枚举说明)10+ | - | 为当前组件添加阴影效果。
入参类型为ShadowOptions时，可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
入参类型为ShadowStyle时，可指定不同阴影样式。
从API version 9开始，该接口支持在ArkTS卡片中使用，ArkTS卡片上不支持参数为 [ShadowStyle](#shadowstyle10枚举说明)类型。 | | grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
取值范围：[0, 1]
**说明：**
设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | @@ -27,6 +26,7 @@ | sphericalEffect10+ | [number] | - | 设置组件的图像球面化程度。
取值范围：[0,1]。
**说明：**
1. 如果value等于0则图像保持原样，如果value等于1则图像为完全球面化效果。在0和1之间，数值越大，则球面化程度越高。
`value < 0 `或者` value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
2. 如果组件的图像使用异步加载，则不支持球面效果。例如Image组件默认使用异步加载，如果要使用球面效果，就要设置`syncLoad`为`true`，但是这种做法不推荐。`backgroundImage`也是使用异步加载，所以如果设置了`backgroundImage`，不支持球面效果。
3. 如果组件设置了阴影，不支持球面效果。
此接口为系统接口。 | | lightUpEffect10+ | [number] | - | 设置组件图像亮起程度。
取值范围：[0,1]。
如果value等于0则图像为全黑，如果value等于1则图像为全亮效果。0到1之间数值越大，表示图像亮度越高。`value < 0` 或者 `value > 1`为异常情况，`value < 0`按0处理，`value > 1`按1处理。
此接口为系统接口。| | pixelStretchEffect10+ | [PixelStretchEffectOptions](ts-types.md#PixelStretchEffectOptions) | - | 设置组件的图像边缘像素扩展距离。
参数`options`包括上下左右四个方向的边缘像素扩展距离。
**说明：**
1. 如果距离为正值，表示向外扩展，放大原来图像大小。上下左右四个方向分别用边缘像素填充，填充的距离即为设置的边缘扩展的距离。
2. 如果距离为负值，表示内缩，但是最终图像大小不变。
内缩方式：
图像根据`options`的设置缩小，缩小大小为四个方向边缘扩展距离的绝对值。
图像用边缘像素扩展到原来大小。
3. 对`options`的输入约束：
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩，方向一致。
所有方向的输入均为百分比或者具体值，不支持百分比和具体值混用。
所有异常情况下，显示为{0，0，0，0}效果，即跟原图保持一致。
此接口为系统接口。 | +| linearGradientBlur10+ |
value: number,
{
fractionStops:Array,
direction:[GradientDirection](ts-appendix-enums.md#gradientdirection)
}
| - | 为当前组件添加内容线性渐变模糊效果，
-value为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0, +∞)
线性梯度模糊包含两个部分fractionStops和direction
-fractionStops数组中保存的每一个二元数组（取值0-1，小于0则为0，大于0则为1）表示[模糊程度, 模糊位置]；模糊位置需严格递增，开发者传入的数据不符合规范会记录日志，渐变模糊数组中二元数组个数必须大于等于2，否则渐变模糊不生效
-direction为渐变模糊方向，默认值为[GradientDirection](ts-appendix-enums.md#gradientdirection).Bottom
从API version 10开始，该接口支持在ArkTS卡片中使用。 | ## ShadowOptions对象说明 @@ -348,4 +348,4 @@ struct ImageExample1 { ``` -![testlinearGradientBlur](figures/testlinearGradientBlur.png) \ No newline at end of file +![testlinearGradientBlur](figures/testlinearGradientBlur.png)