uniapp 盒子从上到下停止的动画

你可以使用uni-app的动画组件来实现盒子从上到下停止的动画效果。以下是一个示例代码：

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

<script>
export default {
  data() {
    return {
      boxTop: 0, // 盒子的初始位置
      boxAnimation: '', // 盒子的动画名称
    };
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    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();
    },
  },
};
</script>

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

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

上述代码中，通过uni-app的动画组件和`uni.createAnimation`方法创建了一个从上到下运动的动画效果。首先，在`mounted`钩子函数中调用`startAnimation`方法启动动画。在`startAnimation`方法中，通过`uni.createAnimation`创建了一个动画实例，并通过`animation.translateY(boxHeight).step()`设置了动画的关键帧，将盒子向下移动盒子高度的距离。然后，将盒子的初始位置和动画名称更新到data中的相应属性上，实现动画效果。

在模板中，使用`view`组件展示盒子，并通过`:style`绑定盒子的位置和动画属性。