九天猎人 发表于 2025-2-22 14:20:08

笔记 HarmonyOS实战开发:ImageAnimator 帧动画组件

        帧动画就是雷同播放影戏一样,一帧一帧的进行播放,相对于属性动画,每一帧,我们都可以进行设置相关属性,且具有停息播放,继承播放的优点。具有事件的实时响应,但在性能上远远不如属性动画,以是假如可以能用属性动画实现的场景,照旧使用属性动画为好。
ImageAnimator不是容器组件,也不需要通报参数,只需要设置属性即可。
   ImageAnimator()
.属性()常用属性    

参数名称参数范例参数形貌imagesArray设置图片帧信息集合。   说明:   不支持动态更新。stateAnimationStatus默认为初始状态,用于控制播放状态。durationnumber单位为毫秒,默认时长为1000ms;  duration为0时,不播放
图片;值的改变只会在下一次循环开始时生效;当images中
任意一帧图片设置了单独的duration后,该属性设置无效。
默认值:  1000 从API version 10开始,该接口支持在ArkTS卡
片中使用。iterationsnumber默认播放一次,设置为-1时表示无穷次播放。   默认值:  1revers        boolean设置播放方向fixedSizeboolean设置图片大小是否固定为组件大小fillModeFillMode设置当前播放方向下,动画开始前和结束后的状态 代码演示:

@Entry
@Component
struct ImageAnimatorPage {
//创建一个动画数组
images: ImageFrameInfo[] = [
    { src: $r('app.media.sa1') },
    { src: $r('app.media.sa2') },
    { src: $r('app.media.sa3') },
    { src: $r('app.media.sa4') }
]
//创建一个播放控制器
@State state: AnimationStatus = AnimationStatus.Initial //动画初始状态

build() {
    Column({space:15}) {
      ImageAnimator()
      .animatorFancy()//公共样式组件
      .images(this.images)//动画数组
      .duration(this.images.length * 1000)//动画播放的时长时长为:数组的长度乘以1秒
      .state(this.state)//状态为初始状态
      .iterations(-1) //播放次数 当播放次数为-1时,将无限播放

      Row() {
      Button('启动').onClick(() => {
          this.state = AnimationStatus.Running//动画播放状态
      })
      Button('暂停').onClick(() => {
          this.state = AnimationStatus.Paused//动画处于暂停状态
      })
      Button('停止').onClick(() => {
          this.state = AnimationStatus.Stopped//动画处于停止状态
      })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

    }
    .height('100%')
    .width('100%')

}

//定义一个重用样式
@Styles
/*
@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。
通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式*/
animatorFancy(){
    .width(300)//宽300
    .aspectRatio(2)//宽高比例 高为150VP
    .padding(10)//内边距10VP
}
} 代码结果展示:

https://i-blog.csdnimg.cn/direct/fe81f9b7b3bd4721b2ac36cb850e8c36.gif

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 笔记 HarmonyOS实战开发:ImageAnimator 帧动画组件