鸿蒙NEXT开发实战往期必看文章:
一分钟了解”纯血版!鸿蒙HarmonyOS Next应用开发!
“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线!(从零基础入门到精通)
HarmonyOS NEXT应用开发案例实践总结合(持续更新......)
HarmonyOS NEXT应用开发性能优化实践总结(持续更新......)
开发者可以使用声明式范式开发ArkTS卡片页面。如下卡片页面由DevEco Studio模板自动生成,开发者可以根据自身的业务场景进行调整。
ArkTS卡片具备JS卡片的全量能力,并且新增了动效能力和自定义绘制的能力,支持声明式范式声明式范式声明式范式的部分组件、事件、动效、数据管理、状态管理能力,详见“ArkTS卡片支持的页面能力”。
ArkTS卡片支持的页面能力
ArkTS卡片支持的页面能力详见学习ArkTS语言和ArkTS声明式开发范式。
只有标识“支持在ArkTS卡片中使用”的组件和接口可用于ArkTS卡片,同时请留意卡片场景下的能力差异说明。
例如:以下说明表示@Component装饰器可在ArkTS卡片中使用。
卡片使用动效能力
ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场能力。需要注意的是,ArkTS卡片使用动画效果时具有以下限制:
表1 动效参数限制
名称 | 参数说明 | 限制描述 |
---|---|---|
duration | 动画播放时长 | 限制最长的动效播放时长为1秒,当设置大于1秒的时间时,动效时长仍为1秒。 |
tempo | 动画播放速度 | 卡片中禁止设置此参数,使用默认值1。 |
delay | 动画延迟执行的时长 | 卡片中禁止设置此参数,使用默认值0。 |
iterations | 动画播放次数 | 卡片中禁止设置此参数,使用默认值1。 |
说明
静态卡片不支持使用动效能力。
以下示例代码实现了按钮旋转的动画效果:
@Entry
@Component
struct AnimationCard {
@State rotateAngle: number = 0;
build() {
Row() {
Button('change rotate angle')
.height('20%')
.width('90%')
.margin('5%')
.onClick(() => {
this.rotateAngle = (this.rotateAngle === 0 ? 90 : 0);
})
.rotate({ angle: this.rotateAngle })
.animation({
curve: Curve.EaseOut,
playMode: PlayMode.Normal,
})
}.height('100%').alignItems(VerticalAlign.Center)
}
}
卡片使用自定义绘制能力
ArkTS卡片开放了自定义绘制的能力,在卡片上可以通过Canvas组件创建一块画布,然后通过CanvasRenderingContext2D对象在画布上进行自定义图形的绘制,如下示例代码实现了在画布的中心绘制了一个笑脸。
@Entry
@Component
struct CustomCanvasDrawingCard {
private canvasWidth: number = 0;
private canvasHeight: number = 0;
// 初始化CanvasRenderingContext2D和RenderingContextSettings
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
build() {
Column() {
Row() {
Canvas(this.context)
.width('100%')
.height('100%')
.onReady(() => {
// 在onReady回调中获取画布的实际宽和高
this.canvasWidth = this.context.width;
this.canvasHeight = this.context.height;
// 绘制画布的背景
this.context.fillStyle = '#EEF0FF';
this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
// 在画布的中心绘制一个圆
this.context.beginPath();
let radius = this.context.width / 3;
let circleX = this.context.width / 2;
let circleY = this.context.height / 2;
this.context.moveTo(circleX - radius, circleY);
this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
this.context.closePath();
this.context.fillStyle = '#5A5FFF';
this.context.fill();
// 绘制笑脸的左眼
let leftR = radius / 13;
let leftX = circleX - (radius / 2.3);
let leftY = circleY - (radius / 4.5);
this.context.beginPath();
this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true);
this.context.closePath();
this.context.strokeStyle = '#FFFFFF';
this.context.lineWidth = 15;
this.context.stroke();
// 绘制笑脸的右眼
let rightR = radius / 13;
let rightX = circleX + (radius / 2.3);
let rightY = circleY - (radius / 4.5);
this.context.beginPath();
this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true);
this.context.closePath();
this.context.strokeStyle = '#FFFFFF';
this.context.lineWidth = 15;
this.context.stroke();
// 绘制笑脸的鼻子
let startX = circleX;
let startY = circleY - 20;
this.context.beginPath();
this.context.moveTo(startX, startY);
this.context.lineTo(startX - 8, startY + 40);
this.context.lineTo(startX + 8, startY + 40);
this.context.strokeStyle = '#FFFFFF';
this.context.lineWidth = 15;
this.context.lineCap = 'round';
this.context.lineJoin = 'round';
this.context.stroke();
// 绘制笑脸的嘴巴
let mouthR = radius / 2;
let mouthX = circleX;
let mouthY = circleY + 10;
this.context.beginPath();
this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true);
this.context.strokeStyle = '#FFFFFF';
this.context.lineWidth = 15;
this.context.stroke();
this.context.closePath();
})
}
}.height('100%').width('100%')
}
}
运行效果如下图所示。
标签:ArkTS,进阶,卡片,HarmonyOS,let,context,radius,绘制 From: https://blog.csdn.net/m0_67143533/article/details/143597927