ts-animatorproperty.md 2.8 KB
Newer Older
E
esterzhou 已提交
1
# Property Animator
Z
zengyawen 已提交
2

E
esterzhou 已提交
3
You can create a property animator to animate the universal attributes of a component.
Z
zengyawen 已提交
4

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

E
esterzhou 已提交
9 10 11
| API                      | Description                                                    |
| ------------------------------ | ------------------------------------------------------------ |
| animation(value: AnimateParam) | Applies a property animator to this component to control the transition of the component from one state to another.|
Z
zengyawen 已提交
12

E
esterzhou 已提交
13
## AnimateParam
Z
zengyawen 已提交
14

E
esterzhou 已提交
15
- Attributes
Z
zengyawen 已提交
16

Z
zengyawen 已提交
17

E
esterzhou 已提交
18 19 20 21 22 23 24
| Name        | Type                                    | Default Value            | Description                     |
| ---------- | ---------------------------------------- | --------------- | ----------------------- |
| duration   | number                                   | 1000            | Animation duration, in ms. The default duration is 1000 ms.   |
| curve      | [Curve](ts-appendix-enums.md#curve)        | Curve.Linear    | Animation curve. The default curve is linear.               |
| delay      | number                                   | 0               | Delay of animation playback, in ms. By default, the playback is not delayed.         |
| iterations | number                                   | 1               | 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.  |
| playMode   | [PlayMode](ts-appendix-enums.md#playmode) | PlayMode.Normal | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.|
Z
zengyawen 已提交
25 26 27


## Example
Z
zengyawen 已提交
28

E
ester.zhou 已提交
29 30
```ts
// xxx.ets
Z
zengyawen 已提交
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
@Entry
@Component
struct AttrAnimationExample {
  @State widthSize: number = 200
  @State heightSize: number = 100
  @State flag: boolean = true

  build() {
    Column() {
      Button('click me')
        .onClick((event: ClickEvent) => {
          if (this.flag) {
            this.widthSize = 100
            this.heightSize = 50
          } else {
            this.widthSize = 200
            this.heightSize = 100
          }
          this.flag = !this.flag
        })
        .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
        .animation({
          duration: 2000, // Animation duration
          curve: Curve.EaseOut, // Animation curve
          delay: 500, // Animation delay
          iterations: 1, // Number of playback times
E
esterzhou 已提交
57 58
          playMode: PlayMode.Normal // Animation playback mode
        }) // Animation configuration for the width and height attributes of the <Button> component
Z
zengyawen 已提交
59 60 61 62 63
    }.width('100%').margin({ top: 5 })
  }
}
```

Z
zengyawen 已提交
64
![en-us_image_0000001212378444](figures/en-us_image_0000001212378444.gif)
新手
引导
客服 返回
顶部