【HarmonyOS】抖动动画方案

HarmonyOs-demo-抖动动画实现方案

import curves from "@ohos.curves"

/**
 * 1. 手机号输入框：
 *   - 提供一个用于输入手机号码的文本框。
 *   - 输入类型限制为电话号码，仅接受数字输入。
 *   - 最大允许输入长度为13位，符合中国手机号码标准。
 *   - 显示占位提示文字“请输入手机号”，当输入框为空时可见。
 *   - 自定义样式包括背景色、字体颜色、大小、边框圆角、光标颜色等。
 *   - 用户输入时，实时更新`textPhone`状态变量存储输入的手机号码。
 *
 * 2. 动画测试按钮：
 *   - 点击此按钮触发`startAnimation`方法，启动输入框的动画效果。
 *
 * 3. 动画实现：
 *   - `startAnimation`方法使用`animateTo`函数创建一个动画。
 *   - 动画参数说明：
 *     - `duration`: 动画持续时间设为800毫秒。
 *     - `curve`: 应用`curves.springCurve`生成的Spring Curve动画曲线，模拟物理弹簧效果。
 *     - `iterations`: 动画只执行一次。
 *     - `onEnded`: 动画结束后，通过回调函数更新`doScale`状态，将输入框永久放大10%（从1到1.1）。
 *     - 在启动动画之前，先将`doScale`重置为初始值（1, 1），确保动画从原尺寸开始计算。
 *
 * 注意事项:
 *
 * - **动画逻辑**:
 *   - 动画结束后，输入框的缩放状态将永久保留放大后的尺寸。这是通过`onEnded`回调函数实现的。
 *   - 为了保证动画正确起始，先将`doScale`恢复到初始尺寸（1, 1）再启动动画。
 *
 * - **输入框行为**:
 *   - 用户目前只能在输入框末尾插入或删除字符，无法在中间位置插入光标。这可能是由于`onChange`事件处理方式导致的限制。
 */
@Entry
@Component
export struct test {
  @State textPhone: string = ''
  @State doScale: ScaleOptions = { x: 1, y: 1 }

  startAnimation() {
    animateTo({
      duration: 800,
      curve: curves.springCurve(0, 10, 80, 10),
      iterations: 1,

    }, () => {
      this.doScale = { x: 1.1, y: 1.1 };
    })
    this.doScale = { x: 1, y: 1 };
  }

  build() {
    Column() {
      TextInput({ text: this.textPhone, placeholder: '请输入手机号' })
        .margin({ top: 30 })
          // .padding({ left: 0 })
        .width('658lpx')
        .height('96lpx')
        .scale(this.doScale)
        .backgroundColor(Color.White)
        .type(InputType.PhoneNumber)
        .maxLength(13)
        .placeholderColor("#CBCBCB")
        .fontColor("#2E2E2E")
        .fontSize('36lpx')
        .caretColor('#FF1919') //设置输入框光标颜色。
          // .stateStyles({ //设置按下背景颜色 ，一旦设置上，会导致点击空白输入框区域就清空内容
          //   pressed: this.txtClcik,
          //   focused: this.txtClcik,
          // })
        .onChange((value: string) => { //解决了会导致点击空白输入框区域就清空内容的问题，但有新问题，用户没办法在中间插入光标
          this.textPhone = value
        })
        .borderRadius(40)

      Button('动画测试').margin({ top: 30 }).onClick(() => {
        this.startAnimation()
      })
    }.width('100%').height('100%')
    .backgroundColor("#f5f5f5")
  }
}