uniapp 点击出发盒子从上到下停止的动画

要在uni-app中通过点击触发盒子从上到下停止的动画，你可以使用`@click`事件来监听点击事件，并在事件处理函数中控制动画的启停。以下是一个示例代码：

<template>
  <view class="container">
    <view class="box" :style="{ top: boxTop + 'px', animation: boxAnimation }" @click="toggleAnimation"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      boxTop: 0, // 盒子的初始位置
      boxAnimation: '', // 盒子的动画名称
      isAnimating: false, // 动画是否正在进行中
    };
  },
  methods: {
    toggleAnimation() {
      if (this.isAnimating) {
        // 动画正在进行中，则停止动画
        this.stopAnimation();
      } else {
        // 动画未进行，则开始动画
        this.startAnimation();
      }
    },
    startAnimation() {
      // 获取盒子的高度
      const boxHeight = uni.upx2px(100); // 假设盒子高度为100rpx

      // 创建动画实例
      const animation = uni.createAnimation({
        duration: 1000, // 动画持续时间，单位ms
        timingFunction: 'ease-in-out', // 缓动函数，可选值："linear"、"ease"、"ease-in"、"ease-out"、"ease-in-out"
      });

      // 设置动画的关键帧
      animation.translateY(boxHeight).step();

      // 更新盒子位置和动画名称，并将动画状态设置为进行中
      this.boxTop = boxHeight;
      this.boxAnimation = animation.export();
      this.isAnimating = true;
    },
    stopAnimation() {
      // 创建动画实例
      const animation = uni.createAnimation({
        duration: 0,
      });

      // 设置动画的关键帧
      animation.translateY(0).step();

      // 更新盒子位置和动画名称，并将动画状态设置为停止
      this.boxTop = 0;
      this.boxAnimation = animation.export();
      this.isAnimating = false;
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100rpx;
  height: 100rpx;
  background-color: red;
}
</style>

上述代码中，我们添加了一个`isAnimating`的data属性来表示动画是否正在进行中。在`toggleAnimation`方法中，通过判断`isAnimating`的值来决定是启动动画还是停止动画。当点击盒子时，将调用`toggleAnimation`方法来切换动画的启停。

在`startAnimation`方法中，与之前的示例代码相同，创建动画实例并设置关键帧，然后更新盒子的位置和动画名称，并将`isAnimating`设置为`true`表示动画正在进行中。

在`stopAnimation`方法中，我们创建一个持续时间为0的动画实例，将盒子移回原始位置，并更新盒子的位置和动画名称，最后将`isAnimating`设置为`false`表示动画已停止。

这样，当你点击盒子时，盒子会从上到下进行动画，再次点击时动画会停止。