卡片页面能力说明
开发者可以使用声明式范式开发ArkTS卡片页面。如下卡片页面由DevEco Studio模板自动生成，开发者可以根据自身的业务场景进行调整。
ArkTS卡片具备JS卡片的全量能力，并且新增了动效能力和自定义绘制的能力，支持声明式范式的部分组件、事件、动效、数据管理、状态管理能力，详见“ArkTS卡片支持的页面能力”。
ArkTS卡片支持的页面能力
ArkTS卡片支持的页面能力如下，详细介绍请参见ArkTS声明式开发范式API参考。
在这些能力中，只有标识“支持在ArkTS卡片中使用”的具体能力可用于ArkTS卡片，同时请留意卡片场景下的能力差异说明。
- 属性动画
- 显式动画
- 组件内转场
- 像素单位
- Blank组件
- Button组件
- Checkbox组件
- CheckboxGroup组件
- DataPanel组件
- Divider组件
- Gauge组件
- Image组件
- LoadingProgress组件
- Marquee组件
- Progress组件
- Qrcode组件
- Radio组件
- Rating组件
- Slider组件
- Span组件
- Text组件
- Toggle组件
- Canvas绘制上下文对象
- Canvas组件
- 渐变对象
- ImageBitmap对象
- ImageData对象
- Path2D对象
- ForEach组件
- Badge容器组件
- Column容器组件
- Counter容器组件
- Flex容器组件
- GridCol容器组件
- GridRow容器组件
- List容器组件
- ListItem容器组件
- RelativeContainer容器组件
- Row容器组件
- Stack容器组件
- Circle绘制组件
- Ellipse绘制组件
- Line绘制组件
- Path绘制组件
- Polygon绘制组件
- Polyline绘制组件
- Rect绘制组件
- Shape绘制组件
- Background通用属性
- BackgroundBlurStyle通用属性
- BorderImage通用属性
- Border通用属性
- ComponentId通用属性
- Enable通用属性
- FlexLayout通用属性
- GradientColor通用属性
- ImageEffect通用属性
- LayoutConstraints通用属性
- Location通用属性
- Opacity通用属性
- Overlay通用属性
- PolymorphicStyle通用属性
- SharpClipping通用属性
- Size通用属性
- Touch-target通用属性
- Transformation通用属性
- Visibility通用属性
- ZOrder通用属性
- 点击事件
- 挂载卸载事件
- 组件生命周期
- 状态管理
卡片使用动效能力
ArkTS卡片开放了使用动画效果的能力，支持显式动画、属性动画、组件内转场能力。需要注意的是，ArkTS卡片使用动画效果时具有以下限制：
| 名称 | 参数说明 | 限制描述 |
|---|---|---|
| duration | 动画播放时长 | 限制最长的动效播放时长为1秒，当设置大于1秒的时间时，动效时长仍为1秒。 |
| tempo | 动画播放速度 | 卡片中禁止设置此参数，使用默认值1。 |
| delay | 动画延迟执行的时长 | 卡片中禁止设置此参数，使用默认值0。 |
| iterations | 动画播放次数 | 卡片中禁止设置此参数，使用默认值1。 |
以下示例代码实现了按钮旋转的动画效果：
@Entry
@Component
struct AttrAnimationExample {@State rotateAngle: number = 0;build() {Column() {Button('change rotate angle').onClick(() => {this.rotateAngle = 90;}).margin(50).rotate({ angle: this.rotateAngle }).animation({curve: Curve.EaseOut,playMode: PlayMode.AlternateReverse})}.width('100%').margin({ top: 20 })}
}
