HarmonyOS编写教师节贺卡

大家好,我是潘Sir,持续分享IT技术,帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,欢迎关注!

今天是教师节,教师是我最尊敬的职业。感恩一路走来遇到的引路人、一日为师、终身难忘!今天,我来手搓一个教师节贺卡,送给天下所有的老师。

一、需求设计

1、实现效果

包含动画效果:

  • 顶部一架纸飞机从左到右不断飞行;

  • 中间文字以打字机效果呈现;

  • 底部爱心不断上下跳跃

2、技术分析

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

二、界面制作

1、布局分析

2、界面制作

使用DevEco Studio创建项目,将teacher_bg.gif 背景图片拷贝到resources/base/media目录下。

2.1 制作主界面

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

typescript 复制代码
@Entry
@Component
struct TeachersDay {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      //1、 背景图
      Image($r('app.media.teacher_bg'))
        .width('100%')
        .height('120%')

      //2、 文本
      Text("三尺讲台,一柄戒尺\n回首只闻桃李芬芳\n老师,谢谢你的精心教导")
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.White)
        .lineHeight(40)//行高
        .letterSpacing(2) //字间距

      //3、 心形
      //todo:封装心形组件,减少主文件代码
    }
    .width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM]) //去白边
  }
}

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

2.2 制作心形组件

为了方便代码复用,同时减少主界面代码,讲心形组件单独疯转到自定义组件中。

在ets目录下新建view目录,用于存放自定义组件。在view目录下新建心形组件,HeartCom.ets文件,内容如下:

typescript 复制代码
// 爱心组件
@Component
export struct HeartCom{
  private seetings:RenderingContextSettings =new RenderingContextSettings(true)
  private ctx:CanvasRenderingContext2D=new CanvasRenderingContext2D(this.seetings)
  private screenX:number=0 //画布长
  private screenY: number = 0 //画布宽
  startY: number = 0 //爱心区域最低位置Y坐标
  endY: number = 0 //爱心区域最高位置Y坐标
  shortSide: number = 0 //爱心区域边长
  build(){
    Flex({
      direction: FlexDirection.Column,
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center
    }){
      Canvas(this.ctx)
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Transparent)
        .onReady(() => {
          let can = this.ctx
          // 画布赋值
          this.screenX = can.width
          this.screenY = can.height
          this.startY = (this.screenY - this.screenX) / 2
          this.endY = this.screenX + (this.screenY - this.screenX) / 2
          this.shortSide = this.screenX

          // 绘制爱心(控制关键几个点的位置)
          can.fillStyle = "#ff0000"
          can.moveTo(this.screenX / 2, this.startY + this.shortSide / 3)
          can.bezierCurveTo(this.screenX / 6, this.startY, 0, this.screenY / 2, this.screenX / 2,
            this.endY - this.shortSide / 6)

          //立体效果
          let grad = can.createLinearGradient(0, 0, this.screenX, this.endY)
          grad.addColorStop(0.0, '#fd0000')
          grad.addColorStop(1.0, '#ffffff')
          can.fillStyle = grad

          can.fill()
          can.beginPath()
          can.moveTo(this.screenX / 2, this.startY + this.shortSide / 3)
          can.bezierCurveTo(this.screenX * 5 / 6, this.startY, this.screenX, this.screenY / 2, this.screenX / 2,
            this.endY - this.shortSide / 6)
          can.fill()

        })
    }
  }
}

在该组件中,使用Canvas组件完成心形绘制,并通过export导出组件,以便供其它组件使用。

接下来,在主界面中中引入该组件,并将其显示到主界面中。主界面TeachersDay.ets文件做如下修改:

typescript 复制代码
import { HeartCom } from '../view/HeartCom'
...

//3、 心形
      //todo:封装心形组件,减少主文件代码
      HeartCom()
        .width(150)
        .height(150)
        .margin({ top: 400 })
...

至此,完成静态的界面制作。

三、功能实现

1、打字机效果

接下来,将主界面中间的文字添加打字机效果(一个字一个字的输出)。

修改主界面,将显示文本存放到变量,并通过定时器取文本进行显示。文件TeachersDay.ets修改如下:

typescript 复制代码
@State message?: string = "" //打印文本
intervalID?: number //定时器

...
//2、 文本
Text(this.message)
...

onPageShow() {
  this.printer() //触发打字
}

// 打字机效果
  private printer() {
    let data = "三尺讲台,一柄戒尺\n回首只闻桃李芬芳\n老师,谢谢你的精心教导"
    let position: number = 0
    this.intervalID = setInterval(() => {
      position = position + 1
      this.message = data.substring(0, position)
      if (this.message.length >= data.length) {
        clearInterval(this.intervalID)
      }
    }, 400)
  }

以上代码将界面显示的文本存放到状态变量message,封装printer函数通过定时器setInterval实现每400毫秒打印一个字符。在页面显示的周期函数onPageShow中触发打字操作。

这样,就实现了文本打字机效果。

2、心形动画

接下来,通过设置动画效果,让底部的心形上下跳动起来。

在TeachersDay.ets文件中,找到心形组件HeartCom,为其设置animation动画属性实现动画效果。TeachersDay.ets文件修改内容如下:

typescript 复制代码
...
@State initSize: number = 400
@State flag: boolean = false
...

//3、 心形
      HeartCom()
        .width(150)
        .height(150)
        .margin({ top: this.initSize })
        .animation({
          iterations: 1,
          duration: 1000,
          curve: this.flag ? Curve.LinearOutSlowIn : Curve.FastOutLinearIn,
          playMode: PlayMode.Alternate,
          onFinish: () => {
            if (this.flag) {
              this.initSize = 400
              this.flag = false
            } else {
              this.initSize = 500
              this.flag = true
            }
          }
        })

...
  onPageShow() {
    this.initSize = 500 //触发动画
  }
...

通过initSize记录心形组件初始margin值,在onPageShow周期函数中将其值设置为500,表示初始时心形组件距离顶部400,页面显示时向下移动至500,这就让margin属性产生了变化。而心形组件通过animation属性设置了属性动画,就会让这一变化产生从上往下的动画效果。在属性动画中,通过控制flag的值来让心形组件不断进行上下跳动,从而实现不停跳跃的动画效果。

至此、教师节贺卡动画功能实现。

《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,欢迎关注!

相关推荐
一点七加一9 小时前
Harmony鸿蒙开发0基础入门到精通Day01--JavaScript篇
开发语言·javascript·华为·typescript·ecmascript·harmonyos
那年窗外下的雪.9 小时前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
是Yu欸11 小时前
【仓颉语言】原生智能、全场景与强安全的设计哲学
开发语言·安全·鸿蒙·鸿蒙系统·仓颉语言
赵健zj13 小时前
鸿蒙 emitter 和 eventHub 的区别
华为·harmonyos
逻极21 小时前
HarmonyOS 5 鸿蒙应用性能优化与调试技巧
华为·性能优化·harmonyos·鸿蒙
Kevin Coding1 天前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
华为·harmonyos
周倦岚1 天前
【HarmonyOS】组件嵌套优化
harmonyos
std78791 天前
鸿蒙与安卓系统的优劣分析
鸿蒙
安卓开发者1 天前
鸿蒙Next Test Kit:一站式自动化测试框架详解
华为·harmonyos
weixin_404611341 天前
鸿蒙flutter 老项目到新项目的遇到迁移坑点
flutter·华为·harmonyos