HarmonyOS鸿蒙Next中一个text圆形，每次点击时，实现圆形的放大与还原动画！怎么实现

HarmonyOS鸿蒙Next中一个text圆形，每次点击时，实现圆形的放大与还原动画！怎么实现 一个text圆形，每次点击时，实现圆形的放大与还原动画！怎么实现

3 回复

在鸿蒙系统中实现圆形 Text 组件的点击放大/还原动画，主要有两种实现方式：显式动画 animateTo 和 属性动画 animation。推荐使用 animateTo 方式，动画控制更精细。

已通过代码实现；具体参考下面代码：

@Entry
@Component
struct CircleTextAnimation {
  @State isScaled: boolean = false;  // 控制放大状态
  @State scaleValue: number = 1;      // 缩放比例

  build() {
    Column() {
      // 圆形Text组件
      Text('点我')
        .width(100)
        .height(100)
        .textAlign(TextAlign.Center)
        .fontSize(20)
        .fontColor(Color.White)
        .backgroundColor('#3F72AF')
        .borderRadius(50)  // 设置圆角为宽高的一半，形成圆形
        .scale({
          x: this.scaleValue,
          y: this.scaleValue
        })  // 绑定缩放属性
        .onClick(() => {
          // 在点击事件中执行动画
          animateTo({
            duration: 300,           // 动画时长300毫秒
            curve: Curve.EaseInOut,  // 缓动曲线，让动画更自然
            onFinish: () => {
              console.info('动画完成');
            }
          }, () => {
            // 在动画闭包中切换状态
            this.isScaled = !this.isScaled;
            this.scaleValue = this.isScaled ? 1.3 : 1;  // 放大1.3倍或还原
          });
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中一个text圆形，每次点击时，实现圆形的放大与还原动画！怎么实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用ArkTS实现Text组件的圆形放大与还原动画，可通过以下步骤：

  1. 使用@State装饰器定义控制缩放的状态变量，例如scale: number = 1。

  2. 在Text组件上设置scale样式绑定该状态变量，并添加borderRadius: '50%'实现圆形效果。

  3. 添加onClick事件，使用animateTo动画函数，在点击时修改scale值（如放大至1.5，还原至1），并配置动画参数（如duration、curve）。

示例代码片段：

@State scale: number = 1;

// ...

Text('点击')
  .scale({ x: this.scale, y: this.scale })
  .borderRadius('50%')
  .onClick(() => {
    animateTo({
      duration: 300,
      curve: Curve.EaseInOut
    }, () => {
      this.scale = this.scale === 1 ? 1.5 : 1;
    })
  })

此代码实现点击时圆形文本的平滑缩放动画。

在HarmonyOS Next中，可以通过属性动画和点击事件实现圆形文本的放大与还原效果。以下是核心实现步骤：

  1. 定义布局与样式
    使用Text组件设置宽高相等（如100vp）并添加borderRadius: 50vp实现圆形，通过backgroundColor设置背景色。

  2. 添加点击事件与动画逻辑
    在Text组件上绑定onClick事件，通过状态变量控制缩放比例（如scale）。使用animateTo方法执行属性动画：

    [@State](/user/State) scale: number = 1;

onClick() {
  const targetScale = this.scale === 1 ? 1.5 : 1; // 切换放大/还原
  animateTo({ duration: 300 }, () => {
    this.scale = targetScale;
  });
}

  3. 应用缩放变换
    在Text样式中添加scale属性绑定状态变量：

    scale({ x: this.scale, y: this.scale })

完整示例代码：

@Entry
@Component
struct CircleTextAnimation {
  [@State](/user/State) scale: number = 1;

  build() {
    Text('Hello')
      .width(100)
      .height(100)
      .borderRadius(50)
      .backgroundColor(Color.Blue)
      .textAlign(TextAlign.Center)
      .scale({ x: this.scale, y: this.scale })
      .onClick(() => {
        const targetScale = this.scale === 1 ? 1.5 : 1;
        animateTo({ duration: 300 }, () => {
          this.scale = targetScale;
        });
      })
  }
}

点击时圆形会在1倍和1.5倍大小之间平滑过渡，动画时长为300毫秒。可通过调整duration和缩放比值控制动画速度与幅度。

回到顶部