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

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

1. ImageAnimator()
2. .属性()

复制代码

常用属性    

  

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

   代码演示：

1. @Entry
2. @Component
3. struct ImageAnimatorPage {
4.   //创建一个动画数组
5.   images: ImageFrameInfo[] = [
6.     { src: $r('app.media.sa1') },
7.     { src: $r('app.media.sa2') },
8.     { src: $r('app.media.sa3') },
9.     { src: $r('app.media.sa4') }
10.   ]
11.   //创建一个播放控制器
12.   @State state: AnimationStatus = AnimationStatus.Initial //动画初始状态
14.   build() {
15.     Column({space:15}) {
16.       ImageAnimator()
17.         .animatorFancy()//公共样式组件
18.         .images(this.images)//动画数组
19.         .duration(this.images.length * 1000)//动画播放的时长  时长为：数组的长度乘以1秒
20.         .state(this.state)//状态为初始状态
21.         .iterations(-1) //播放次数 当播放次数为-1时，将无限播放
23.       Row() {
24.         Button('启动').onClick(() => {
25.           this.state = AnimationStatus.Running//动画播放状态
26.         })
27.         Button('暂停').onClick(() => {
28.           this.state = AnimationStatus.Paused//动画处于暂停状态
29.         })
30.         Button('停止').onClick(() => {
31.           this.state = AnimationStatus.Stopped//动画处于停止状态
32.         })
33.       }
34.       .width('100%')
35.       .justifyContent(FlexAlign.SpaceEvenly)
37.     }
38.     .height('100%')
39.     .width('100%')
41.   }
43.   //定义一个重用样式
44.   @Styles
45.   /*
46.   @Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。
47.   通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式*/
48.   animatorFancy(){
49.     .width(300)//宽300
50.     .aspectRatio(2)//宽高比例 高为150VP
51.     .padding(10)//内边距10VP
52.   }
53. }

复制代码

代码结果展示：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。