From b87e9953ce574008c7f16d7033f35281c775ea6c Mon Sep 17 00:00:00 2001 From: hehongyang9 Date: Thu, 23 Jun 2022 17:54:36 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=94=B9=E4=BA=86images=E7=9A=84=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E7=B1=BB=E5=9E=8B=EF=BC=8C=E6=8F=90=E5=8F=96=E5=87=BA?= =?UTF-8?q?ImageFrameInfo=E7=9A=84=E6=8E=A5=E5=8F=A3=EF=BC=8C=E5=B0=86?= =?UTF-8?q?=E5=85=B3=E4=BA=8E=E5=85=B7=E4=BD=93=E6=AF=8F=E5=B8=A7=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E7=9A=84=E4=BF=A1=E6=81=AF=E7=9A=84=E4=BB=8B=E7=BB=8D?= =?UTF-8?q?=E6=94=BE=E5=9C=A8=E4=BA=86ImageFrameInfo=E7=9A=84=E4=BB=8B?= =?UTF-8?q?=E7=BB=8D=E4=B8=AD=E3=80=822.=E5=A2=9E=E5=8A=A0=E4=BA=86api9?= =?UTF-8?q?=E4=B8=ADsrc=E5=AF=B9Resource=E7=B1=BB=E5=9E=8B=E7=9A=84?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=9A=84=E8=AF=B4=E6=98=8E=E3=80=823.?= =?UTF-8?q?=E7=BB=99Resource=E5=92=8CLength=E5=A2=9E=E5=8A=A0=E4=BA=86?= =?UTF-8?q?=E8=B6=85=E9=93=BE=E6=8E=A5=E3=80=824.=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=BA=86=E7=A4=BA=E4=BE=8Bdemo=E4=B8=AD=E7=9A=84src=EF=BC=8C?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E4=B8=A4=E7=A7=8DResource=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B=E7=9A=84src=E7=9A=84=E8=AE=BF=E9=97=AE=E3=80=825.?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E7=A4=BA=E4=BE=8Bdemo=E4=B8=AD?= =?UTF-8?q?=E7=9A=84onFinish=E5=87=BD=E6=95=B0=EF=BC=8C=E5=8E=9Fdemo?= =?UTF-8?q?=E5=9C=A8=E7=BB=93=E6=9D=9F=E5=8A=A8=E7=94=BB=E6=94=BE=E6=98=A0?= =?UTF-8?q?=E5=90=8E=E5=86=8D=E6=8C=89start=E9=94=AE=E4=B8=8D=E8=83=BD?= =?UTF-8?q?=E8=A7=A6=E5=8F=91=E9=87=8D=E6=96=B0=E6=92=AD=E6=94=BE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: hehongyang9 Change-Id: I5903f2d5f024ea301b7012b3143eae9178e22cba --- .../ts-basic-components-imageanimator.md | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index 7c7545bbe9..f9f3851de1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -26,15 +26,25 @@ ImageAnimator() | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | -| images | Array<{
src:string,
width?:Length,
height?:Length,
top?:Length,
left?:Length,
duration?:number
}> | [] | 是 | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：
src：图片路径，图片格式为svg，png和jpg。
width：图片宽度。
height：图片高度。
top：图片相对于组件左上角的纵向坐标。
left：图片相对于组件左上角的横向坐标。
duration：每一帧图片的播放时长，单位毫秒。 | +| images | Array<ImageFrameInfo> | [] | 是 | 设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，具体见下面的关于ImageFrameInfo的属性说明。 | | state | AnimationStatus | Initial | 否 | 默认为初始状态，用于控制播放状态。 | -| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 | +| duration | number | 1000 | 否 | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中任意一帧图片设置了单独的duration后，该属性设置无效。 | | reverse | boolean | false | 否 | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。 | -| fixedSize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。 | +| fixedSize | boolean | true | 否 | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。 | | preDecode | number | 0 | 否 | 是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。 | | fillMode | FillMode | Forwards | 否 | 设置动画开始前和结束后的状态，可选值参见FillMode说明。 | | iterations | number | 1 | 否 | 默认播放一次，设置为-1时表示无限次播放。 | +- ImageFrameInfo的属性说明 + | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | -------- | + | src | string \| [Resource](../../ui/ts-types.md#resource类型)9+ | "" | 是 | 图片路径，图片格式为svg，png和jpg，从API9起支持[Resource](../../ui/ts-types.md#resource类型)类型的路径 | + | width | [Length](../../ui/ts-types.md#长度类型) | 0 | 否 | 图片宽度 | + | height | Length | 0 | 否 | 图片高度 | + | top | Length | 0 | 否 | 图片相对于组件左上角的纵向坐标 | + | left | Length | 0 | 否 | 图片相对于组件左上角的横向坐标 | + | duration | number | 0 | 否 | 每一帧图片的播放时长，单位毫秒 | + - AnimationStatus枚举说明 | 名称 | 描述 | | -------- | -------- | @@ -94,7 +104,7 @@ struct ImageAnimatorExample { left: 0 }, { - src: '/comment/bg3.jpg', + src: $r('app.media.bg3'), duration: 500, width: 325, height: 200, @@ -102,7 +112,7 @@ struct ImageAnimatorExample { left: 0 }, { - src: '/comment/bg4.jpg', + src: $rawfile('bg4.jpg'), duration: 500, width: 325, height: 200, @@ -126,6 +136,7 @@ struct ImageAnimatorExample { console.info('Cancel') }) .onFinish(() => { // 当帧动画播放完成后触发 + this.state = AnimationStatus.Stopped console.info('Finish') }) Row() { -- GitLab