HarmonyOS编写教师节贺卡

​    大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，欢迎关注！
今天是教师节，教师是我最尊敬的职业。感恩一路走来遇到的引路人、一日为师、终身难忘！今天，我来手搓一个教师节贺卡，送给天下所有的老师。
一、需求设计

1、实现效果

包含动画效果：

• 顶部一架纸飞机从左到右不断飞行；
  
• 中间文字以打字机效果呈现；
  
• 底部爱心不断上下跳跃
  

2、技术分析

整体采用一张图片作为背景；中间文字部分通过定时器输出文字，实现打字机效果；底部爱心是一个自定义图形，通过ArkUI提供的自定义绘制组件Canvas来实现心形绘制，再结合ArkUI提供的动画功能实现心形上下跳动效果。
二、界面制作

1、布局分析

2、界面制作

使用DevEco Studio创建项目，将teacher_bg.gif 背景图片拷贝到resources/base/media目录下。
2.1 制作主界面

在项目pages目录下新建文件：TeachersDay.ets，内容如下：

1. @Entry
2. @Component
3. struct TeachersDay {
4.   build() {
5.     Stack({ alignContent: Alignment.Center }) {
6.       //1、 背景图
7.       Image($r('app.media.teacher_bg'))
8.         .width('100%')
9.         .height('120%')
11.       //2、 文本
12.       Text("三尺讲台，一柄戒尺\n回首只闻桃李芬芳\n老师，谢谢你的精心教导")
13.         .fontSize(26)
14.         .fontWeight(FontWeight.Bold)
15.         .fontColor(Color.White)
16.         .lineHeight(40)//行高
17.         .letterSpacing(2) //字间距
19.       //3、 心形
20.       //todo:封装心形组件，减少主文件代码
21.     }
22.     .width('100%')
23.     .height('100%')
24.     .expandSafeArea([SafeAreaType.SYSTEM]) //去白边
25.   }
26. }

复制代码

这样就实现了界面主体框架，接下来通过Canvas绘制底部的心形图。
2.2 制作心形组件

为了方便代码复用，同时减少主界面代码，讲心形组件单独疯转到自定义组件中。
在ets目录下新建view目录，用于存放自定义组件。在view目录下新建心形组件，HeartCom.ets文件，内容如下：

1. // 爱心组件
2. @Component
3. export struct HeartCom{
4.   private seetings:RenderingContextSettings =new RenderingContextSettings(true)
5.   private ctx:CanvasRenderingContext2D=new CanvasRenderingContext2D(this.seetings)
6.   private screenX:number=0 //画布长
7.   private screenY: number = 0 //画布宽
8.   startY: number = 0 //爱心区域最低位置Y坐标
9.   endY: number = 0 //爱心区域最高位置Y坐标
10.   shortSide: number = 0 //爱心区域边长
11.   build(){
12.     Flex({
13.       direction: FlexDirection.Column,
14.       alignItems: ItemAlign.Center,
15.       justifyContent: FlexAlign.Center
16.     }){
17.       Canvas(this.ctx)
18.         .width('100%')
19.         .height('100%')
20.         .backgroundColor(Color.Transparent)
21.         .onReady(() => {
22.           let can = this.ctx
23.           // 画布赋值
24.           this.screenX = can.width
25.           this.screenY = can.height
26.           this.startY = (this.screenY - this.screenX) / 2
27.           this.endY = this.screenX + (this.screenY - this.screenX) / 2
28.           this.shortSide = this.screenX
30.           // 绘制爱心(控制关键几个点的位置)
31.           can.fillStyle = "#ff0000"
32.           can.moveTo(this.screenX / 2, this.startY + this.shortSide / 3)
33.           can.bezierCurveTo(this.screenX / 6, this.startY, 0, this.screenY / 2, this.screenX / 2,
34.             this.endY - this.shortSide / 6)
36.           //立体效果
37.           let grad = can.createLinearGradient(0, 0, this.screenX, this.endY)
38.           grad.addColorStop(0.0, '#fd0000')
39.           grad.addColorStop(1.0, '#ffffff')
40.           can.fillStyle = grad
42.           can.fill()
43.           can.beginPath()
44.           can.moveTo(this.screenX / 2, this.startY + this.shortSide / 3)
45.           can.bezierCurveTo(this.screenX * 5 / 6, this.startY, this.screenX, this.screenY / 2, this.screenX / 2,
46.             this.endY - this.shortSide / 6)
47.           can.fill()
49.         })
50.     }
51.   }
52. }

复制代码

在该组件中，使用Canvas组件完成心形绘制，并通过export导出组件，以便供其它组件使用。
接下来，在主界面中中引入该组件，并将其显示到主界面中。主界面TeachersDay.ets文件做如下修改：

1. import { HeartCom } from '../view/HeartCom'
2. ...
4. //3、 心形
5.       //todo:封装心形组件，减少主文件代码
6.       HeartCom()
7.         .width(150)
8.         .height(150)
9.         .margin({ top: 400 })
10. ...

复制代码

至此，完成静态的界面制作。
三、功能实现

1、打字机效果

接下来，将主界面中间的文字添加打字机效果（一个字一个字的输出）。
修改主界面，将显示文本存放到变量，并通过定时器取文本进行显示。文件TeachersDay.ets修改如下：

1. @State message?: string = "" //打印文本
2. intervalID?: number //定时器
4. ...
5. //2、 文本
6. Text(this.message)
7. ...
9. onPageShow() {
10.   this.printer() //触发打字
11. }
13. // 打字机效果
14.   private printer() {
15.     let data = "三尺讲台，一柄戒尺\n回首只闻桃李芬芳\n老师，谢谢你的精心教导"
16.     let position: number = 0
17.     this.intervalID = setInterval(() => {
18.       position = position + 1
19.       this.message = data.substring(0, position)
20.       if (this.message.length >= data.length) {
21.         clearInterval(this.intervalID)
22.       }
23.     }, 400)
24.   }

复制代码

以上代码将界面显示的文本存放到状态变量message，封装printer函数通过定时器setInterval实现每400毫秒打印一个字符。在页面显示的周期函数onPageShow中触发打字操作。
这样，就实现了文本打字机效果。
2、心形动画

接下来，通过设置动画效果，让底部的心形上下跳动起来。
在TeachersDay.ets文件中，找到心形组件HeartCom，为其设置animation动画属性实现动画效果。TeachersDay.ets文件修改内容如下：

1. ...
2. @State initSize: number = 400
3. @State flag: boolean = false
4. ...
6. //3、 心形
7.       HeartCom()
8.         .width(150)
9.         .height(150)
10.         .margin({ top: this.initSize })
11.         .animation({
12.           iterations: 1,
13.           duration: 1000,
14.           curve: this.flag ? Curve.LinearOutSlowIn : Curve.FastOutLinearIn,
15.           playMode: PlayMode.Alternate,
16.           onFinish: () => {
17.             if (this.flag) {
18.               this.initSize = 400
19.               this.flag = false
20.             } else {
21.               this.initSize = 500
22.               this.flag = true
23.             }
24.           }
25.         })
27. ...
28.   onPageShow() {
29.     this.initSize = 500 //触发动画
30.   }
31. ...

复制代码

通过initSize记录心形组件初始margin值，在onPageShow周期函数中将其值设置为500，表示初始时心形组件距离顶部400，页面显示时向下移动至500，这就让margin属性产生了变化。而心形组件通过animation属性设置了属性动画，就会让这一变化产生从上往下的动画效果。在属性动画中，通过控制flag的值来让心形组件不断进行上下跳动，从而实现不停跳跃的动画效果。
至此、教师节贺卡动画功能实现。
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！