ArkTS ImageAnimator组件的用法（附带实例）

ImageAnimator 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每幅图片可以配置时长。

下面介绍该组件的使用方法。首先，准备 4 幅图片放在 resources/media 文件夹中，然后编写如下示例代码：

// 垂直布局，子元素间距 10vp
Column({ space: 10 }) {
  ImageAnimator()
    // 帧动画所需图片列表
    .images([
      {
        src: $r('app.media.01'),
        width: '300',
        height: '300'
      },
      {
        src: $r('app.media.02'),
        width: '300',
        height: '300'
      },
      {
        src: $r('app.media.03'),
        width: '300',
        height: '300'
      },
      {
        src: $r('app.media.04'),
        width: '300',
        height: '300'
      }
    ])
    // 每帧停留时间（毫秒）。设为 0 时不自动播放
    .duration(2000)
    // 播放状态：Running 表示立即开始播放
    .state(AnimationStatus.Running)
    // 播放方向：true 为倒序（从最后一张播到第一张）；false 为正序
    .reverse(true)
    // 图片尺寸是否强制等于组件尺寸
    // true  -> 忽略单张图片的 width/height
    // false -> 使用单张图片自身 width/height
    .fixedSize(false)
    // 循环次数：-1 表示无限循环
    .iterations(-1)
    // 动画开始前/结束后的样式保持策略
    // None      -> 不保留任何关键帧样式
    // Forwards  -> 保留最后一帧样式
    // Backwards -> 延迟期间即应用第一帧样式
    // Both      -> 同时应用 Forwards 与 Backwards 规则
    .fillMode(FillMode.None)
}
.width('100%')
.height(400)

ImageAnimator 组件的示例效果如下图所示：

图 1 ImageAnimator组件的示例效果

4 幅图片会循环切换，类似轮播图的效果。

注意，除了在 images 的每个属性中设置 src 之外，还可以设置其他属性，如 width、height、top、left、duration。另外，ImageAnimator 组件还支持以下事件：

onStart(event: () => void)：状态回调，动画开始播放时触发；
onPause(event: () => void)：状态回调，动画暂停播放时触发；
onRepeat(event: () => void)：状态回调，动画重复播放时触发；
onCancel(event: () => void)：状态回调，动画返回最初状态时触发；
onFinish(event: () => void)：状态回调，动画播放完成时或者停止播放时触发。

通过这些事件可以设置动画的状态。

ArkTS ImageAnimator组件的用法（附带实例）

相关文章