前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HarmonyOS-UIAbitity-ImageAnimator——【坚果派-红目香薰】

HarmonyOS-UIAbitity-ImageAnimator——【坚果派-红目香薰】

作者头像
红目香薰
发布2024-01-31 10:06:44
1250
发布2024-01-31 10:06:44
举报
文章被收录于专栏:CSDNToQQCodeCSDNToQQCode
摘要

作者:红目香薰 团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

HarmonyOS-UIAbitity-ImageAnimator

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

接口

ImageAnimator()

属性

参数名称

参数类型

默认值

必填

参数描述

images

Array<{ src: string, width?: number | string, height?: number | string, top?: number | string, left?: number | string, duration?: number }>

[]

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明: - src:图片路径,图片格式为svg,png和jpg。 - width:图片宽度。 - height:图片高度。 - top:图片相对于组件左上角的纵向坐标。 - left:图片相对于组件左上角的横向坐标。 - duration:每一帧图片的播放时长,单位毫秒。

state

AnimationStatus

Initial

默认为初始状态,用于控制播放状态。

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说明。

iterations

number

1

默认播放一次,设置为-1时表示无限次播放。

事件

名称

功能描述

onStart(event: () => void)

状态回调,动画开始播放时触发。

onPause(event: () => void)

状态回调,动画暂停播放时触发。

onRepeat(event: () => void)

状态回调,动画重新播放时触发。

onCancel(event: () => void)

状态回调,动画取消播放时触发。

onFinish(event: () => void)

状态回调,动画播放完成时触发。

示例代码

代码语言:text
复制
@Entry
@Component
struct Index {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1

  build() {
    Column({ space:5 }) {
      ImageAnimator()
        .images([
          {
            src: $r('app.media.2'),
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          },
          {
            src: $r('app.media.3'),
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          },
          {
            src: $r('app.media.4'),
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          },
          {
            src: $r('app.media.2'),
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          }
        ])
        .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2)
        .fillMode(FillMode.None).iterations(this.iterations).width(325).height(210)
        .margin({top:100})
        .onStart(() => { // 当帧动画开始播放后触发
          console.info('Start')
        })
        .onPause(() => {
          console.info('Pause')
        })
        .onRepeat(() => {
          console.info('Repeat')
        })
        .onCancel(() => {
          console.info('Cancel')
        })
        .onFinish(() => { // 当帧动画播放完成后触发
          console.info('Finish')
        })
      Row() {
        Button('start').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Running
        })
        Button('pause').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Paused
        })
        Button('stop').width(100).padding(5).onClick(() => {
          this.state = AnimationStatus.Stopped
        })
      }
      Row() {
        Button('reverse').width(100).padding(5).onClick(() => {
          this.reverse = !this.reverse
        })
        Button('once').width(100).padding(5).onClick(() => {
          this.iterations = 1
        })
        Button('iteration').width(100).padding(5).onClick(() => {
          this.iterations = -1
        })
      }
    }.width('100%').height('100%').backgroundColor(0xF1F3F5)
  }
}

修改路径的时候要注意一下。

示例效果:

可以看到对应的效果。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-01-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 摘要
  • HarmonyOS-UIAbitity-ImageAnimator
  • 接口
  • 属性
  • 事件
  • 示例代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档