卡片頁面能力說明

開發者可以使用聲明式范式開發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 })}
}