组件执行缩放动画效果 HarmonyOS 鸿蒙Next

组件执行缩放动画效果 HarmonyOS 鸿蒙Next 【设备信息】Mate60
【API版本】Api12
【DevEco Studio版本】5.0.3.910
【问题描述】如何让一个row组件及其子组件在出现时执行缩放效果，并一直持续执行。需要demo

2 回复

可以参考如下demo中的两种方式：

@Entry
@Component
struct Index {
  @State scale11: number = 1;
  @State scaleSize: number = 1
  build() {
    Column() {
      Row() {
        Column() {
          Text('AAA')
            .fontSize(20)
        }.borderWidth(1)
        Column() {
          Text('BBB')
            .fontSize(20)
        }.borderWidth(1)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .scale({ x: this.scaleSize, y: this.scaleSize })
      .border({ width: 1 })
      .width(200)
      .height(200)
      .onAppear(() => {
        animateTo({
          iterations: -1,
          playMode: PlayMode.Alternate
        }, () => {
          this.scaleSize = 1.3
        })
      })
      Row() {
        Column() {
          Text('AAA')
            .fontSize(20 * this.scale11)
        }.borderWidth(1)
        Column() {
          Text('BBB')
            .fontSize(20 * this.scale11)
        }.borderWidth(1)
      }
      .justifyContent(FlexAlign.SpaceAround)
      .margin({ top: 100 })
      .border({ width: 1 })
      .width(200 * this.scale11)
      .height(200 * this.scale11)
      .onAppear(() => {
        animateTo({
          iterations: -1,
          playMode: PlayMode.Alternate
        }, () => {
          this.scale11 = 1.3
        })
      })
    }
    .height('100%')
    .width('100%')
  }
}

animateTo参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-explicit-animation-V13

更多关于组件执行缩放动画效果 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙Next）中，组件的缩放动画效果可以通过Animator或AnimationController来实现。以下是一个简单的示例，展示如何使用Animator对组件进行缩放动画。

import animator from '@ohos.animator';

@Entry
@Component
struct ScaleAnimationExample {
  private scaleX: number = 1.0;
  private scaleY: number = 1.0;

  build() {
    Column() {
      Button('Scale Animation')
        .scale({ x: this.scaleX, y: this.scaleY })
        .onClick(() => {
          this.startScaleAnimation();
        });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  private startScaleAnimation() {
    animator.createAnimator({
      duration: 1000,
      easing: 'easeInOut',
      onUpdate: (value: number) => {
        this.scaleX = 1.0 + value * 0.5;
        this.scaleY = 1.0 + value * 0.5;
      },
      onFinish: () => {
        this.scaleX = 1.0;
        this.scaleY = 1.0;
      }
    }).start();
  }
}

在这个示例中，点击按钮时，按钮会执行一个缩放动画。Animator用于创建动画，scaleX和scaleY属性控制组件的缩放比例。动画持续时间为1000毫秒，使用easeInOut缓动函数。动画结束时，组件的缩放比例恢复到原始大小。

回到顶部