3.3 Image组件和ImageAnimator组件 原创 精华

本节首先解决@Extend装饰器无法多页面复用的问题，介绍通过自定义组件实现标题和正文的样式复用。然后介绍图片展示组件Image和帧动画组件ImageAnimator，并同时讲解如何对图片应用图像效果及实现共享元素转场。

3.3.1 建立多页面可复用的组件

在《3.1.1 Text组件》这节中，我们使用了@Extend装饰器定义了title和body，实现快速定义并复用组件的自定义样式。但是，@Extend装饰器只能应用在定义该装饰器的页面里，无法通过export共享给其它页面调用。同时，如果在其它页面定义了同名的装饰器，如，另一个页面也定义了一个名为"title"或"body"的装饰器，会编译异常，提示重复的定义。

本小节建立两个自定义组件，解决@Extend装饰器的上述不足，实现多页面复用。其中：

@Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。

本小节不打算展开对@Component装饰器的讲解，更多的声明式语法将在《第8章 基于TS扩展的声明式开发规范》中讲解。

在index.ets页面底部加入如下代码：

/**
 * H8标题
 */
@Component
export struct H8 {
  private text: string = ''
  private color: any = $r('app.color.fgLevel1')

  build() {
    Text(this.text)
      .fontSize($r('app.float.fontSizeH8'))
      .fontWeight(Number($r('app.float.fontWeightH8')))
      .fontColor(this.color)
      .fontFamily('sans-serif-condensed, sans-serif')
  }
}

/**
 * 正文文本
 */
@Component
export struct TextBody1 {
  private text: string = ''
  private color: any = $r('app.color.fgLevel1')

  build() {
    Text(this.text)
      .fontSize($r('app.float.fontSizeBody1'))
      .fontWeight(Number($r('app.float.fontWeightBody1')))
      .fontColor(this.color)
      .fontFamily('sans-serif-condensed, sans-serif')
  }
}

在下一小节演示如何引用并使用标题组件和正文组件。

3.3.2 Image组件

图片组件Image，用来渲染展示图片。

首先，建立ImageSample.ets页面，用于展示本小节的效果，初始化代码如下：

// 引用自定义组件
import {H8,TextBody1} from './index'

/**
 * 3.3.1 Image组件
 */
@Entry
@Component
struct ImageSample {
  build() {
    Stack({ alignContent: Alignment.TopStart }){
      Scroll() {
        Column({space:8}){
          // 返回首页
          Row({space:8}){
            Image($r("app.media.ic_back")).width(24).height(24)

            Navigator({ target: 'pages/index', type: NavigationType.Back }) {
              H8({text:'返回'}) // 调用自定义组件
            }
          }

          // TODO

        }.padding({left: $r('app.float.spaceLeft'), right: $r('app.float.spaceRight')}).alignItems(HorizontalAlign.Start)
      }
    }.width('100%').height('100%').backgroundColor($r("app.color.appBg")).padding({top:$r('app.float.spaceTop'), bottom:$r('app.float.spaceBottom')})
  }
}

1.接口：Image(src: string | PixelMap)

src:string|PixelMap 图片的URI，支持本地图片和网络路径，支持使用媒体PixelMap对象。

PixelMap:图像像素类，用于读取或写入图像数据以及获取图像信息。在调用PixelMap的方法前，需要先通过createPixelMap创建一个PixelMap实例。关于创建PixelMap实例的方法并不适合初学者学习，这里暂时不展开讨论，后面会有专门的章节详细讲解。本专栏教程是由浅入深、循序渐进、水到渠成的。

这里先演示如何通过接口引用App本地图片。图片格式支持“png/jpg/gif/svg”，图片文件可以存放在media媒体目录、rawfile目录或自己创建的“/common/images”目录。图片格式和图片存放目录没有对应关系，下面演示做了个随机分配，便于用最少代码做更全面的演示。

在上述初始化代码的”TODO“处加入如下代码：

          /**
           * 接口：Image(src: string | PixelMap)
           *    src:string|PixelMap 图片的URI，支持本地图片和网络路径，支持使用媒体PixelMap对象。
           *        PixelMap:图像像素类，用于读取或写入图像数据以及获取图像信息。在调用PixelMap的方法前，需要先通过createPixelMap创建一个PixelMap实例。
           */
          H8({text:'1.接口'})
          TextBody1({text:'png格式图片，media目录'})
          Image($r("app.media.cover")) // media目录下的媒体资源
            .width("100%")
            .aspectRatio(1.5)
            .borderRadius($r("app.float.radius_L"))
          TextBody1({text:'gif格式图片，rawfile目录'})
          Image($rawfile("ic_gif.gif")) // $rawfile资源要写文件后缀
            .width("100%")
            .aspectRatio(1.5)
            .borderRadius($r("app.float.radius_L"))
          TextBody1({text:'jpg格式图片，/common/images目录'})
          Image("/common/images/banner.jpg") // /common/images目录下的图片
            .width("100%")
            .aspectRatio(3.5)

在手机浅色模式和平板深色模式下效果如下：

使用网络路径

如果图片来源于网络，接口还是和上面一样，但是需要在config.json文件中“js”节点的后面加入如下配置：

    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

如下图所示：

然后在ImageSample.ets页面加入如下代码：

          TextBody1({text:'svg格式图片，使用网络路径'})
          Image("https://developer.huawei.com/images/new-content/Navigation/HW-LOGO.svg") // 使用网络路径的图片
            .width(300).height(65) // Logo指定宽高，不进行自适应缩放

效果如下：

2.属性

.alt(string | PixelMap)： 加载时显示的占位图。支持本地图片和网络路径，支持使用媒体PixelMap对象。

示例代码：

          H8({text:'2.属性'})
          /**
           * .alt(string | PixelMap)： 加载时显示的占位图。支持本地图片和网络路径，支持使用媒体PixelMap对象。
           */
          TextBody1({text:'.alt(string | PixelMap)： 加载时显示的占位图'})
          Image('') // 这里使用网络路径的图片
            .width("100%")
            .aspectRatio(3.5)
            .alt($r('app.media.alt')) // 加载时显示的占位图

在媒体文件夹下放入alt.png图片，浅色模式和深色模式下效果如下：

. objectFit (ImageFit)： 设置图片的缩放类型。

示例代码：

          /**
           * .objectFit(ImageFit) 默认值Cover,设置图片的缩放类型。
           *    ImageFit.Cover 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
           *    ImageFit.Contain 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
           *    ImageFit.Fill 不保持宽高比进行放大缩小，使得图片填充满显示边界。
           *    ImageFit.None 保持原有尺寸显示。通常配合objectRepeat属性一起使用。
           *    ImageFit.ScaleDown 保持宽高比显示，图片缩小或者保持不变。
           */
          TextBody1({text:'.objectFit(ImageFit)：设置图片的缩放类型'})
          Image($r("app.media.cover"))
            .width('100%').height(120)
            .objectFit(ImageFit.Cover)
          Image($r("app.media.cover"))
            .width('100%').height(120)
            .objectFit(ImageFit.Contain)
          Image($r("app.media.cover"))
            .width('100%').height(120)
            .objectFit(ImageFit.Fill)
          Image($r("app.media.cover"))
            .width('100%').height(120)
            .objectFit(ImageFit.None)
          Image($r("app.media.cover"))
            .width('100%').height(120)
            .objectFit(ImageFit.ScaleDown)

在手机和平板上，图片表现如下：

. objectRepeat (ImageRepeat): 设置图片的重复样式。

示例代码：

          /**
           * .objectRepeat (ImageRepeat): 默认值NoRepeat,设置图片的重复样式。
           *    ImageRepeat.X 只在水平轴上重复绘制图片。
           *    ImageRepeat.Y 只在竖直轴上重复绘制图片。
           *    ImageRepeat.XY 在两个轴上重复绘制图片。
           *    ImageRepeat.NoRepeat 不重复绘制图片。
           * 注意：SVG类型图源不支持该属性。
           */
          TextBody1({text:'. objectRepeat (ImageRepeat): 设置图片的重复样式'})
          Image($r('app.media.icon'))
            .width(115).height(115)
            .border({ width: 1 }).borderStyle(BorderStyle.Dashed)
            .objectFit(ImageFit.ScaleDown)
            .objectRepeat(ImageRepeat.X) // 只在水平轴上重复绘制图片
          Image($r('app.media.icon'))
            .width(115).height(115)
            .border({ width: 1 }).borderStyle(BorderStyle.Dashed)
            .objectFit(ImageFit.ScaleDown)
            .objectRepeat(ImageRepeat.Y) // 只在竖直轴上重复绘制图片
          Image($r('app.media.icon'))
            .width(115).height(115)
            .border({ width: 1 }).borderStyle(BorderStyle.Dashed)
            .objectFit(ImageFit.ScaleDown)
            .objectRepeat(ImageRepeat.XY) // 在两个轴上重复绘制图片
          Image($r('app.media.icon'))
            .width(115).height(115)
            .border({ width: 1 }).borderStyle(BorderStyle.Dashed)
            .objectFit(ImageFit.ScaleDown)
            .objectRepeat(ImageRepeat.NoRepeat) // 不重复绘制图片

运行效果：

. interpolation (ImageInterpolation)： 设置图片的插值效果，仅针对图片放大插值。

对于一些较小的图片，或老照片，插值计算有助于提升画质。示例代码：

          /**
           * .interpolation (ImageInterpolation)： 设置图片的插值效果，仅针对图片放大插值。默认值None。
           *    ImageInterpolation.None 不使用插值图片数据。
           *    ImageInterpolation.High 高度使用插值图片数据，可能会影响图片渲染的速度。
           *    ImageInterpolation.Medium 中度使用插值图片数据。
           *    ImageInterpolation.Low 低度使用插值图片数据。
           * 注意：SVG类型图源不支持该属性；PixelMap资源不支持该属性。
           */
		  TextBody1({text:'.interpolation (ImageInterpolation)： 设置图片的插值效果'})
          Image('/common/images/photo.png')
            .width(300)
            .objectFit(ImageFit.Cover)
            .interpolation (ImageInterpolation.None) // 不使用插值图片数据
          Image('/common/images/photo.png')
            .width(300)
            .objectFit(ImageFit.Cover)
            .interpolation (ImageInterpolation.High) // 高度使用插值图片数据
          Image('/common/images/photo.png')
            .width(300)
            .objectFit(ImageFit.Cover)
            .interpolation (ImageInterpolation.Medium) // 中度使用插值图片数据
          Image('/common/images/photo.png')
            .width(300)
            .objectFit(ImageFit.Cover)
            .interpolation (ImageInterpolation.Low) // 低度使用插值图片数据

可以看到，原图放大后有马赛克，而高插值的方式就很平滑了。效果对比如下：

. renderMode (ImageRenderMode)： 设置图片渲染的模式。 相当于PS中对图片做去色处理，可将彩色图片变为灰度图片。

示例代码：

          /**
           * .renderMode(ImageRenderMode) 默认值Original,设置图片渲染的模式。
           *    ImageRenderMode.Original 按照原图进行渲染，包括颜色。
           *    ImageRenderMode.Template 将图像渲染为模板图像，忽略图片的颜色信息。
           * 注意：SVG类型图源不支持该属性。
           */
          TextBody1({text:'.renderMode(ImageRenderMode) 设置图片渲染的模式'})
          Image("/common/images/banner.jpg")
            .width("100%")
            .aspectRatio(3.5)
            .renderMode(ImageRenderMode.Original) // 按照原图进行渲染，包括颜色
          Image("/common/images/banner.jpg")
            .width("100%")
            .aspectRatio(3.5)
            .renderMode(ImageRenderMode.Template) // 忽略图片的颜色信息

效果如下：

.sourceSize({width: number,height: number})： 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。

一张原本尺寸为1200x750像素的图片，指定解码尺寸为150x100像素的照片后，如果图片展示尺寸超过该尺寸，就会模糊，示例代码如下：

          /**
           * .sourceSize({width: number,height: number}) 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。
           * 注意：PixelMap资源不支持该属性。
           */
          TextBody1({text:'.sourceSize({width: number,height: number}) 设置图片解码尺寸'})
          Image($r("app.media.cover"))
            .borderRadius($r("app.float.radius_L"))
            .sourceSize({
              width: 150,
              height: 100
            }) // 解码为小尺寸后显示模糊
          Image($r("app.media.cover")) // 原图效果
            .borderRadius($r("app.float.radius_L"))

解码为小尺寸和原图的效果对比如下：

对于.sourceSize属性的使用，我个人的看法是：如果原图较小，通过sourceSize解码为大尺寸，建议配合.interpolation (ImageInterpolation)属性来设置图片的插值，改善画质；如果原图较大，通过sourceSize解码为小尺寸，建议配合.objectFit(ImageFit.ScaleDown)属性显示为合适的尺寸，保证清晰度。

如有不同想法，欢迎留言讨论。

3.事件

1.onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)：图片成功加载时触发该回调，返回成功加载的图源尺寸。

2.onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)：图片加载出现异常时触发该回调。

3.onFinish(callback: () => void) 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

示例代码：

          /**
           * 事件:
           * 1.onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)：图片成功加载时触发该回调，返回成功加载的图源尺寸。
           * 2.onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)：图片加载出现异常时触发该回调。
           * 3.onFinish(callback: () => void) 当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。
           */
          H8({text:'3.事件'})
          Image("https://developer.huawei.com/images/new-content/Navigation/HW-LOGO.svg") // 使用网络路径的图片
            .width(300).height(65)
            .onComplete((msg: { width: number,height: number }) => {
              // 可根据 msg.width和 msg.height的大小决定卡片显示风格等
            })
            .onError(() => {
              console.log('加载图片失败')
            })
            .onFinish(() => {
              //
            })

4.图像效果

前面演示了通过Image组件的.renderMode(ImageRenderMode)实现图片的去色效果。在基于TS扩展的声明式开发范式中还有一些控制图像效果的属性，这些属性不仅可以用于Image组件，也可以用于其它组件。

示例代码如下：

          /**
           * 图像效果
           * 属性：
           *  blur:number 为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
           *  backdropBlur:number 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
           *  shadow:{radius: number,color?: Color,offsetX?: number,offsetY?: number}
           *    为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。
           *  grayscale:number 默认值0.0,为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)
           *  brightness:number 默认值1.0,为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。
           *  saturate:number 默认值1.0,为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比）
           *  contrast:number 默认值1.0,为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比）
           *  invert:number 默认值0,反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比）
           *  sepia:number 默认值0,将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比）
           *  hueRotate:number 默认值0deg,为当前组件添加色相旋转效果，入参为旋转的角度值。当入参为0deg时图像无变化(默认值是0deg)，入参没有最大值，超过360deg的值相当于又绕一圈。
           */
          H8({text:'4.图像效果'})
          TextBody1({text:'添加内容模糊效果'})
          Image("/common/images/banner.jpg") // /common/images目录下的图片
            .width("100%")
            .aspectRatio(3.5)
            .blur(3) // 为当前组件添加内容模糊效果

          TextBody1({text:'背景模糊效果'})
          Row().width('100%').height(240)
            .backgroundImage('/common/images/banner.jpg')
            .backgroundImageSize({ width: 1200, height: 800 })
            .backgroundImagePosition(Alignment.Center)
            .backdropBlur(3)

          TextBody1({text:'添加阴影效果'})
          Image("/common/images/banner.jpg").width('100%').aspectRatio(3.5)
            .shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 })

          TextBody1({text:'添加灰度效果'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .grayscale(0.6)

          TextBody1({text:'添加高光效果'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .brightness(2.0)

          TextBody1({text:'添加饱和度效果'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .saturate(2.0)

          TextBody1({text:'添加对比度效果'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .contrast(2.0)

          TextBody1({text:'反转输入的图像'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .invert(1)

          TextBody1({text:'图像转换为深褐色'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .sepia(1)

          TextBody1({text:'色相旋转效果'})
          Image("/common/images/lake.jpg").width('100%').aspectRatio(3.5)
            .hueRotate(90)

上述代码的效果可以通过远程模拟器体验：

5.共享元素转场

在图片列表页面给缩略图设置一个id，在放大显示图片的展示页也给图片设置一个相同的id， 利用共享元素转场，将当前页面的图片转场到详情页面。

属性：

. sharedTransition(id: string, options?: Object) ： 两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。 其中options参数说明如下：

duration： number 单位为毫秒，默认动画时长为1000毫秒。

curve ： Curve | Curves 默认曲线为线性

delay:number 默认值0，单位为毫秒，默认不延时播放。

示例代码：

首先在ImageSample.ets页面添加如下代码：

          /**
           * 5.共享元素转场
           * 共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。
           *
           * 属性:
           *  .sharedTransition(id: string,options?: Object)
           *  两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。
           *    options参数说明:
           *    duration:number 默认值1000，单位为毫秒，默认动画时长为1000毫秒。
           *    curve:Curve | Curves 默认值Linear，默认曲线为线性
           *      Curve.Linear 表示动画从头到尾的速度都是相同的。
           *      Curve.Ease 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。
           *      Curve.EaseIn 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。
           *      Curve.EaseOut 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。
           *      Curve.EaseInOut 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。
           *      Curve.FastOutSlowIn 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
           *      Curve.LinearOutSlowIn 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
           *      Curve.FastOutLinearIn 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
           *      Curve.ExtremeDeceleration 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
           *      Curve.Sharp 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
           *      Curve.Rhythm 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
           *      Curve.Smooth 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
           *      Curve.Friction 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。
           *    delay:number 默认值0，单位为毫秒，默认不延时播放。
           */
          H8({text:'5.共享元素转场'})
          Navigator({ target: 'pages/ImageDetailSample', type: NavigationType.Push }) {
            Image($r("app.media.cover"))
              .width(100)
              .aspectRatio(1.5)
              .sharedTransition('sharedId1', { duration: 800, curve: Curve.Linear, delay: 100 })
          }

然后新建一个ImageDetailSample.ets页面，代码如下：

@Entry
@Component
struct ImageDetailSample {
  build() {
    Column({space:8}) {
      Navigator({ target: 'pages/ImageSample', type: NavigationType.Back }) {
        Image($r("app.media.cover"))
          .width("100%")
          .aspectRatio(1.5)
          .borderRadius($r("app.float.radius_L"))
          .sharedTransition('sharedId1') // 设置和上级页面相同的id
      }
    }
    .width('100%')
    .height('100%')
    .padding({top: $r("app.float.spaceTop"), bottom:$r("app.float.spaceBottom"), left:$r("app.float.spaceLeft"), right: $r("app.float.spaceRight")})
    .backgroundColor($r("app.color.appBg"))
  }
}

建议在DevEco Studioi中通过本地预览器或远程模拟器体验流畅的转场动画效果，可以点击放大，也可以点击返回上级页面时缩小，运行效果如下：

3.3.3 ImageAnimator组件

在ArkUI eTS语言中，可通过Image组件展示gif动画，同时，提供了一个ImageAnimator组件，提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

新建ImageAnimatorSample.ets页面，初始化代码如下：

import {H8} from './index'

/**
 * 3.3.3 ImageAnimator组件
 */
@Entry
@Component
struct ImageDetailSample {
  build() {
    Column({space:8}) {
      // 返回首页
      Row({space:8}){
        Image($r("app.media.ic_back")).width(24).height(24)

        Navigator({ target: 'pages/index', type: NavigationType.Back }) {
          H8({text:'返回'})
        }
      }

      // TODO
    }
    .width('100%')
    .height('100%')
    .padding({top: $r("app.float.spaceTop"), bottom:$r("app.float.spaceBottom"), left:$r("app.float.spaceLeft"), right: $r("app.float.spaceRight")})
    .backgroundColor($r("app.color.appBg"))
    .alignItems(HorizontalAlign.Start)
  }
}

1.接口

ImageAnimator()

2.属性

.images(Array<{
src:string, //图片路径，图片格式为svg，png和jpg。
width?:Length, //图片宽度。
height?:Length, //图片高度。
top?:Length, //图片相对于组件左上角的纵向坐标。
left?:Length, //图片相对于组件左上角的横向坐标。
duration?:number //每一帧图片的播放时长，单位毫秒。
}>)：设置图片帧信息集合。

.state(AnimationStatus)：用于控制播放状态。

.duration(number)：持续时间

.reverse(boolean)：设置播放顺序。

.fixedSize(boolean)：设置图片大小是否固定为组件大小。

.preDecode(number)：是否启用预解码。

.fillMode(FillMode)： 设置动画开始前和结束后的状态 。

.iterations(number)： 默认播放一次，设置为-1时表示无限次播放。

3.事件

onStart() => void ： 状态回调，动画开始播放时触发。

onPause() => void ： 状态回调，动画暂停播放时触发。

onRepeat() => void ： 状态回调，动画重新播放时触发。

onCancel() => void ： 状态回调，动画取消播放时触发。

onFinish() => void ： 状态回调，动画播放完成时触发。

示例代码如下：

首先，在代码"build(){"之前加入如下代码：

  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1

代码位置如下图所示：

然后在"// TODO"处加入如下代码：

      /**
       * 1.接口:ImageAnimator()
       * 2.属性:
       *  images:Array<{
            src:string, //图片路径，图片格式为svg，png和jpg。
            width?:Length, //图片宽度。
            height?:Length, //图片高度。
            top?:Length, //图片相对于组件左上角的纵向坐标。
            left?:Length, //图片相对于组件左上角的横向坐标。
            duration?:number //每一帧图片的播放时长，单位毫秒。
          }> 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。
       *  state:AnimationStatus 默认值Initial，默认为初始状态，用于控制播放状态。
       *    AnimationStatus.Initial 动画初始状态。
       *    AnimationStatus.Running 动画处于播放状态。
       *    AnimationStatus.Paused 动画处于暂停状态。
       *    AnimationStatus.Stopped 动画处于停止状态。
       *  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属性都要单独设置。
       *  preDecode:number 默认值0，是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。
       *  fillMode:FillMode 默认值Forwards，设置动画开始前和结束后的状态，可选值参见FillMode说明。
       *    FillMode.None 播放完成后恢复初始状态。
       *    FillMode.Forwards 播放完成后保持动画结束时的状态。
       *    FillMode.Backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值。
       *    FillMode.Both 向前和向后填充模式都被应用。
       *  iterations:number 默认值1，默认播放一次，设置为-1时表示无限次播放。
       *
       * 3.事件：
       *  onStart() => void 状态回调，动画开始播放时触发。
       *  onPause() => void 状态回调，动画暂停播放时触发。
       *  onRepeat() => void 状态回调，动画重新播放时触发。
       *  onCancel() => void 状态回调，动画取消播放时触发。
       *  onFinish() => void 状态回调，动画播放完成时触发。
       */
      ImageAnimator()
        .images([
          {
            src: '/common/images/01.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/02.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/03.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/04.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/05.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/06.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/07.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/08.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/09.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/10.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/11.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          },
          {
            src: '/common/images/12.jpg',
            duration: 100,
            width: 300,
            height: 300,
            top: 0,
            left: 0
          }
        ]) // 设置图片帧信息集合
        .state(this.state) // 用于控制播放状态
        .reverse(this.reverse) // 设置播放顺序,
        .fixedSize(false) // 设置图片大小是否固定为组件大小
        .preDecode(2) // 是否启用预解码
        .fillMode(FillMode.None) // 设置动画开始前和结束后的状态
        .iterations(this.iterations) // 默认播放一次，设置为-1时表示无限次播放
        .width(300).height(300)
        .margin({top:100})
        .onStart(() => { // 状态回调，动画开始播放时触发
          console.info('动画开始播放')
        })
        .onPause(() => { // 状态回调，动画暂停播放时触发
          console.info('动画暂停播放')
        })
        .onRepeat(() => { // 状态回调，动画重新播放时触发
          console.info('动画重新播放')
        })
        .onCancel(() => { // 状态回调，动画取消播放时触发
          console.info('动画取消播放')
        })
        .onFinish(() => { // 状态回调，动画播放完成时触发
          console.info('动画播放完成')
        })
      Row() {
        Button('开始').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Running
        })
        Button('暂停').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Paused
        })
        Button('停止').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Stopped
        })
      }
      Row() {
        Button('反向播放').width(100).padding(5).onClick(() => {
          this.reverse = !this.reverse
        })
        Button('播放一次').width(100).padding(5).onClick(() => {
          this.iterations = 1
        })
        Button('无限循环').width(100).padding(5).onClick(() => {
          this.iterations = -1
        })
      }

运行效果如下：

【本节源码：https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent 】