Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
7e56be0a
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
7e56be0a
编写于
7月 11, 2023
作者:
L
luoying_ace_admin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add docs
Signed-off-by:
N
luoying_ace_admin
<
luoying19@huawei.com
>
上级
26bcb584
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
15 addition
and
6 deletion
+15
-6
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif
...ference/arkui-ts/figures/zh-cn_image_0000001174104386.gif
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
...application-dev/reference/arkui-ts/ts-container-scroll.md
+13
-4
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
...eference/arkui-ts/ts-universal-attributes-image-effect.md
+2
-2
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174104386.gif
查看替换文件 @
26bcb584
浏览文件 @
7e56be0a
88.8 KB
|
W:
|
H:
314.9 KB
|
W:
|
H:
2-up
Swipe
Onion skin
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @
7e56be0a
...
@@ -85,7 +85,7 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
...
@@ -85,7 +85,7 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| xOffset | number
\|
string | 是 | 水平滑动偏移。
<br/>
**说明:**
<br/>
该参数值不支持设置百分比。
<br/>
仅滚动轴为x轴时生效。 |
| xOffset | number
\|
string | 是 | 水平滑动偏移。
<br/>
**说明:**
<br/>
该参数值不支持设置百分比。
<br/>
仅滚动轴为x轴时生效。 |
| yOffset | number
\|
string | 是 | 垂直滑动偏移。
<br/>
**说明:**
<br/>
该参数值不支持设置百分比。
<br/>
仅滚动轴为y轴时生效。 |
| yOffset | number
\|
string | 是 | 垂直滑动偏移。
<br/>
**说明:**
<br/>
该参数值不支持设置百分比。
<br/>
仅滚动轴为y轴时生效。 |
| animation | {duration?:
number, curve?:
[Curve](ts-appendix-enums.md#curve)
\|
[
ICurve
](
../apis/js-apis-curve.md#icurve
)
<sup>
10+
</sup>
}
\|
boolean
<sup>
10+
</sup>
| 否 | 动画配置:
<br/>
-
duration:
滚动时长设置。
<br/>
-
curve:
滚动曲线设置。
<br/>
- boolean:
使能默认弹簧动效。
<br/>
默认值:
<br/>
{
<br/>
duration:
1000,
<br/>
curve:
Curve.Ease
<br/>
}
<br/>
boolean:
false
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。
<br/>
当前
仅List组件
支持boolean类型和ICurve曲线。 |
| animation | {duration?:
number, curve?:
[Curve](ts-appendix-enums.md#curve)
\|
[
ICurve
](
../apis/js-apis-curve.md#icurve
)
<sup>
10+
</sup>
}
\|
boolean
<sup>
10+
</sup>
| 否 | 动画配置:
<br/>
-
duration:
滚动时长设置。
<br/>
-
curve:
滚动曲线设置。
<br/>
- boolean:
使能默认弹簧动效。
<br/>
默认值:
<br/>
{
<br/>
duration:
1000,
<br/>
curve:
Curve.Ease
<br/>
}
<br/>
boolean:
false
<br/>
**说明:**
<br/>
设置为小于0的值时,按默认值显示。
<br/>
当前
List、Scroll、Grid、WaterFlow均
支持boolean类型和ICurve曲线。 |
### scrollEdge
### scrollEdge
...
@@ -184,6 +184,8 @@ scrollBy(dx: Length, dy: Length): void
...
@@ -184,6 +184,8 @@ scrollBy(dx: Length, dy: Length): void
```
ts
```
ts
// xxx.ets
// xxx.ets
import
Curves
from
'
@ohos.curves
'
@
Entry
@
Entry
@
Component
@
Component
struct
ScrollExample
{
struct
ScrollExample
{
...
@@ -224,7 +226,7 @@ struct ScrollExample {
...
@@ -224,7 +226,7 @@ struct ScrollExample {
Button
(
'
scroll 150
'
)
Button
(
'
scroll 150
'
)
.
height
(
'
5%
'
)
.
height
(
'
5%
'
)
.
onClick
(()
=>
{
// 点击后下滑指定距离150.0vp
.
onClick
(()
=>
{
// 点击后下滑指定距离150.0vp
this
.
scroller
.
scrollBy
(
0
,
150
)
this
.
scroller
.
scrollBy
(
0
,
150
)
})
})
.
margin
({
top
:
10
,
left
:
20
})
.
margin
({
top
:
10
,
left
:
20
})
Button
(
'
scroll 100
'
)
Button
(
'
scroll 100
'
)
...
@@ -233,18 +235,25 @@ struct ScrollExample {
...
@@ -233,18 +235,25 @@ struct ScrollExample {
this
.
scroller
.
scrollTo
({
xOffset
:
0
,
yOffset
:
this
.
scroller
.
currentOffset
().
yOffset
+
100
})
this
.
scroller
.
scrollTo
({
xOffset
:
0
,
yOffset
:
this
.
scroller
.
currentOffset
().
yOffset
+
100
})
})
})
.
margin
({
top
:
60
,
left
:
20
})
.
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
'
)
Button
(
'
back top
'
)
.
height
(
'
5%
'
)
.
height
(
'
5%
'
)
.
onClick
(()
=>
{
// 点击后回到顶部
.
onClick
(()
=>
{
// 点击后回到顶部
this
.
scroller
.
scrollEdge
(
Edge
.
Top
)
this
.
scroller
.
scrollEdge
(
Edge
.
Top
)
})
})
.
margin
({
top
:
1
1
0
,
left
:
20
})
.
margin
({
top
:
1
6
0
,
left
:
20
})
Button
(
'
next page
'
)
Button
(
'
next page
'
)
.
height
(
'
5%
'
)
.
height
(
'
5%
'
)
.
onClick
(()
=>
{
// 点击后滑到下一页
.
onClick
(()
=>
{
// 点击后滑到下一页
this
.
scroller
.
scrollPage
({
next
:
true
})
this
.
scroller
.
scrollPage
({
next
:
true
})
})
})
.
margin
({
top
:
17
0
,
left
:
20
})
.
margin
({
top
:
21
0
,
left
:
20
})
}.
width
(
'
100%
'
).
height
(
'
100%
'
).
backgroundColor
(
0xDCDCDC
)
}.
width
(
'
100%
'
).
height
(
'
100%
'
).
backgroundColor
(
0xDCDCDC
)
}
}
}
}
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @
7e56be0a
...
@@ -13,7 +13,6 @@
...
@@ -13,7 +13,6 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。
<br/>
取值范围:
[
0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| blur | number | - | 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。
<br/>
取值范围:
[
0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| linearGradientBlur<sup>10+</sup> | <br/>value: number,<br/>{<br/>fractionStops:Array<FractionStop>,<br/>direction:[GradientDirection
](
ts-appendix-enums.md#gradientdirection
)
<br/>
}
<br/>
| - | 为当前组件添加内容线性渐变模糊效果,
<br/>
-value为模糊半径,模糊半径越大越模糊,为0时不模糊。取值范围:
[
0, +∞)<br/>线性梯度模糊包含两个部分fractionStops和direction<br/>-fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊数组中二元数组个数必须大于等于2,否则渐变模糊不生效 <br/> -direction为渐变模糊方向,默认值为[GradientDirection
](
ts-appendix-enums.md#gradientdirection
)
.Bottom
<br/>
从API version 10开始,该接口支持在ArkTS卡片中使用。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| backdropBlur | number | - | 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。<br/>取值范围:[0, +∞)<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| shadow | [ShadowOptions
](
#shadowoptions对象说明
)
\|
[
ShadowStyle
](
#shadowstyle10枚举说明
)
<sup>
10+
</sup>
| - | 为当前组件添加阴影效果。
<br/>
入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
<br/>
入参类型为ShadowStyle时,可指定不同阴影样式。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为
[
ShadowStyle
](
#shadowstyle10枚举说明
)
类型。 |
| shadow | [ShadowOptions
](
#shadowoptions对象说明
)
\|
[
ShadowStyle
](
#shadowstyle10枚举说明
)
<sup>
10+
</sup>
| - | 为当前组件添加阴影效果。
<br/>
入参类型为ShadowOptions时,可以指定模糊半径、阴影的颜色、X轴和Y轴的偏移量。
<br/>
入参类型为ShadowStyle时,可指定不同阴影样式。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用,ArkTS卡片上不支持参数为
[
ShadowStyle
](
#shadowstyle10枚举说明
)
类型。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)
<br/>
取值范围:[0, 1]
<br/>
**说明:**
<br/>
设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| grayscale | number | 0.0 | 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)
<br/>
取值范围:[0, 1]
<br/>
**说明:**
<br/>
设置小于0的值时,按值为0处理,设置大于1的值时,按值为1处理。
<br/>
从API version 9开始,该接口支持在ArkTS卡片中使用。 |
...
@@ -27,6 +26,7 @@
...
@@ -27,6 +26,7 @@
| sphericalEffect
<sup>
10+
</sup>
| [number] | - | 设置组件的图像球面化程度。
<br/>
取值范围:[0,1]。
<br/>
**说明:**
<br/>
1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。
<br/>
`value < 0 `
或者
` value > 1`
为异常情况,
`value < 0`
按0处理,
`value > 1`
按1处理。
<br/>
2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置
`syncLoad`
为
`true`
,但是这种做法不推荐。
`backgroundImage`
也是使用异步加载,所以如果设置了
`backgroundImage`
,不支持球面效果。
<br/>
3. 如果组件设置了阴影,不支持球面效果。
<br>
此接口为系统接口。 |
| sphericalEffect
<sup>
10+
</sup>
| [number] | - | 设置组件的图像球面化程度。
<br/>
取值范围:[0,1]。
<br/>
**说明:**
<br/>
1. 如果value等于0则图像保持原样,如果value等于1则图像为完全球面化效果。在0和1之间,数值越大,则球面化程度越高。
<br/>
`value < 0 `
或者
` value > 1`
为异常情况,
`value < 0`
按0处理,
`value > 1`
按1处理。
<br/>
2. 如果组件的图像使用异步加载,则不支持球面效果。例如Image组件默认使用异步加载,如果要使用球面效果,就要设置
`syncLoad`
为
`true`
,但是这种做法不推荐。
`backgroundImage`
也是使用异步加载,所以如果设置了
`backgroundImage`
,不支持球面效果。
<br/>
3. 如果组件设置了阴影,不支持球面效果。
<br>
此接口为系统接口。 |
| lightUpEffect
<sup>
10+
</sup>
| [number] | - | 设置组件图像亮起程度。
<br/>
取值范围:[0,1]。
<br/>
如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。
`value < 0`
或者
`value > 1`
为异常情况,
`value < 0`
按0处理,
`value > 1`
按1处理。
<br>
此接口为系统接口。|
| lightUpEffect
<sup>
10+
</sup>
| [number] | - | 设置组件图像亮起程度。
<br/>
取值范围:[0,1]。
<br/>
如果value等于0则图像为全黑,如果value等于1则图像为全亮效果。0到1之间数值越大,表示图像亮度越高。
`value < 0`
或者
`value > 1`
为异常情况,
`value < 0`
按0处理,
`value > 1`
按1处理。
<br>
此接口为系统接口。|
| pixelStretchEffect
<sup>
10+
</sup>
|
[
PixelStretchEffectOptions
](
ts-types.md#PixelStretchEffectOptions
)
| - | 设置组件的图像边缘像素扩展距离。
<br/>
参数
`options`
包括上下左右四个方向的边缘像素扩展距离。
<br/>
**说明:**
<br/>
1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。
<br/>
2. 如果距离为负值,表示内缩,但是最终图像大小不变。
<br/>
内缩方式:
<br/>
图像根据
`options`
的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。
<br/>
图像用边缘像素扩展到原来大小。
<br/>
3. 对
`options`
的输入约束:
<br/>
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。
<br/>
所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。
<br/>
所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。
<br>
此接口为系统接口。 |
| pixelStretchEffect
<sup>
10+
</sup>
|
[
PixelStretchEffectOptions
](
ts-types.md#PixelStretchEffectOptions
)
| - | 设置组件的图像边缘像素扩展距离。
<br/>
参数
`options`
包括上下左右四个方向的边缘像素扩展距离。
<br/>
**说明:**
<br/>
1. 如果距离为正值,表示向外扩展,放大原来图像大小。上下左右四个方向分别用边缘像素填充,填充的距离即为设置的边缘扩展的距离。
<br/>
2. 如果距离为负值,表示内缩,但是最终图像大小不变。
<br/>
内缩方式:
<br/>
图像根据
`options`
的设置缩小,缩小大小为四个方向边缘扩展距离的绝对值。
<br/>
图像用边缘像素扩展到原来大小。
<br/>
3. 对
`options`
的输入约束:
<br/>
上下左右四个方向的扩展统一为非正值或者非负值。即四个边同时向外扩或者内缩,方向一致。
<br/>
所有方向的输入均为百分比或者具体值,不支持百分比和具体值混用。
<br/>
所有异常情况下,显示为{0,0,0,0}效果,即跟原图保持一致。
<br>
此接口为系统接口。 |
| linearGradientBlur
<sup>
10+
</sup>
|
<br/>
value: number,
<br/>
{
<br/>
fractionStops:Array
<FractionStop>
,
<br/>
direction:
[
GradientDirection
](
ts-appendix-enums.md#gradientdirection
)
<br/>
}
<br/>
| - | 为当前组件添加内容线性渐变模糊效果,
<br/>
-value为模糊半径,模糊半径越大越模糊,为0时不模糊。取值范围:
[
0, +∞)<br/>线性梯度模糊包含两个部分fractionStops和direction<br/>-fractionStops数组中保存的每一个二元数组(取值0-1,小于0则为0,大于0则为1)表示[模糊程度, 模糊位置];模糊位置需严格递增,开发者传入的数据不符合规范会记录日志,渐变模糊数组中二元数组个数必须大于等于2,否则渐变模糊不生效 <br/> -direction为渐变模糊方向,默认值为[GradientDirection
](
ts-appendix-enums.md#gradientdirection
)
.Bottom
<br/>
从API version 10开始,该接口支持在ArkTS卡片中使用。 |
## ShadowOptions对象说明
## ShadowOptions对象说明
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录