Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
4fb6266c
D
Docs
项目概览
OpenHarmony
/
Docs
大约 2 年 前同步成功
通知
161
Star
293
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看板
提交
4fb6266c
编写于
9月 16, 2022
作者:
L
luoying_ace_admin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix doc
Signed-off-by:
N
luoying_ace_admin
<
luoying19@huawei.com
>
上级
0a08c5e5
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
26 addition
and
21 deletion
+26
-21
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
...application-dev/reference/arkui-ts/ts-animatorproperty.md
+13
-8
zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md
...n/application-dev/reference/arkui-ts/ts-appendix-enums.md
+4
-4
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
...ation-dev/reference/arkui-ts/ts-basic-components-image.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
...ion-dev/reference/arkui-ts/ts-basic-components-marquee.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
...erence/arkui-ts/ts-universal-attributes-gradient-color.md
+3
-3
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+3
-3
未找到文件。
zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md
浏览文件 @
4fb6266c
# 属性动画
# 属性动画
组件的
通用属性发生变化时,可以创建属性动画进行渐变,提升用户体验
。
组件的
某些通用属性变化时,可以通过属性动画实现渐变效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等
。
> **说明:**
> **说明:**
>
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> 从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 | 单位为毫秒,默认不延时播放。 |
| duration | number | 否 | 设置动画时长。单位为毫秒,默认动画时长为1000毫秒。
<br/>
默认值:1000 |
| iterations | number | 1 | 默认播放一次,设置为-1时表示无限次播放。 |
| tempo | number | 否 | 动画播放速度。数值越大,动画播放速度越快,数值越小,播放速度越慢
<br/>
值为0时,表示不存在动画。
<br/>
默认值:1 |
| playMode |
[
PlayMode
](
ts-appendix-enums.md#playmode
)
| PlayMode.Normal | 设置动画播放模式,默认播放完成后重头开始播放。 |
| curve | string
\|
[
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 @@
...
@@ -103,10 +103,10 @@
| 名称 | 描述 |
| 名称 | 描述 |
| --------- | -------------------------------------------------------- |
| --------- | -------------------------------------------------------- |
| None |
播放完成后恢复初始状态。
|
| None |
动画未执行时不会将任何样式应用于目标,动画播放完成之后恢复初始默认状态。
|
| Forwards |
播放完成后保持动画结束时的状态。
|
| Forwards |
目标将保留动画执行期间最后一个关键帧的状态。
|
| Backwards |
在显示动画之前,为动画延迟指定的时间段应用“开始”属性值
。 |
| Backwards |
动画将在应用于目标时立即应用第一个关键帧中定义的值,并在delay期间保留此值。第一个关键帧取决于playMode,playMode为Normal或Alternate时为from的状态,playMode为Reverse或AlternateReverse时为to的状态
。 |
| Both |
应用正向和反向填充模式。
|
| Both |
动画将遵循Forwards和Backwards的规则,从而在两个方向上扩展动画属性。
|
## PlayMode
## PlayMode
...
...
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @
4fb6266c
...
@@ -29,7 +29,7 @@ Image(src: string | PixelMap | Resource)
...
@@ -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 | 设置图片的缩放类型。 |
| objectFit |
[
ImageFit
](
ts-appendix-enums.md#imagefit
)
| Cover | 设置图片的缩放类型。 |
| objectRepeat |
[
ImageRepeat
](
ts-appendix-enums.md#imagerepeat枚举说明
)
| NoRepeat | 设置图片的重复样式。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。 |
| objectRepeat |
[
ImageRepeat
](
ts-appendix-enums.md#imagerepeat枚举说明
)
| NoRepeat | 设置图片的重复样式。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。
<br/>
>
-
PixelMap资源不支持该属性。 |
| interpolation | ImageInterpolation | None | 设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题,仅针对图片放大插值。
<br/>
>
**说明:**
<br/>
>
-
svg类型图源不支持该属性。
<br/>
>
-
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
...
@@ -27,7 +27,7 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ------- | ---- | ---- | --------------------- |
| --------- | ------- | ---- | ---- | --------------------- |
| start | boolean | 是 | - | 控制是否进入播放状态。 |
| start | boolean | 是 | - | 控制是否进入播放状态。 |
| step | number | 否 | 6 | 滚动动画文本滚动步长。 |
| step | number | 否 | 6 | 滚动动画文本滚动步长
,单位vp
。 |
| loop | number | 否 | -1 | 设置重复滚动的次数,小于等于零时无限循环。 |
| loop | number | 否 | -1 | 设置重复滚动的次数,小于等于零时无限循环。 |
| fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 |
| fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 |
| src | string | 是 | - | 需要滚动的文本。 |
| src | string | 是 | - | 需要滚动的文本。 |
...
...
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @
4fb6266c
...
@@ -14,9 +14,9 @@
...
@@ -14,9 +14,9 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| linearGradient | {
<br/>
angle?:
number
\|string,
<br/>
direction?:
[GradientDirection](ts-appendix-enums.md#gradientdirection),
<br/>
colors:
Array
<
Color
>
<br/>
,
repeating?:
boolean
<br/>
} | - | 线性渐变。
<br/>
angle:
线性渐变的角度。
<br/>
direction:
线性渐变的方向,设置angle后不生效。
<br/>
colors:
为渐变的颜色描述。
<br/>
repeating:
为渐变的颜色重复着色。 |
| linearGradient | {
<br/>
angle?:
number
\|
string,
<br/>
direction?:
[GradientDirection](ts-appendix-enums.md#gradientdirection),
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | - | 线性渐变。
<br/>
angle:
线性渐变的角度。
<br/>
direction:
线性渐变的方向,设置angle后不生效。
<br/>
colors:
为渐变的颜色描述。
<br/>
repeating:
为渐变的颜色重复着色。 |
| sweepGradient | {
<br/>
center:
Point,
<br/>
start?:
number\|string,
<br/>
end?:
number\|string,rotation?:
number\|string,
<br/>
colors:
Array
<
Color
>
<br/>
, repeating?:
boolean
<br/>
} | - | 角度渐变。
<br/>
center:为角度渐变的中心点。
<br/>
start:角度渐变的起点。
<br/>
end:角度渐变的终点
。
<br/>
colors:
为渐变的颜色描述。
<br/>
repeating:
为渐变的颜色重复着色。 |
| sweepGradient | {
<br/>
center:
Point,
<br/>
start?:
number
\|
string,
<br/>
end?:
number
\|
string,
<br/>
rotation?:
number\|string,
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | - | 角度渐变。
<br/>
center:为角度渐变的中心点。
<br/>
start:角度渐变的起点。
<br/>
end:角度渐变的终点。
<br/>
rotation:
角度渐变的旋转角度
。
<br/>
colors:
为渐变的颜色描述。
<br/>
repeating:
为渐变的颜色重复着色。 |
| radialGradient | {
<br/>
center:
Point,
<br/>
radius:
number
\|string,
<br/>
colors:
Array
<
Color
>
<br/>
, repeating
:
boolean
<br/>
} | - | 径向渐变。
<br/>
center:径向渐变的中心点。
<br/>
radius:径向渐变的半径。
<br/>
colors:
为渐变的颜色描述。
<br/>
repeating:
为渐变的颜色重复着色。 |
| radialGradient | {
<br/>
center:
Point,
<br/>
radius:
number
\|
string,
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?
:
boolean
<br/>
} | - | 径向渐变。
<br/>
center:径向渐变的中心点。
<br/>
radius:径向渐变的半径。
<br/>
colors:
为渐变的颜色描述。
<br/>
repeating:
为渐变的颜色重复着色。 |
## 示例
## 示例
...
...
zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
浏览文件 @
4fb6266c
...
@@ -71,7 +71,7 @@
...
@@ -71,7 +71,7 @@
Text('1')
Text('1')
.useSizeType({
.useSizeType({
xs: { span: 2},
xs: { span: 2},
sm: { span: 3, offset:
1
},
sm: { span: 3, offset:
0
},
md: { span: 6, offset: 2 },
md: { span: 6, offset: 2 },
lg: { span: 8, offset: 2 },
lg: { span: 8, offset: 2 },
})
})
...
@@ -91,14 +91,14 @@ GridContainer() {
...
@@ -91,14 +91,14 @@ GridContainer() {
Text('1')
Text('1')
.useSizeType({
.useSizeType({
xs: { span: 2},
xs: { span: 2},
sm: { span:
3, offset: 1
},
sm: { span:
2, offset: 0
},
md: { span: 6, offset: 2 },
md: { span: 6, offset: 2 },
lg: { span: 8, 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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录