微信小程序每次点击时view向上平移的动画详细

微信小程序中可以使用 `animation` API 来实现动画效果，其中 `translateY` 属性可以实现元素的竖直方向移动。

以下是一个简单的示例代码，点击按钮时，view 会向上平移 50px 的距离：

<view class="container">
  <button bindtap="moveUp">点击我向上移动</button>
  <view class="box" animation="{{animationData}}">我是一个view</view>
</view>

Page({
  data: {
    animationData: {}
  },
  moveUp: function() {
    var animation = wx.createAnimation({
      duration: 500, // 动画时长
      timingFunction: 'ease', // 动画方式
    })
    animation.translateY(-50).step() // 向上平移50px
    this.setData({
      animationData: animation.export()
    })
  }
})

在 CSS 中，需要设置 `.box` 元素的 `position` 属性为 `absolute` 或 `fixed`，并且需要设置 `top` 和 `left` 属性来确定元素在页面中的位置。

.container {
  position: relative;
  height: 100vh;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
}

以上代码中的 `animationData` 是一个动画对象，通过 `export()` 方法将动画对象导出为 `animation` 组件的 `animation` 属性所需要的格式。在 `animation` 组件中，需要将 `animation` 绑定到组件上，才能实现动画效果。

<view class="box" animation="{{animationData}}">我是一个view</view>