ts-basic-components-imageanimator.md 6.3 KB
Newer Older
E
esterzhou 已提交
1
# ImageAnimator
Z
zengyawen 已提交
2

E
ester.zhou 已提交
3 4
> **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
5

E
esterzhou 已提交
6 7 8 9

The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.


Z
zengyawen 已提交
10
## Required Permissions
Z
zengyawen 已提交
11 12 13

None

Z
zengyawen 已提交
14 15

## Child Components
Z
zengyawen 已提交
16

E
ester.zhou 已提交
17
Not supported
Z
zengyawen 已提交
18 19


Z
zengyawen 已提交
20 21 22
## APIs

ImageAnimator()
Z
zengyawen 已提交
23 24


Z
zengyawen 已提交
25
## Attributes
Z
zengyawen 已提交
26

E
esterzhou 已提交
27 28 29 30 31 32 33 34 35 36
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| images | Array&lt;ImageFrameInfo&gt; | [] | Yes| Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.|
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Initial | No| Playback status of the animation. The default status is **Initial**.|
| duration | number | 1000 | No| Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.|
| reverse | boolean | false | No| Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.|
| fixedSize | boolean | true | No| Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.|
| preDecode | number | 0 | No| Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.|
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Forwards | No| Status before and after the animation starts. For details about the options, see **FillMode**.|
| iterations | number | 1 | No| Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.|
Z
zengyawen 已提交
37

E
ester.zhou 已提交
38
- ImageFrameInfo
E
esterzhou 已提交
39 40 41 42 43 44 45 46
  | Name| Type| Default Value| Mandatory| Description|
  | -------- | -------- | -------- | -------- | -------- |
  | src | string \| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| "" | Yes| Image path. The image format can be .svg, .png, or .jpg.|
  | width | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image width.|
  | height | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image height.|
  | top | [Length](.../ui/ts-types.md#length-type)| 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.|
  | left | [Length](.../ui/ts-types.md#length-type)| 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.|
  | duration | number | 0 | No| Playback duration of each image frame, in milliseconds.|
Z
zengyawen 已提交
47 48


Z
zengyawen 已提交
49
## Events
Z
zengyawen 已提交
50

E
esterzhou 已提交
51 52 53 54 55 56 57
| Name| Description|
| -------- | -------- |
| onStart(event: () =&gt; void)  | Triggered when the animation starts to play.|
| onPause(event: () =&gt; void)  | Triggered when the animation playback is paused.|
| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
Z
zengyawen 已提交
58 59


Z
zengyawen 已提交
60
## Example
Z
zengyawen 已提交
61

E
ester.zhou 已提交
62 63
```ts
// xxx.ets
Z
zengyawen 已提交
64 65 66 67 68 69 70 71 72 73 74
@Entry
@Component
struct ImageAnimatorExample {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1

  build() {
    Column({ space:5 }) {
      ImageAnimator()
        .images([
E
esterzhou 已提交
75
          { 
E
ester.zhou 已提交
76
            // The comment folder is at the same level as the pages folder.
Z
zengyawen 已提交
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
            src: '/comment/bg1.jpg',
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          },
          {
            src: '/comment/bg2.jpg',
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          },
          {
E
ester.zhou 已提交
93
            src: $r('app.media.bg3'),
Z
zengyawen 已提交
94 95 96 97 98 99 100
            duration: 500,
            width: 325,
            height: 200,
            top: 0,
            left: 0
          },
          {
E
ester.zhou 已提交
101
            src: $rawfile('bg4.jpg'),
Z
zengyawen 已提交
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
            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(() => { // Triggered when the frame animation playback starts.
          console.info('Start')
        })
        .onPause(() => {
          console.info('Pause')
        })
        .onRepeat(() => {
          console.info('Repeat')
        })
        .onCancel(() => {
          console.info('Cancel')
        })
        .onFinish(() => { // Triggered after the frame animation playback is complete.
E
ester.zhou 已提交
125
          this.state = AnimationStatus.Stopped
Z
zengyawen 已提交
126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
          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)
  }
}
```

Z
zengyawen 已提交
155
![en-us_image_0000001211898470](figures/en-us_image_0000001211898470.gif)
反馈
建议
客服 返回
顶部