【HarmonyOS】鸿蒙抖动动画方案

2024-10-11
广东
本文字数：1509 字
阅读完需：约 5 分钟

这段代码是一个使用 ArkUI 框架（可能用于华为鸿蒙系统的应用开发）编写的简单用户界面组件。它主要实现了以下功能：

界面布局：使用Column组件垂直排列界面元素，其中包括一个TextInput组件用于输入手机号，以及一个Button按钮用于触发动画。
手机号输入：
TextInput组件用于接收用户输入的手机号。
设置了占位符placeholder提示用户输入手机号。
限制了输入的最大长度为 13 个字符，适合中国手机号。
自定义了输入框的样式，包括背景色、字体颜色、光标颜色、边框圆角等。
使用了onChange事件监听器来更新组件内部状态textPhone，以便跟踪用户的输入。
动画效果：
定义了一个startAnimation方法，该方法使用animateTo函数来创建一个动画。
动画使用了curves.springCurve(0, 10, 80, 10)作为动画曲线，使动画效果具有弹簧般的弹性感觉。
动画的持续时间设置为 800 毫秒，并且只执行一次。
动画的目的是改变doScale状态的值，从而通过scale属性影响TextInput组件的缩放比例。动画开始时，doScale被设置为{ x: 1, y: 1 }（即不缩放），动画结束时，doScale的值被设置为{ x: 1.1, y: 1.1 }（即水平和垂直方向都放大到原来的 1.1 倍）。但是，由于动画的回调函数（将doScale设置为{ x: 1.1, y: 1.1 }）在animateTo调用之后立即执行（将doScale重置为{ x: 1, y: 1 }），实际上动画的效果可能无法正确显示或仅在动画结束时瞬间显示一次放大效果。
按钮触发动画：
Button组件上的文本为“动画测试”，点击该按钮会调用startAnimation方法，从而触发上述动画效果。

注意：代码中startAnimation方法的动画实现存在逻辑问题。由于this.doScale = { x: 1, y: 1 };这行代码紧跟在animateTo调用之后，它将立即重置doScale的值，导致动画的缩放效果无法持续显示。正确的做法应该是将动画结束时的状态设置放在animateTo的回调函数中，但确保这个设置是在动画实际完成后执行，这可能需要调整动画的实现方式或使用其他方法来确保动画的正确执行。

import curves from "@ohos.curves"  @Entry@Componentexport 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")  }}

复制代码

发布于: 刚刚阅读数: 4

zhongcx

关注

还未添加个人签名 2024-09-27 加入

还未添加个人简介

发布

暂无评论

创作场景

【HarmonyOS】鸿蒙抖动动画方案

zhongcx

评论