HarmonyOS 鸿蒙Next 如何实现位移动画，并且可以取消

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何实现位移动画，并且可以取消

如何实现位移动画，并且可以取消

Harmonyos Next教程
3 回复

参考下这个demo：

[@Extend](/user/Extend)(Text)
function globalText() {
  .fontSize(36)
  .fontColor(Color.Red)
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct PositionChangeDemo {
  [@State](/user/State) message: string = 'Hello World'
  [@State](/user/State) imgWidth: number = 300;
  [@State](/user/State) translateX: number = 0;
  [@State](/user/State) translateY: number = 0;
  [@State](/user/State) translateX2: number = 50;

  aboutToAppear() {
    setTimeout(() => {
      animateTo({
        curve: Curve.Linear, duration: 500, onFinish: () => {
          animateTo({
            curve: Curve.Linear, duration: 500, onFinish: () => {
              animateTo({ curve: Curve.Linear, duration: 100 }, () => {
                this.translateX2 = 0;
              })
            }
          }, () => {
            this.imgWidth = 20;
            this.translateX = 300;
            this.translateY = 200;
          })
        }
      }, () => {
        this.imgWidth = 100;
        this.translateX = 200;
        this.translateY = 120;
      })
    }, 2000)
  }

  build() {
    Column() {
      Column() {
        Text('固定内容')
          .globalText()
          .onClick(() => {

          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
      .margin(2)
      .width('100%')
      .height(200)
      .backgroundColor(Color.Gray)
      .border({
        width: 3,
        color: Color.Black,
        radius: 2,
        style: BorderStyle.Solid
      })

      Scroll() {
        Column() {
          Image($r('app.media.strawberry'))
            .width(this.imgWidth)
            .translate({
              x: this.translateX,
              y: this.translateY
            })
            .objectFit(ImageFit.Contain)
            .zIndex(2)

          Column() {
            Text('其他内容')
              .globalText()
          }
          .zIndex(1)
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Center)
          .width('100%')
          .height(700)
          .backgroundColor(Color.Gray)
          .border({
            width: 3,
            color: Color.Black,
            radius: 2,
            style: BorderStyle.Solid
          })
        }.width('100%')
      }
      .layoutWeight(1)
      .padding(10)
      .width('100%')

      Column() {
        Image($r('app.media.strawberry'))
          .width(50)
          .objectFit(ImageFit.Contain)
          .translate({
            x: this.translateX2
          })
          .position({
            x: 340,
            y: 380
          })
      }
    }
    .height('100%')
  }
}
animateTo不能暂停和取消动画

1：另外起一个duration为0的动画在新的动画闭包中修改对应的属性来停掉之前的属性动画，示例代码如下：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page240119142354017 {
  [@State](/user/State) message: string = ‘Hello World’;
  [@State](/user/State) opacityValue: number = 1

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.opacity(this.opacityValue)
Button(“开始动画”).onClick(() => {
animateTo({ duration: 1000, iterations: -1, playMode: PlayMode.AlternateReverse }, () => {
this.opacityValue = 0
})
})
Button(“结束动画”).onClick(() => {
animateTo({
duration: 0, iterations: 1, onFinish: () => {
this.opacityValue = 1
}
}, () => {
this.opacityValue = 0.9
})
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}

2：可以改为animator实现

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5

3：可以使用lottie三方库的动画来暂停

在HarmonyOS鸿蒙Next中，实现位移动画并允许取消，可以按照以下步骤进行：

一、实现位移动画

  1. 使用ArkUI框架中的动画API，如animateTo方法。
  2. 设置动画属性，如起始位置、目标位置、动画持续时间等。
  3. 触发动画，使其从当前状态平滑过渡到目标状态。

二、取消位移动画

  1. 检查动画状态：在尝试取消动画前，通过动画对象的状态属性或相关方法检查动画是否正在运行。
  2. 调用取消方法：如果animateTo返回了一个动画对象（如Animator），可以直接调用该对象的cancel()方法来停止动画。
  3. 使用动画监听器：设置动画监听器，在动画开始或进行中通过监听器的回调方法调用cancel()来停止动画。

需要注意的是，取消动画可能会导致动画的当前状态与目标状态不一致，具体效果取决于动画的类型和取消时的状态。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部