HarmonyOS 鸿蒙Next如何实现安卓中的OvershootInterpolator

使用curves设置弹簧曲线

@Entry
@Component
struct Index {
  @State xcWidth: number = 0;

  build() {
    Column({ space: 5 }) {
      Row()
        .width(this.xcWidth)
        .height(100)
        .backgroundColor(Color.Red)
        .animation({
          duration: 3000, //动画持续时间，单位为毫秒。默认值：1000
          // 在ArkTS卡片上最大动画持续时间为1000毫秒，若超出则固定为1000毫秒。
          // - 设置小于0的值时按0处理。Ò
          // - 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
          tempo: 1, //动画播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画 默认值：1.0  当设置小于0的值时按值为1处理
          curve: Curve.Linear, //表示动画从头到尾的速度都是相同的。
          // curve: Curve.Ease	,//表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
          // curve: Curve.EaseIn	,//表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
          // curve: Curve.EaseOut	,//表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
          // curve: Curve.EaseInOut	,//表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
          // curve: Curve.FastOutSlowIn	,//标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。
          // curve: Curve.LinearOutSlowIn	,//减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。
          // curve: Curve.FastOutLinearIn	,//加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。
          // curve: Curve.ExtremeDeceleration	,//急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
          // curve: Curve.Sharp	,//锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
          // curve: Curve.Rhythm	,//节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
          // curve: Curve.Smooth	,//平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
          // curve: Curve.Friction	,//阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
          delay: -1500, //动画延迟播放时间，单位为ms(毫秒)，默认不延时播放。默认值：0 (-∞, +∞)
          //delay>=0为延迟播放，delay<0表示提前播放。
          //对于delay<0的情况：当delay的绝对值小于实际动画时长，动画将在开始后第一帧直接运动到delay绝对值的时刻的状态；
          // 当delay的绝对值大于等于实际动画时长，动画将在开始后第一帧直接运动到终点状态。其中实际动画时长等于单次动画时长乘以动画播放次数。
          // 设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
          iterations: 10, //动画播放次数。默认播放一次， 设置-1表示动画无限循环 设置为0时表示无动画效果 默认值：1 取值范围：[-1, +∞) 小于-1只执行一次 输入小数向下取整
          playMode: PlayMode.Normal, //动画播放模式，默认播放完成后重头开始播放  动画正向播放。
          // playMode: PlayMode.Reverse,//动画反向播放。
          // playMode: PlayMode.Alternate,//动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
          // playMode: PlayMode.AlternateReverse,//动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
          onFinish: () => { //动画播放完成回调。UIAbility从前台切换至后台时会立即结束仍在步进中的有限循环动画，触发播放完成回调。
            console.log("animation:", "动画播放结束！")
          },
          //在动画中定义onFinish回调的类型。
          finishCallbackType: FinishCallbackType.REMOVED, //当整个动画结束并立即删除时，将触发回调。
          // finishCallbackType: FinishCallbackType.LOGICALLY, //当动画在逻辑上处于下降状态，但可能仍处于其长尾状态时，将触发回调。
          //设置动画的期望帧率。
          expectedFrameRateRange: {
            min: 20,//期望的最小帧率。
            max: 120,//期望的最大帧率。
            expected: 90,//期望的最优帧率。
          }
        })
      Button("change size")
        .onClick(() => {
          this.xcWidth = 200;
        })
    }
    .width("100%")
  }
}