HarmonyOS-卡片页面能力说明和使用动效能力

卡片页面能力说明

开发者可以使用声明式范式开发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卡片使用动画效果时具有以下限制：

以下示例代码实现了按钮旋转的动画效果：

@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 })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20