codecamp

帧动画组件

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

说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

ImageAnimator()

属性

除支持通用属性外,还支持以下属性:

参数名称

参数类型

参数描述

images

Array<ImageFrameInfo>

设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息,详见ImageFrameInfo属性说明。

默认值:[]

说明:

不支持动态更新。

state

AnimationStatus

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

默认值:AnimationStatus.Initial

duration

number

单位为毫秒,默认时长为1000ms;duration为0时,不播放图片;值的改变只会在下一次循环开始时生效;当images中任意一帧图片设置了单独的duration后,该属性设置无效。

默认值:1000

reverse

boolean

设置播放顺序。false表示从第1张图片播放到最后1张图片; true表示从最后1张图片播放到第1张图片。

默认值:false

fixedSize

boolean

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致,此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。

默认值:true

preDecode(deprecated)

number

预解码的图片数量。例如该值设为2,则播放当前页时会提前加载后面两张图片至缓存以提升性能。

从API version9开始废弃。

默认值:0

fillMode

FillMode

设置动画开始前和结束后的状态,可选值参见FillMode说明。

默认值:FillMode.Forwards

iterations

number

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

默认值:1

ImageFrameInfo对象说明

参数名称

参数类型

必填

参数描述

src

string | Resource9+

图片路径,图片格式为svg,png和jpg,从API Version9开始支持Resource类型的路径。

width

number | string

图片宽度。

默认值:0

height

number | string

图片高度。

默认值:0

top

number | string

图片相对于组件左上角的纵向坐标。

默认值:0

left

number | string

图片相对于组件左上角的横向坐标。

默认值:0

duration

number

每一帧图片的播放时长,单位毫秒。

默认值:0

事件

除支持通用事件外,还支持以下事件:

名称

功能描述

onStart(event: () => void)

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

onPause(event: () => void)

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

onRepeat(event: () => void)

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

onCancel(event: () => void)

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

onFinish(event: () => void)

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

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ImageAnimatorExample {
  5. @State state: AnimationStatus = AnimationStatus.Initial
  6. @State reverse: boolean = false
  7. @State iterations: number = 1
  8. build() {
  9. Column({ space: 10 }) {
  10. ImageAnimator()
  11. .images([
  12. {
  13. src: $r('app.media.img1')
  14. },
  15. {
  16. src: $r('app.media.img2')
  17. },
  18. {
  19. src: $r('app.media.img3')
  20. },
  21. {
  22. src: $r('app.media.img4')
  23. }
  24. ])
  25. .duration(2000)
  26. .state(this.state).reverse(this.reverse)
  27. .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
  28. .margin({ top: 100 })
  29. .onStart(() => {
  30. console.info('Start')
  31. })
  32. .onPause(() => {
  33. console.info('Pause')
  34. })
  35. .onRepeat(() => {
  36. console.info('Repeat')
  37. })
  38. .onCancel(() => {
  39. console.info('Cancel')
  40. })
  41. .onFinish(() => {
  42. console.info('Finish')
  43. this.state = AnimationStatus.Stopped
  44. })
  45. Row() {
  46. Button('start').width(100).padding(5).onClick(() => {
  47. this.state = AnimationStatus.Running
  48. }).margin(5)
  49. Button('pause').width(100).padding(5).onClick(() => {
  50. this.state = AnimationStatus.Paused // 显示当前帧图片
  51. }).margin(5)
  52. Button('stop').width(100).padding(5).onClick(() => {
  53. this.state = AnimationStatus.Stopped // 显示动画的起始帧图片
  54. }).margin(5)
  55. }
  56. Row() {
  57. Button('reverse').width(100).padding(5).onClick(() => {
  58. this.reverse = !this.reverse
  59. }).margin(5)
  60. Button('once').width(100).padding(5).onClick(() => {
  61. this.iterations = 1
  62. }).margin(5)
  63. Button('infinite').width(100).padding(5).onClick(() => {
  64. this.iterations = -1 // 无限循环播放
  65. }).margin(5)
  66. }
  67. }.width('100%').height('100%')
  68. }
  69. }

图片组件
加载动效的组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }