OpenHarmony 用eTS 实现一个小动画献给所有的父亲

本文正在参加星光计划3.0 – 夏日挑战赛

@toc

1.介绍

明天就是父亲节了，祝愿所有的父亲们节日快乐！记得给爸爸打个电话。

效果

视频效果：
https://ost.51cto.com/show/13979

2.代码

页面布局

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Image($r("app.media.circle"))
        .width('90%')
        .height(300)
        .objectFit(ImageFit.Contain)
        .opacity(this.opacity)
        .rotate({ x: 0, y: 0, z: 1, angle: this.angle })
        .scale({ x: this.scale, y: this.scale, z: this.scale })
        .overlay(this.typeword, { align: Alignment.Center, offset: { y: -20 } },)


      Text(`速度：${this.speed.toFixed(0)}`).width('100%').textAlign(TextAlign.Center).fontSize(22).margin({ top: 50 })
      Slider({
        value: this.speed,
        min: 1,
        max: 10,
        step: 1,
        style: SliderStyle.OutSet
      })
        .width('90%')
        .blockColor(Color.Brown)
        .selectedColor(Color.Brown)
        .showSteps(true)
        .showTips(true)
        .onChange((value) => {
          this.speed = value
        })

      Text(`缩放大小：${this.scale.toFixed(1)}`).width('100%').textAlign(TextAlign.Center).fontSize(22).margin({ top: 50 })
      Slider({
        value: this.scale,
        min: 0.1,
        max: 2,
        step: 0.1,
        style: SliderStyle.InSet
      })
        .width('90%')
        .blockColor(Color.Orange)
        .selectedColor(Color.Orange)
        .showSteps(true)
        .showTips(true)
        .onChange((value) => {
          this.scale = value
        })
    }
    .width('100%')
    .height('100%')
  }

实现的几个效果

图片由小到大，模拟从远处靠近的效果，同时图片旋转效果，
模拟打字效果，打出父亲节祝福语…

  //旋转方法
  rotating() {
    this.subStr();
    var interval = setInterval(() => {
      this.angle += this.speed;
      if (this.scale < 1.1) {
        this.scale += 0.01;
        this.opacity += 0.02
      } else {
        //转回正位
        this.angle += (360 - this.angle)
        this.speed = 0
        //打字效果
        this.typing()

        clearInterval(interval)
      }
    }, 100)
    console.log(`interval:${this.angle}`);
  }

  //模拟打字效果
  typing() {
    var that = this
    that.typeword = ''
    var i: number = 0
    var typing = setInterval(function () {
      try {
        that.typeword += that.words[i]
        if (i == (that.words.length) - 1) {
          clearInterval(typing)
          console.log(`======clearInterval`)
        }
        i++
      } catch (error) {
        console.log("====error:" + error)
      }
    }, 500)
  }

  //截取字符串
  subStr() {
    for (var i = 0;i < this.str.length; i++) {
      var s = this.str[i]
      this.words.push(s)
    }
  }

  //生命周期函数，Page显示后，触发该回调
  aboutToAppear() {
    this.rotating()
  }

3.总结说明

1. 知识点
   Slider组件的使用，rotate、scale、overlay 属性的运用
2. 图片旋转起来有点像播放的CD，要是再加个音乐就更好了…

4.完整代码

附件下载吧