1# 卡片使用动效能力
2
3
4ArkTS卡片开放了使用动画效果的能力，支持[显式动画](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md)、[属性动画](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md)、[组件内转场](../reference/apis-arkui/arkui-ts/ts-transition-animation-component.md)能力。需要注意的是，ArkTS卡片使用动画效果时具有以下限制：
5
6**表1** 动效参数限制
7
8| 名称 | 参数说明 | 限制描述 |
9| -------- | -------- | -------- |
10| duration | 动画播放时长 | 限制最长的动效播放时长为1秒，当设置大于1秒的时间时，动效时长仍为1秒。 |
11| tempo | 动画播放速度 | 卡片中禁止设置此参数，使用默认值1。 |
12| delay | 动画延迟执行的时长 | 卡片中禁止设置此参数，使用默认值0。 |
13| iterations | 动画播放次数 | 卡片中禁止设置此参数，使用默认值1。 |
14
15>**说明：**
16>
17>静态卡片不支持使用动效能力。
18
19以下示例代码实现了按钮旋转的动画效果：
20![WidgetAnimation](figures/WidgetAnimation.gif)
21
22
23
24```ts
25@Entry
26@Component
27struct AnimationCard {
28  @State rotateAngle: number = 0;
29
30  build() {
31    Row() {
32      Button('change rotate angle')
33        .height('20%')
34        .width('90%')
35        .margin('5%')
36        .onClick(() => {
37          this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
38        })
39        .rotate({ angle: this.rotateAngle })
40        .animation({
41          curve: Curve.EaseOut,
42          playMode: PlayMode.Normal,
43        })
44    }.height('100%').alignItems(VerticalAlign.Center)
45  }
46}
47```
48