天津外贸营销型网站建设,微商城网站策划,建立网站小程序,制作html网站卡片页面能力说明
开发者可以使用声明式范式开发ArkTS卡片页面。如下卡片页面由DevEco Studio模板自动生成#xff0c;开发者可以根据自身的业务场景进行调整。 ArkTS卡片具备JS卡片的全量能力#xff0c;并且新增了动效能力和自定义绘制的能力#xff0c;支持声明式范式的…卡片页面能力说明
开发者可以使用声明式范式开发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 })}
}
